Crafting Dynamic Custom Banners for Mobile and Desktop in Shopify: A How-To Guide!

This guide walks you through making eye-catching banners for your Shopify store that look great on both mobile phones and desktop computers. By leveraging custom code and responsive design techniques, you can enhance your homepage's visual appeal and provide visitors with a seamless browsing experience.

Steps to create custom and dynamic banners in Shopify :-

Here's a breakdown:

Step 1: Prepare Your Banner Images
Before diving into the technical implementation, design separate banners optimized for desktop and mobile devices using design software like Adobe Photoshop or Canva. Ensure that the dimensions and content are tailored to each device's screen size and resolution.

Step 2: Customize Your Theme
Access Theme Customization: Navigate to your Shopify admin dashboard and select "Online Store" > "Themes" > "Customize" for your active theme.
Add Custom Sections: Create custom sections for your banners to allow users to upload and customize banner content directly from the admin panel.
Define Settings Schema: Define settings schema for banner customization options such as image uploads, text fields, and links.

Step 3: Implement Custom Code

HTML & CSS: This code snippet includes the HTML structure for the banners along with CSS styles for overlay text, buttons, and responsiveness.
HTML:

< link rel = " stylesheet" href="slick-theme.min.css">

< link rel=" stylesheet" href="slick.min.css ">

< link rel =" stylesheet" href="font-awesome.css">

< link rel =" stylesheet" href="{{ "home-page-slider.css" | asset_url | stylesheet_tag }}">

< div class=" my-slider shop_banner">

{%- for block in section.blocks -%}

< div>;

< img class="desktop" src="{{ block.settings.fst-image | img_url: '1349x700' }}; alt=""/>

< div class ="mobile" style="display: none">

< img src="{{ block.settings.fst-image-mbl | img_url: '414x650' }}" alt=""/>

< /div>

< div class="overlay-text__inner_left">

< div class="overlay-text__text">

< h2 class="overlay-text__title h1-style">{{ block.settings.fst-heading }}

< div class="overlay-text__rte rte large-text">

< p>{{ block.settings.fst-description }}

< /div>

< div class="lightly-spaced-row-above">

< a href="{{ block.settings.fst-link }}">

< span class="overlay-text__button button altcolour">{{ block.settings.button }}

< /a >

< /div>

{ % endfor %}

< /div>

CSS:
.my-slider {
position: relative;
}
/* Overlay Text Styles */
.overlay-text__inner_left {
position: absolute;
top: 40%;
margin-left: -11%;
z-index: 9;
}
.overlay-text__title {
font-size: 44px;
font-weight: 400;
margin-bottom: 10px;
}
.overlay-text__rte p {
font-size: 1.35em;
line-height: 1.6;
max-width: 65ch;
color: white;
font-weight: 600;
}
.lightly-spaced-row-above {
margin-top: 1.75em;
}
.lightly-spaced-row-above span {
padding: 10px 18px;
background-color: white;
color: black;
font-size: 16px;
border-radius: 6px;
border: unset !important;
outline: unset !important;
}
.lightly-spaced-row-above span:hover {
background-color: #000;
color: white;
transition: all ease-in-out 500ms;
}
/* Slick Slider Styles */
.slick-initialized .slick-slide {
color: #fff;
height: 650px; display: flex;
align-items: center;
justify-content: center;
}
.slick-next,
.slick-prev {
z-index: 5;
}
.slick-next {
right: 15px;
}
.slick-prev {
left: 15px;
}
.slick-next:before,
.slick-prev:before {
color: #000;
font-size: 26px;
} .slick-next:focus,
.slick-next:hover,
.slick-prev:focus,
.slick-prev:hover {
color: #fff !important;
}
.slick-prev:before {
content: '\f104' !important;
font-size: 60px !important;
}
.slick-next:before {
content: '\f105 ';
font-size: 60px !important;
}
/* Mobile-specific Styles */
@media (max-width: 767px) {
.overlay-text__inner_left {
margin-left: 0%;
top: 40% !important
; }
.mobile img {
width: 100%;
height: 100%;
}
.desktop {
display: none !important;
}
.my-slider {
margin-top: -13px;
}
.shop_banner {
height: 500px;
}
.my-slider .slick-initialized .slick-slide {
height: 500px !important;
}
.my-slider div img {
width: 100%;
height: auto;
object-fit: cover;
}
}

JavaScript:The JavaScript code initializes the Slick slider plugin with customized settings for slide transition, autoplay, and responsiveness.

< script src="jquery.min.js">
< script src="slick.min.js">
< script>
$(document).ready(function () {
$(".my-slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
speed: 4000, // Slide transition speed
infinite: true, // Enable infinite looping
autoplaySpeed: 10000, // Autoplay speed
autoplay: true,
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 1,
autoplaySpeed: 10000,
// Adjusted autoplay speed for smaller devices },
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
arrows: false,
autoplaySpeed: 10000, // Adjusted autoplay speed for mobile devices
},
},
],
});
});
< /script>

Liquid (Shopify Schema):

The schema defines the settings and blocks for the custom banner section in the Shopify admin panel, allowing users to upload images and customize text and links.

Json: {% schema %}

{ "name": "Home Banner",

"settings":

[

{ "type": "text",

"id": "heading",

"label": "Heading" }

"blocks": [

{

"type": "row",

"name": "Banner Slider",

"settings":

[

{ "type": "image_picker",

"id": "fst-image",

"label": "First Image"

{

"type": "image_picker",

"id": "fst-image-mbl",

"label": "First Image Mobile"

{

"type": "text",

"id": "fst-heading",

"label": "First Heading"

{

"type": "text",

"id": "fst-description",

"label": "First Description"

{

"type": "url", "id":

"fst-link",

"label": "First Link"

{

"type": "text",

"id": "button",

"label": "Button"

}

]

}

"presets":

[ {

"name": "Home Banner"

}

]

}

{% endschema %}

Conclusion:
By following these steps and implementing the provided code, you can create attractive banners for your Shopify store that adapt seamlessly to both mobile and desktop devices. This will enhance the visual appeal of your homepage and provide a consistent browsing experience for your visitors across all devices.