How to Design a Customer Feedback Section in Shopify (Step-by-Step Guide)

Customer feedback is one of the most powerful tools to build trust and increase conversions in your Shopify store. A well-designed testimonial section can instantly make your brand feel more reliable and authentic.

In this tutorial, I’ll walk you through how to create a fully customizable customer feedback section in Shopify using Liquid — no apps required.

Why You Need a Customer Feedback Section

Before jumping into the steps, let’s quickly understand the value:

• Builds trust with new visitors
• Improves conversion rates
• Showcases real customer experiences
• Makes your store look more professional

What You’ll Build

By the end of this tutorial, you’ll have:

• A clean and modern testimonial section
• Dynamic feedback blocks (editable from Shopify Customizer)
• Responsive layout (mobile-friendly)
• Easy-to-manage content system

Step 1: Access Your Shopify Theme Code

First, log in to your Shopify admin panel.

1. Go to Online Store → Themes
2. Find your active theme
3. Click on the three dots (⋯)
4. Select Edit Code

This will open the backend where you can create and edit theme files.

Step 2: Create a New Section File

Now, you need to create a custom section.

1. In the left sidebar, find the Sections folder
2. Click Add a new section
3. Name the file:

customer-feedback.liquid

4. Click Create

This file will hold your entire testimonial section.

Step 3: Add Your Section Code

Open the newly created file and paste your full Liquid code into it.

Your code should include:

• HTML structure for feedback cards
• CSS for styling
• Liquid schema for dynamic content

Once pasted, click Save.

<section id="feedback-{{ section.id }}" class="feedback-section">
  <div class="feedback-container">

    {% if section.settings.heading != blank %}
      <h2 class="feedback-heading">{{ section.settings.heading }}</h2>
    {% endif %}

    <div class="feedback-wrapper">

      <div class="feedback-slider">
        {% for block in section.blocks %}
          <div class="feedback-card" {{ block.shopify_attributes }}>
            <div class="feedback-card-inner">

              <p class="feedback-text">
                {{ block.settings.feedback_text }}
              </p>

              <div class="feedback-user">
                {% if block.settings.customer_image %}
                  <img 
                    src="{{ block.settings.customer_image | image_url: width: 120 }}" 
                    alt="{{ block.settings.customer_name | escape }}"
                    loading="lazy"
                    width=""
                    height=""
                  >
                    
                {% endif %}

                <div class="feedback-info">
                  <h4>{{ block.settings.customer_name }}</h4>

                  <div class="stars" aria-label="Rating: {{ block.settings.rating }} out of 5">
                    {% for i in (1..5) %}
                      {% if i <= block.settings.rating %}
                        <span>★</span>
                      {% else %}
                        <span>☆</span>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
              </div>

            </div>
          </div>
        {% endfor %}
      </div>

      <!-- Navigation buttons below cards -->
      <div class="feedback-nav">
        <button class="feedback-btn prev" aria-label="Previous">‹</button>
        <button class="feedback-btn next" aria-label="Next">›</button>
      </div>

    </div>
  </div>

  <!-- CSS -->
  <style>
    #feedback-{{ section.id }} {
      padding: {{ section.settings.padding_top }}px 20px {{ section.settings.padding_bottom }}px;
      background: {{ section.settings.bg_color }};
      {% if section.settings.bg_image %}
        background-image: url('{{ section.settings.bg_image | image_url }}');
        background-size: cover;
        background-position: center;
      {% endif %}
    }

    #feedback-{{ section.id }} .feedback-container {
      max-width: 1200px;
      margin: auto;
      text-align: {{ section.settings.text_align }};
    }

    #feedback-{{ section.id }} .feedback-heading {
      margin-bottom: 30px;
    }

    #feedback-{{ section.id }} .feedback-wrapper {
      position: relative;
      overflow: hidden;
    }

    #feedback-{{ section.id }} .feedback-slider {
      display: flex;
      transition: transform 0.4s ease;
    }

    /* 4 cards per row */
    #feedback-{{ section.id }} .feedback-card {
      min-width: 25%;
      padding: 15px;
      box-sizing: border-box;
    }

    #feedback-{{ section.id }} .feedback-card-inner {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      padding: 20px;
      height: 100%;
      transition: all 0.3s ease;
    }

    /* Card hover effect */
    #feedback-{{ section.id }} .feedback-card-inner:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    }

    /* Hover effect on stars */
    #feedback-{{ section.id }} .feedback-card-inner:hover .stars {
      transform: scale(1.1);
      transition: 0.3s;
    }

    #feedback-{{ section.id }} .feedback-text {
      margin-bottom: 20px;
      font-size: 15px;
    }

    #feedback-{{ section.id }} .feedback-user {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
    }

    #feedback-{{ section.id }} .feedback-user img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
    }

    #feedback-{{ section.id }} .feedback-info h4 {
      margin: 0;
      font-size: 14px;
    }

    #feedback-{{ section.id }} .stars {
      font-size: 14px;
    }

    /* Navigation buttons below cards */
    #feedback-{{ section.id }} .feedback-nav {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 25px;
    }

    #feedback-{{ section.id }} .feedback-btn {
      background: #000;
      color: #fff;
      border: none;
      padding: 10px 16px;
      cursor: pointer;
      border-radius: 50px;
      transition: all 0.3s ease;
    }

    #feedback-{{ section.id }} .feedback-btn:hover {
      background: #333;
      transform: translateY(-2px);
    }

    /* Tablet */
    @media (max-width: 1024px) {
      #feedback-{{ section.id }} .feedback-card {
        min-width: 50%;
      }
    }

    /* Mobile */
    @media (max-width: 600px) {
      #feedback-{{ section.id }} .feedback-card {
        min-width: 100%;
      }
    }
  </style>

  <!-- JavaScript -->
  <script>
    (function() {
      const section = document.querySelector('#feedback-{{ section.id }}');
      if (!section) return;

      const slider = section.querySelector('.feedback-slider');
      const cards = section.querySelectorAll('.feedback-card');
      const next = section.querySelector('.feedback-btn.next');
      const prev = section.querySelector('.feedback-btn.prev');

      let index = 0;

      function getVisibleCards() {
        if (window.innerWidth <= 600) return 1;
        if (window.innerWidth <= 1024) return 2;
        return 4;
      }

      function updateSlider() {
        const cardWidth = cards[0].offsetWidth;
        slider.style.transform = 'translateX(-' + (index * cardWidth) + 'px)';
      }

      function getMaxIndex() {
        return cards.length - getVisibleCards();
      }

      next.addEventListener('click', function() {
        if (index < getMaxIndex()) {
          index++;
        } else {
          index = 0;
        }
        updateSlider();
      });

      prev.addEventListener('click', function() {
        if (index > 0) {
          index--;
        } else {
          index = getMaxIndex();
        }
        updateSlider();
      });

      window.addEventListener('resize', function() {
        index = 0;
        updateSlider();
      });
    })();
  </script>
</section>

{% schema %}
{
  "name": "Customer Feedback",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "What Our Customers Say"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#f9f9f9"
    },
    {
      "type": "image_picker",
      "id": "bg_image",
      "label": "Background Image"
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Text Alignment",
      "options": [
        { "value": "center", "label": "Center" },
        { "value": "left", "label": "Left" }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 60,
      "label": "Padding Top"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 60,
      "label": "Padding Bottom"
    }
  ],
  "blocks": [
    {
      "type": "feedback",
      "name": "Feedback Card",
      "settings": [
        {
          "type": "textarea",
          "id": "feedback_text",
          "label": "Feedback Text",
          "default": "Amazing product! Highly recommend."
        },
        {
          "type": "image_picker",
          "id": "customer_image",
          "label": "Customer Image"
        },
        {
          "type": "text",
          "id": "customer_name",
          "label": "Customer Name",
          "default": "John Doe"
        },
        {
          "type": "range",
          "id": "rating",
          "min": 1,
          "max": 5,
          "step": 1,
          "default": 5,
          "label": "Rating"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Customer Feedback"
    }
  ]
}
{% endschema %}

Step 5: Add the Section to Your Store

Now it’s time to use your section.

1. Go to Online Store → Customize
2. Open the page where you want to display testimonials
3. Click Add Section
4. Select Customer Feedback

Your section will now appear on the page.

Step 6: Add Customer Feedback Content

Inside the theme customizer:

• Click Add Block
• Enter the customer name
• Add their feedback
• Repeat to add multiple testimonials

You can rearrange blocks by dragging them.