⚙️ How to Add a Swiper Slider in Shopify Without Apps

Want to add a powerful, touch-friendly slider to your Shopify theme—without paying for apps? This tutorial shows you how to integrate the popular Swiper.js library directly in your theme, create a custom slider section, and customize it using the Theme Editor.

You will learn how to:

• Load Swiper from a CDN (no installation required)
• Create a Shopify section that uses Swiper
• Add blocks for each slide
• Enable autoplay, navigation, pagination, and responsive settings

---

📌 Step 1 — Load Swiper Library in Your Theme

Open your theme and add Swiper's CSS + JS inside your theme.liquid file right before the closing </head> tag.

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

This loads Swiper globally so any section can use it.

---

📌 Step 2 — Create a New Shopify Section

Create a file in:

sections/swiper-slider.liquid

Then paste the full code below.

---

📌 Step 3 — Full Swiper Slider Section Code

{% comment %}
  Swiper Slider Section for Shopify
  - Supports images
  - Optional titles & text per slide
  - Autoplay, navigation & pagination
{% endcomment %}

<section id="section-{{ section.id }}" class="swiper-section">

  <div class="swiper swiper-{{ section.id }}">
    <div class="swiper-wrapper">
      {% for block in section.blocks %}
        <div class="swiper-slide">
          <div class="slide-inner">
            {% if block.settings.image != blank %}
              <img 
                src="{{ block.settings.image | img_url: '1500x' }}" 
                alt="{{ block.settings.image_alt }}" 
              />
            {% endif %}

            {% if block.settings.heading != blank %}
              <h3>{{ block.settings.heading }}</h3>
            {% endif %}
            {% if block.settings.text != blank %}
              <p>{{ block.settings.text }}</p>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>

    {% if section.settings.show_pagination %}
      <div class="swiper-pagination swiper-pagination-{{ section.id }}"></div>
    {% endif %}

    {% if section.settings.show_arrows %}
      <div class="swiper-button-prev swiper-prev-{{ section.id }}"></div>
      <div class="swiper-button-next swiper-next-{{ section.id }}"></div>
    {% endif %}
  </div>

</section>

<style>
#section-{{ section.id }} {
  padding: 40px 0;
}

#section-{{ section.id }} .slide-inner {
  text-align: center;
}

#section-{{ section.id }} img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  new Swiper(".swiper-{{ section.id }}", {
    loop: {{ section.settings.enable_loop }},
    autoplay: {{ section.settings.autoplay | default: false }},
    slidesPerView: {{ section.settings.slides_per_view }},
    spaceBetween: {{ section.settings.space_between }},
    pagination: {
      el: ".swiper-pagination-{{ section.id }}",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-next-{{ section.id }}",
      prevEl: ".swiper-prev-{{ section.id }}",
    },
    breakpoints: {
      768: { slidesPerView: {{ section.settings.slides_per_view_tablet }} },
      1024: { slidesPerView: {{ section.settings.slides_per_view_desktop }} }
    }
  });
});
</script>

{% schema %}
{
  "name": "Swiper Slider",
  "settings": [
    { "type": "checkbox", "id": "enable_loop", "label": "Enable looping", "default": true },
    { "type": "checkbox", "id": "autoplay", "label": "Autoplay slides", "default": true },
    { "type": "checkbox", "id": "show_arrows", "label": "Show arrows", "default": true },
    { "type": "checkbox", "id": "show_pagination", "label": "Show pagination", "default": true },

    { "type": "range", "id": "slides_per_view", "label": "Slides per view (mobile)", "default": 1, "min": 1, "max": 3 },
    { "type": "range", "id": "slides_per_view_tablet", "label": "Slides per view (tablet)", "default": 2, "min": 1, "max": 4 },
    { "type": "range", "id": "slides_per_view_desktop", "label": "Slides per view (desktop)", "default": 3, "min": 1, "max": 5 },

    { "type": "range", "id": "space_between", "label": "Space between slides", "default": 20, "min": 0, "max": 50 }
  ],

  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Slide Image" },
        { "type": "text", "id": "image_alt", "label": "Image alt text" },
        { "type": "text", "id": "heading", "label": "Slide Heading" },
        { "type": "textarea", "id": "text", "label": "Slide Text" }
      ]
    }
  ],

  "max_blocks": 12,
  "presets": [
    { "name": "Swiper Slider", "category": "Media" }
  ]
}
{% endschema %}

---

📌 Step 4 — Add the Section in the Theme Editor

Go to:

Online Store → Customize → Add Section → Swiper Slider

Add slides, images, adjust autoplay, arrows, spacing, and responsive settings.

---

📌 Step 5 — Optional Styling Enhancements

• Add rounded corners to images
• Add overlay text styles
• Change arrow SVG icons
• Add fade or cube transition effects

.swiper-slide img {
  border-radius: 16px;
}

---

🎉 You're Done!

You now have a fully working Swiper slider integrated into your Shopify theme—without using any apps.

Want me to generate more tutorials like:

• Testimonial Sliders
• Product Sliders (linked to collections)
• Dynamic blog sliders
• Advanced Swiper effects
• Interactive hero sliders

Just tell me what you want next! 🚀