🎠 How to Add a Dynamic Banner Carousel in Shopify (Using Swiper)

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.

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:

  

    

      {% raw %}{% for block in section.blocks %}{% endraw %}
        {% raw %}{% assign product = all_products[block.settings.product] %}{% endraw %}
        {% raw %}{% if product %}{% endraw %}
          

            
          
        {% raw %}{% endif %}{% endraw %}
      {% raw %}{% endfor %}{% endraw %}
    
    

  



{% 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 %}

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 tag:

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