How to Add a Custom Banner Section in Shopify

Creating visually appealing and responsive banners is essential for any Shopify store. In this guide, we’ll demonstrate how to add a custom banner section with support for desktop and mobile images, and we'll name it "KB Banner Section."

Step 1: Add the Code

Copy and paste the following HTML, CSS, and schema code into your Shopify theme editor:

Shopify Schema

{% schema %}
{
"name": "KB Banner Section",
"settings": [
{
"type": "image_picker",
"id": "desktop_image",
"label": "Desktop Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Banner Image"
},
{
"type": "url",
"id": "banner_link",
"default": "/",
"label": "Banner Link URL"
}
],
"presets": [
{
"name": "KB Banner Section",
}
]
}
{% endschema %}

HTML Code

<div class="kb-banner-section">
<a href="{{ section.settings.banner_link }}" class="kb-bannerLink">
<picture>
{% if section.settings.mobile_image != blank %}
<source srcset="{{ section.settings.mobile_image | img_url: 'master' }}" media="(max-width: 768px)">
{% endif %}

{% if section.settings.desktop_image != blank %}
<img src="{{ section.settings.desktop_image | img_url: 'master' }}" width="100%" height="auto" alt="Hero Banner" class="kb-heroImage">
{% endif %}
</picture>
</a>
</div>

CSS Code

<style>
.kb-banner-section {
position: relative;
width: 100%;
overflow: hidden;
}

.kb-banner-section picture img {
width: 100%;
height: auto;
display: block;
}

.kb-banner-section .kb-heroImage {
max-width: 100%;
height: auto;
}
.kb-banner-section .kb-bannerLink {
display: block;
text-decoration: none;
}
</style>

This code defines a flexible banner section, allowing you to:

• Use different images for desktop and mobile.
• Add clickable links for better navigation.

Step 2: Save and Customize

1. In your Shopify admin, go to Online Store > Themes.
2. Click Customize for the theme you want to edit.
3. Add the newly created KB Banner Section from the section library.

Features

• Responsive Design: Adapts to various screen sizes with separate images for desktop and mobile.
• Customizable Links: Add links to banners for better user engagement.
• Ease of Use: Update images and URLs directly through the Shopify editor.

Conclusion

You can enhance your store's look and functionality using the KB Banner Section. Customize it further to align with your brand's aesthetics. Let me know if you'd like additional guidance!

Develop Your Shopify Store in Easy 3 Steps: Contact Now!