How to Add a Testimonial Carousel to Your Shopify Store (ZHD Testimonial Section)

How to Add a Testimonial Carousel to Your Shopify Store (ZHD Testimonial Section)

Customer testimonials build trust, improve conversions, and make your store look professional. In this tutorial, we’ll create a Shopify Testimonial Carousel Section using Swiper.js to make it interactive, responsive, and automatic.

🧩 Goal: Create a rotating testimonial slider that displays client images, quotes, and names. 💡 Skill Level: Beginner – Intermediate.

Step 1: Create a New Section

Go to your Shopify Admin → Online Store → Themes → Edit Code → Sections → Add a new section. Name it zhd-testimonial-carousel.liquid.

Paste This Code:

<style>
  .testimonial-slider {
    text-align: center;
    padding: 40px 20px;
  }
  .testimonial-stars {
    color: orange;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .testimonial-text {
    font-size: 20px;
    font-weight: 500;
    max-width: 900px;
    margin: 0 auto 20px;
  }
  .testimonial-client-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 10px;
    border: 2px solid #eee;
  }
  .testimonial-author {
    color: #888;
    font-size: 16px;
    margin-bottom: 20px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    background: white;
    border: 1px solid black;
    border-radius: 9999px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 16px;
    color: black;
  }
</style>

<div class="testimonial-slider">
  <div class="swiper testimonial-slider-mySwiper">
    <div class="swiper-wrapper">
      {% raw %}{% for block in section.blocks %}{% endraw %}
        <div class="swiper-slide">
          <div class="testimonial-stars">★★★★★</div>
          {% raw %}{% if block.settings.client_image %}{% endraw %}
            <img class="testimonial-client-image" src="{% raw %}{{ block.settings.client_image | img_url: '100x100' }}{% endraw %}" alt="Client Image">
          {% raw %}{% endif %}{% endraw %}
          <p class="testimonial-text">"{% raw %}{{ block.settings.testimonial_text }}{% endraw %}"</p>
          <div class="testimonial-author">- {% raw %}{{ block.settings.client_name }}{% endraw %}</div>
        </div>
      {% raw %}{% endfor %}{% endraw %}
    </div>

    <!-- Arrows -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    new Swiper('.testimonial-slider-mySwiper', {
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: true,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  });
</script>

{% raw %}{% schema %}{% endraw %}
{
  "name": "ZHD Testimonial Carousel",
  "tag": "section",
  "class": "testimonial-carousel-section",
  "max_blocks": 15,
  "settings": [],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        {
          "type": "text",
          "id": "testimonial_text",
          "label": "Testimonial",
          "default": "This is a sample testimonial text."
        },
        {
          "type": "text",
          "id": "client_name",
          "label": "Client Name",
          "default": "Jane Doe"
        },
        {
          "type": "image_picker",
          "id": "client_image",
          "label": "Client Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "ZHD Testimonial Carousel",
      "category": "Testimonials",
      "blocks": [
        { "type": "testimonial" },
        { "type": "testimonial" },
        { "type": "testimonial" }
      ]
    }
  ]
}
{% raw %}{% endschema %}{% endraw %}

Step 2: Add Swiper.js to Your Theme

If your theme doesn’t already include Swiper, add the following CDN links to your theme.liquid inside the <head> tag:

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

Step 3: Customize in Theme Editor

In your Shopify theme editor, click Add Section → ZHD Testimonial Carousel. Add up to 15 testimonials — each with:

  • ⭐ A client quote
  • 👤 Client name
  • 🖼️ Optional profile image
Shopify Testimonial Carousel Example
✨ Result: You’ll now have an elegant, responsive testimonial slider that automatically rotates and shows navigation arrows and dots.

Step 4: Optional Tweaks

You can adjust the autoplay delay or remove arrows by editing the JS section. For example:

autoplay: {
  delay: 4000, // changes slide every 4s
  disableOnInteraction: false,
}

🎉 Final Thoughts

Adding testimonials is one of the easiest ways to build customer trust. This ZHD Testimonial Carousel is light, mobile-friendly, and uses Shopify’s native section system — perfect for boosting credibility without slowing your site.

Written by Zahidul Islam | Shopify Custom Design Tutorials

Back to blog

Leave a comment