Want to make your Shopify homepage look more dynamic and professional? In this tutorial, we’ll show you how to create a Shopify section with a Swiper.js banner carousel that automatically displays product banners with smooth transitions and pagination.
🧩 Goal: Build a dynamic product carousel using Shopify’s
section.blocks and Swiper.js.Step 1: Create Your New Section File
Go to your Shopify Admin → Online Store → Themes → Edit Code → Sections and click “Add a new section”. Name it something like zhd-banner-carousel.liquid.
Paste the Following Code:
<!-- Swiper Styles -->
<style>
#shopify-section-template--19858632605915__zhd_banner_carousel_E9hErV {
padding-top: 10px;
padding-bottom: 40px;
}
div#zhd-banner-carousel {
max-width: 1200px;
margin: 0 auto;
}
#zhd-banner-carousel .swiper {
width: 100%;
height: 700px;
padding-top: 50px;
padding-bottom: 50px;
}
#zhd-banner-carousel .swiper-wrapper {
height: 560px;
}
#zhd-banner-carousel .swiper-slide {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 12px;
overflow: hidden;
background-position: top;
}
#zhd-banner-carousel .swiper-slide-active {
transition: ease-in-out 4s !important;
}
#zhd-banner-carousel .swiper-slide-active:hover {
background-position: center bottom !important;
}
#zhd-banner-carousel .swiper-slide a {
display: block;
width: 100%;
height: 100%;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #00b9bb;
}
@media only screen and (max-width: 767px) {
#zhd-banner-carousel .swiper {
height: 400px;
}
#zhd-banner-carousel .swiper-wrapper {
height: 300px;
}
}
</style>
<!-- Swiper HTML -->
<div id="zhd-banner-carousel">
<div class="swiper ZHD-Banner-Carousel-mySwiper">
<div class="swiper-wrapper">
{% raw %}{% for block in section.blocks %}{% endraw %}
{% raw %}{% assign product = all_products[block.settings.product] %}{% endraw %}
{% raw %}{% if product %}{% endraw %}
<div class="swiper-slide"
style="background-image: url('{% raw %}{{ product.featured_image | img_url: '1200x' }}{% endraw %}');">
<a href="{% raw %}{{ product.url }}{% endraw %}" target="_blank" aria-label="{% raw %}{{ product.title }}{% endraw %}"></a>
</div>
{% raw %}{% endif %}{% endraw %}
{% raw %}{% endfor %}{% endraw %}
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Section Schema -->
{% raw %}{% schema %}{% endraw %}
{
"name": "ZHD Banner Carousel",
"settings": [],
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"type": "product",
"id": "product",
"label": "Select Product"
}
]
}
],
"presets": [
{
"name": "ZHD Banner Carousel",
"blocks": []
}
]
}
{% raw %}{% endschema %}{% endraw %}
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".ZHD-Banner-Carousel-mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
loop: true,
slidesPerView: 4,
spaceBetween: 0,
coverflowEffect: {
rotate: 40,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
Step 2: Add the Section to Your Homepage
Now go to Customize Theme → Add Section → “ZHD Banner Carousel”. From the block settings, select the products you want to feature in your carousel. Each product will display as a slide with its featured image.
Step 3: Enable Swiper in Your Theme
If your theme doesn’t already include Swiper.js, add this CDN link in your theme.liquid file inside the <head> tag:
<!-- Swiper CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
Final Thoughts
This ZHD Banner Carousel Section lets you showcase multiple products dynamically, creating a premium feel for your Shopify homepage. You can customize height, autoplay, or hover animations for a more interactive shopping experience.
Written by Zahidul Islam | Shopify Custom Design Tutorials