How to Add Testimonial slider in Shopify?

Testimonial is a formal statement provided by customers that describe how valuable their products and services are helped them. Testimonials are one of the most important tools in a website and it is a great way to add social proof to your store and help build trust among your customers. Testimonials are different from reviews because reviews are generally unguided and are written directly by the customer and it can be good or bad, but testimonials are always positive.

In this article, I will help you how to add testimonials to your Shopify store. Please follow the below steps respectively:

1. From your Shopify admin, go to Online Store > Themes.

2. Select the theme which you want to edit and click Actions > Edit code.

3. Create a new file within the sections folder of your theme as name testimonials.liquid and paste the below code into file.

<div class="page-width" data-section-id="{{ section.id }}" data-section-type="quotes">
  {% if section.settings.title != blank %}
  <div class="section-header text-center">
    <h2>{{ section.settings.title | escape }}</h2>
  </div>
  {% endif %}

  {% if section.blocks.size > 0 %}
  <div class="quotes-wrapper" data-slider>
    <div class="quotes-slider-wrapper" data-slider-container>
      <div class="quotes-slider" id="Quotes-{{ section.id }}" data-count="{{ section.blocks.size }}" data-slider-track>
        {% for block in section.blocks %}
        <div id="slickSlide{{ block.id }}"
             class="quotes-slide quotes-slide--{{ block.id }}{% if section.blocks.size == 1 %} quotes-slide--single{% endif %}"
             aria-labelledby="slickDot{{ block.id }}"
             {{ block.shopify_attributes }}
             data-slider-slide-index="{{ forloop.index0 }}"
             data-slider-item>

          <blockquote class="quotes-slider__text text-center">
            <span class="quote-icon">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-quote" viewBox="0 0 41 35"><path d="M10.208 17.711h6.124v16.332H0V21.684C0 8.184 5.444.956 16.332 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766zm24.498 0h6.124v16.332H24.498V21.684C24.498 8.184 29.942.956 40.83 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766z" fill="#000" fill-rule="evenodd"/></svg>
            </span>

            {% if block.settings.quote != blank %}
            <img src="{%- if block.settings.avatar == blank -%}//cdn.shopify.com/s/files/1/0382/4185/files/male.png{%-else-%}{{ block.settings.avatar | img_url: '512x512' }}{%-endif-%}" alt="Avatar" style="width:90px; border-radius:50px;">
            <div class="rte-setting rte">{{ block.settings.quote }}</div>
            {% endif %}
            {% if block.settings.author != blank %}
            <cite>{{ block.settings.author | escape }}</cite>
            {% endif %}
          </blockquote>
        </div>
        {% endfor %}
      </div>
    </div>

  </div>
  {% endif %}
</div>

{% schema %}
{
  "name": {    
    "en": "Testimonials"
  },
  "class": "index-section",
  "max_blocks": 9,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": {       
        "en": "Heading"
      },
      "default": {        
        "en": "Testimonials"
      }
    }
  ],
  "blocks": [
    {
      "type": "quote",
      "name": {       
        "en": "Testimonial"
      },
      "settings": [
        {
          "type": "richtext",
          "id": "quote",
          "label": {            
            "en": "Text"
          },
          "default": {           
            "en": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"            
          }
        },
        {
          "type": "text",
          "id": "author",
          "label": {            
            "en": "Author"
          },
          "default": {            
            "en": "Author's name"
          }
        },
        {
          "type": "image_picker",
          "id": "avatar",
          "label": "Avatar"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "en": "Testimonials"
      },
      "category": {
        "en": "Text"
      },
      "blocks": [
        {
          "type": "quote"
        },
        {
          "type": "quote"
        },
        {
          "type": "quote"
        }
      ]
    }
  ]
}
{% endschema %}

4. Save your file and go to Customize theme and refresh it. How to Add Testimonial slider in Shopify?.

How to Add Testimonial slider in Shopify?expoundsofttechsolution How to Add Testimonial slider in Shopify?.