Shopify Testimonials Section

About this module

A testimonials section where merchants add quote blocks with customer names and star ratings.

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-testimonials, 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-testimonials` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <section class="mh-testimonials">
     {% if section.settings.heading != blank %}
       <h2 class="mh-testimonials-title">{{ section.settings.heading }}</h2>
     {% endif %}
     <div class="mh-testimonials-grid">
       {% for block in section.blocks %}
         <figure class="mh-testimonial" {{ block.shopify_attributes }}>
           <div class="mh-testimonial-stars">{% for i in (1..block.settings.rating) %}★{% endfor %}</div>
           <blockquote class="mh-testimonial-quote">{{ block.settings.quote }}</blockquote>
           <figcaption>
             <b>{{ block.settings.author }}</b>
             {% if block.settings.role != blank %}<span>{{ block.settings.role }}</span>{% endif %}
           </figcaption>
         </figure>
       {% endfor %}
     </div>
   </section>
   
   {% schema %}
   {
     "name": "MH Testimonials",
     "tag": "section",
     "settings": [
       { "type": "text", "id": "heading", "label": "Heading", "default": "What customers say" }
     ],
     "max_blocks": 12,
     "blocks": [
       {
         "type": "quote",
         "name": "Testimonial",
         "settings": [
           { "type": "range", "id": "rating", "label": "Rating", "min": 1, "max": 5, "step": 1, "default": 5 },
           { "type": "textarea", "id": "quote", "label": "Quote", "default": "Great quality and fast shipping!" },
           { "type": "text", "id": "author", "label": "Author", "default": "Customer name" },
           { "type": "text", "id": "role", "label": "Role" }
         ]
       }
     ],
     "presets": [{ "name": "MH Testimonials", "category": "ModuleHarbor", "blocks": [
       { "type": "quote" }, { "type": "quote" }, { "type": "quote" }
     ] }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.