Adding a Product Banner section to your Shopify store can help you highlight trending products, showcase discounts, and provide a more engaging shopping experience for your visitors. In this guide, we’ll walk you through how to add this feature to your store, customize it, and make it fully functional across mobile and desktop views.
Benefits of Using the Product Banner Section
- Highlight Special Offers: If you want to offer a discount, create a discount code and display it on the banner. You can also set it up so that the discount applies only to the specific products displayed on the banner.
- Promote New or Trending Products: Use the banner to feature new arrivals, trending items, or bestsellers.
- Mobile Optimization: Remember, the mobile and desktop views are separate, so make sure to upload different images or links as needed to optimize the experience for all users.
Step 1: Create the Product Banner Section
1. Access the Code Editor
First, log in to your Shopify admin panel. From there, go to the Themes section, click on the three dots, and select Edit Code.
2. Create a New Section
In the Sections folder, create a new section. You can name it anything you like, but for this guide, we’ll call it GRT Product Banner.
3. Add the Code
After creating the section, you’ll see a default schema template. Delete this template, then paste the code provided. Save your changes, and exit the Code Editor.
Schema Code :
{% schema %}
{
"name": "Grt-product-Banner",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Section Heading"
},
{
"type": "range",
"id": "heading_font_size",
"label": "Section Heading Font Size",
"min": 16,
"max": 48,
"step": 1,
"default": 24,
"unit": "px"
},
{
"type": "inline_richtext",
"id": "subheading",
"label": "Section Subheading"
},
{
"type": "range",
"id": "subheading_font_size",
"label": "Section Subheading Font Size",
"min": 14,
"max": 40,
"step": 1,
"default": 16,
"unit": "px"
},
{
"type": "select",
"id": "heading_align",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left",
"label": "heading and subheading alignment"
},
{
"type": "select",
"id": "layout",
"options": [
{ "value": "full_bleed", "label": "Full width" },
{ "value": "grid", "label": "Grid" }
],
"default": "full_bleed",
"label": "Layout"
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt_image",
"label": "t:sections.slideshow.settings.slide_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.slideshow.settings.slide_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.slideshow.settings.slide_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.slideshow.settings.slide_height.options__4.label"
}
],
"default": "medium",
"label": "image height"
},
{
"type": "image_picker",
"id": "desktop_banner_image",
"label": "Desktop Banner Image"
},
{
"type": "url",
"id": "desktop_banner_link",
"label": "Desktop Banner Link"
},
{
"type": "image_picker",
"id": "mobile_banner_image",
"label": "Mobile Banner Image"
},
{
"type": "url",
"id": "mobile_banner_link",
"label": "Mobile Banner Link"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 24
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 24
},
{
"type": "color",
"id": "bg_color",
"label": "section background"
}
],
"blocks": [
{
"type": "product_block",
"name": "Product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Add Product"
},
{
"type": "image_picker",
"id": "product_image",
"label": "Product Image"
},
{
"type": "color",
"id": "product_color",
"label": "product card background ",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "product text color ",
"default": "#000000"
}
]
}
],
"presets": [
{
"name": "Grt-product-Banner",
}
]
}
{% endschema %}Liquid Code :
<div class="{{ section.id }} {% if section.settings.layout == 'grid' %}page-width{% endif %}" style="background-color:{{ section.settings.bg_color }}">
<div class="interactive-banner">
<div class="text-detail {{ section.settings.heading_align }}">
<h2 class="section-heading">{{ section.settings.heading }}</h2>
<p class="section-subheading">{{ section.settings.subheading }}</p>
</div>
{% if section.settings.desktop_banner_image %}
<a href="{{ section.settings.desktop_banner_link }}" class="desktop-link" {% if section.settings.desktop_banner_link %}target="_blank"{% endif %}>
<img src="{{ section.settings.desktop_banner_image | img_url: 'master' }}" alt="Banner" class="banner-image desktop-image" />
</a>
{% endif %}
{% if section.settings.mobile_banner_image %}
<a href="{{ section.settings.mobile_banner_link }}" class="mobile-link" {% if section.settings.mobile_banner_link %}target="_blank"{% endif %}>
<img src="{{ section.settings.mobile_banner_image | img_url: 'master' }}" alt="Banner" class="banner-image mobile-image" />
</a>
{% endif %}
<div class="product-slider">
{% for block in section.blocks %}
{% assign product = block.settings.product %}
<div class="product-item" style=" background:{{block.settings.product_color}};">
{% if product %}
<span class="banner-img">
{%liquid
assign img_pic = product.featured_image
if block.settings.product_image != blank
assign img_pic = block.settings.product_image
endif
%}
<img src="{{ img_pic | img_url: 'medium' }}" alt="{{ product.title }}" />
</span>
<div class="wrap">
<div class="tipr">
<div class="product-title" style="color:{{ block.settings.text_color }};">{{ product.title | truncate: 40 }}</div>
<div class="product-price " style="color:{{ block.settings.text_color }};" data-value="{{ product.price_max }}">{{ product.price | money }}
{% if product.compare_at_price > product.price %}
<div class="compare-at-price">
{{ product.compare_at_price | money }}
</div>
{% endif %}
</div>
</div>
<div class="var_anchor">
<p>{{ product.variants.size }} Color</p>
<a href="{{ product.url }}" class="view-button">View</a>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
<div class="custom-arrows">
<div class="custom-prev-arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z"/></svg>
</div>
<div class="custom-next-arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12l-4.58-4.59L10 6l6 6-6 6z"/></svg>
</div>
</div>
</div>
</div>
CSS Code :
<style>
.banner-img img{max-width:100%; max-height:100%;}
.{{ section.id }} .interactive-banner {position: relative; width: 100%; margin-top: {{section.settings.padding_top}}px; margin-bottom: {{section.settings.padding_bottom}}px;}
.{{ section.id }} .banner-image {width: 100%; height: {{ section.settings.image_height | default: 400 }}px; object-fit: cover;}
.{{ section.id }} .product-slider{display:none;}
.{{ section.id }} .product-slider{position: absolute; right:0; bottom: 43px; border-radius: 10px; margin-left: 10px; margin-right:10px; display: flex; overflow-x: auto; scroll-behavior: smooth; max-width:100%;}
.{{ section.id }} .product-item { display: flex; flex-direction: row; align-items: center; padding:8px 16px; border-radius: 8px; margin:0 8px; font-weight:500;}
.{{ section.id }} .product-item .banner-img {display:flex; border-radius: 5px; width:99px; height:99px; align-items: center; justify-content: center;}
.{{ section.id }} .wrap { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: baseline; margin-left:24px;}
.{{ section.id }} .product-title { font-size: 14px; white-space: normal; text-overflow: ellipsis; display: block; max-width: 65%;}
.{{ section.id }} .product-price {font-size: 14px;}
.{{ section.id }} .view-button {display: inline-block; padding: 2px 30px; line-height:26px; background: #000000; color: white; text-transform: uppercase; font-size: 14px; border-radius: 2px; text-decoration: none;}
.{{section.id}} .section-heading{font-size:{{section.settings.heading_font_size}}px;}
.{{section.id}} .section-subheading{font-size:{{section.settings.subheading_font_size}}px;}
.{{section.id}} .text-detail { padding-bottom: 16px;}
.{{section.id}} .var_anchor p{color:#979797; font-size:14px; margin:0;}
.{{ section.id }} .product-item { flex: 0 0 calc(33.333% - 16px);}
.{{ section.id }} .var_anchor {display: flex; justify-content: space-between; align-items: center; text-align: center; margin-top: 14px; width: 100%;}
.{{ section.id }} .tipr {display: flex; justify-content: space-between; align-items:flex-start; height:34px; overflow:hidden;}
.{{ section.id }} .product-price {flex-shrink:0; padding-left:8px; line-height:16px;}
.{{ section.id }} .compare-at-price { font-size: 14px; color: #999; text-decoration: line-through;}
/* For WebKit-based browsers (Chrome, Edge, Safari) */
.product-slider::-webkit-scrollbar {
height: 8px; /* Height of the scrollbar */
}
/* For Firefox */
* {
scrollbar-width: thin; /* Thin scrollbar */
}
.custom-arrows {position: absolute; bottom:18%; right: 1.5%; width: 74px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;}
.custom-prev-arrow, .custom-next-arrow { width: 32px; height: 32px; background-color: #000000; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.custom-prev-arrow svg, .custom-next-arrow svg{flex-shrink:0; width:24px;}
.custom-prev-arrow svg path,.custom-next-arrow svg path{ fill: white;}
.custom-prev-arrow:hover, .custom-next-arrow:hover {background-color: #4c4c4c;}
.product-title.mobile {display: none;}
.product-title.desktop { display: block;}
.{{ section.id }} .product-title {line-height: 1.3; word-wrap: break-word; max-height: 3.4rem; align-content: flex-end; text-align:left; max-width:65%;}
@media (min-width: 769px) {
.{{ section.id }} .desktop-image { display: block; }
.{{ section.id }} .mobile-image { display: none; }
}
@media (max-width: 768px) {
.{{section.id}}{padding:0; }
.{{section.id}} .product-slider{padding-left:14px;}
.{{section.id}} .text-detail{padding:0 1.5rem}
.{{ section.id }} .product-slider{bottom:0px; margin-left:0px; position:relative; top:-16px; border-radius:0; width:100%;}
.{{ section.id }} .product-item{padding:12px;}
.{{ section.id }} .tipr{height:44px; overflow:hidden;}
.{{ section.id }} .custom-arrows {position: absolute; top: 76%; right: 3%; width:58px; display:none}
.{{ section.id }} .custom-prev-arrow, .custom-next-arrow{width: 24px; height: 24px;}
.{{ section.id }} .product-title.mobile{display: block;}
.{{ section.id }} .product-title.desktop{display: none;}
.{{ section.id }} .banner-image {height: auto; width: 100%; }
.{{ section.id }} .desktop-image { display: none; }
.{{ section.id }} .mobile-image { display: block; }
.{{ section.id }} .banner-image { height:100%; }
.{{ section.id }} .wrap { margin: -3px 0px 0px 15px; overflow:hidden;}
.{{ section.id }} .product-price {font-size: 12px; margin:5px 0px;}
.{{ section.id }} .var_anchor p {font-size: 10px; color: #979797; font-family: 'Poppins';}
.{{ section.id }} .var_anchor {}
.{{ section.id }} .product-item .banner-img{ height:100%;}
.{{ section.id }} .view-button {padding: 2px 16px; margin-left:8px; flex-shrink:0; font-size:12px; line-height: 18px;}
.{{section.id}} .var_anchor p,.{{ section.id }} .product-title {font-size: 12px;}
.{{ section.id }} .product-item { box-shadow:none;/* 0px 0px 4px 0px rgba(0, 0, 0, 0.25);*/ transition: box-shadow 0.3s ease;}
.{{ section.id }}.interactive-banner{padding-bottom:118px; margin-bottom: 14px;}
.{{ section.id }} .compare-at-price { font-size: 12px; color: #999; text-decoration: line-through;}
}
@media (max-width: 480px) {
.{{ section.id }} .product-item {flex: 0 0 calc(85% - 12px); margin-left:6px; margin-right:6px; border-radius:5px;}
.{{ section.id }} .product-item .banner-img {width:72px; height:72px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
}
</style>
Javascript Code :
<script>
document.addEventListener('DOMContentLoaded', function () {
var mweb = 18;
if ($(window).outerWidth() < 768) {
mweb = 16;
}
const slider = document.querySelector('.{{ section.id }} .product-slider');
const prevArrow = document.querySelector('.{{ section.id }} .custom-prev-arrow');
const nextArrow = document.querySelector('.{{ section.id }} .custom-next-arrow');
const productItems = document.querySelectorAll('.{{ section.id }} .product-item');
const offsetW = document.querySelector('.{{ section.id }} .product-item').clientWidth + mweb;
function updateArrowsVisibility() {
if (productItems.length <= 3) {
prevArrow.style.display = 'none';
nextArrow.style.display = 'none';
} else {
prevArrow.style.display = 'flex';
nextArrow.style.display = 'flex';
}
}
updateArrowsVisibility();
prevArrow.addEventListener('click', function () {
slider.scrollLeft -= offsetW;
});
nextArrow.addEventListener('click', function () {
slider.scrollLeft += offsetW;
});
});
</script>
Note : Ensure that jQuery is installed on your website
Step 2: Customize the Product Banner Section
1. Open Theme Customizer
Return to your Theme Customizer and add the newly created GRT Product Banner section. Once it’s added, you’ll see a variety of settings to personalize the section.
2. Customize the Banner
- Heading and Subheading: You can adjust the font size, alignment (left, center, right), and layout (grid or full-width) for both the heading and subheading.
- Background Image or Color: Upload separate images for desktop and mobile views. You can also choose a solid color for the background if you prefer not to use an image.
- Clickable Banner: You can make the banner image clickable. Add a link to the banner so that when visitors click on it, they are redirected to the desired page. You can set different links for mobile and desktop banners.
3. Separate Desktop and Mobile Customization
For example, you could set a link to a blog page on the desktop banner and a link to the contact page on the mobile banner. This allows the banner to lead to different destinations depending on the device.
4. Padding and Alignment
Adjust the top and bottom padding of the section to control the spacing. You can also choose whether to use an image or a background color for the section.
Step 3: Add Products to the Banner
1. Select Products
Choose which products you want to feature on the banner. You can upload custom images for these products, or use their default images.
2. Customize Product Card
- You can customize the appearance of the product cards by:
- Setting a background color (e.g., red) and text color (e.g., white).
- Displaying product details such as title, price, variants, and any applied discounts or compare prices.
You can add as many products as you want to the banner. Once you save your changes, the products will appear in both desktop and mobile views, with all relevant details.
Step 4: Save and Preview
Once you’ve finished customizing the banner, save your changes. The section will now be live on your store. You can preview it on both desktop and mobile devices to make sure everything looks great.
