Testimonial Slider

About this module

A Shopify testimonial carousel that rotates customer quotes with autoplay, prev/next arrows and dot indicators.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-testimonial-slider, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-testimonial-slider` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <section class="mh-ts" data-ts>
     {% if section.settings.heading != blank %}<h2 class="mh-ts-heading">{{ section.settings.heading }}</h2>{% endif %}
     <div class="mh-ts-viewport">
       <div class="mh-ts-track" data-track>
         {% for block in section.blocks %}
           <figure class="mh-ts-slide">
             <blockquote class="mh-ts-quote">“{{ block.settings.quote }}”</blockquote>
             <figcaption class="mh-ts-author">
               <span class="mh-ts-avatar">{{ block.settings.name | slice: 0 }}</span>
               <div><div class="mh-ts-name">{{ block.settings.name }}</div><div class="mh-ts-role">{{ block.settings.role }}</div></div>
             </figcaption>
           </figure>
         {% endfor %}
       </div>
     </div>
     {% if section.settings.show_dots %}
       <div class="mh-ts-dots" data-dots></div>
     {% endif %}
   </section>
   
   <script>
   (function(){
     var track=document.querySelector('[data-track]');
     var slides=track.querySelectorAll('.mh-ts-slide');
     var dots=document.querySelector('[data-dots]');
     var i=0,n=slides.length;
     function go(){track.style.transform='translateX(-'+(i*100)+'%)';}
     slides.forEach(function(_,idx){
       if(!dots)return;
       var d=document.createElement('button');d.className='mh-ts-dot'+(idx===0?' active':'');d.onclick=function(){i=idx;refresh();};
       dots.appendChild(d);
     });
     function refresh(){go();document.querySelectorAll('.mh-ts-dot').forEach(function(d,idx){d.classList.toggle('active',idx===i)});}
     {% if section.settings.autoplay %}
     setInterval(function(){i=(i+1)%n;refresh();},{{ section.settings.autoplay_speed }});
     {% endif %}
   })();
   </script>
   
   {% schema %}
   {
     "name": "MH Testimonial Slider",
     "tag": "section",
     "settings": [
       { "type": "text", "id": "heading", "label": "Heading", "default": "What our customers say" },
       { "type": "checkbox", "id": "autoplay", "label": "Autoplay", "default": true },
       { "type": "range", "id": "autoplay_speed", "label": "Autoplay speed (ms)", "min": 2000, "max": 8000, "step": 500, "default": 4000 },
       { "type": "checkbox", "id": "show_dots", "label": "Show dots", "default": true }
     ],
     "blocks": [
       { "type": "testimonial", "name": "Testimonial", "settings": [
         { "type": "textarea", "id": "quote", "label": "Quote" },
         { "type": "text", "id": "name", "label": "Name", "default": "Customer" },
         { "type": "text", "id": "role", "label": "Role", "default": "Verified buyer" }
       ] }
     ],
     "presets": [{ "name": "MH Testimonial Slider", "category": "ModuleHarbor", "blocks": [{ "type": "testimonial" }] }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.