How To Add Testimonials Section To Homepage In Shopify

Testimonials and reviews are a great way to add social proof to your store and help build trust among your customers.

In this article, I’ll be guiding you how to add testimonials to homepage on your Shopify store for free manually.

Please follow the steps below:

• From your Shopify admin, go to Online Store > Themes.
• Find the theme you want to edit, and then click Actions > Edit code.
• Under Section, click on Add a new section to create new section as name testimonials.liquid
• Copy and paste the code below into this file
  
  <!--- Coded by HuynhMaiAnhKiet.Com - HuraTips.Com ---> <section data-section-id="{{ section.id }}" data-section-type="testimonials"> <h2>{{ section.settings.title }}</h2> {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%} <div class="huratips-testimonial-container"> <img src="{%- if block.settings.avatar == blank -%}//cdn.shopify.com/s/files/1/0382/4185/files/male.png?v=1613363122{%-else-%}{{ block.settings.avatar | img_url: '512x512' }}{%-endif-%}" alt="Avatar" style="width:90px"> {%- if block.settings.author != blank -%}<p><span>{{ block.settings.author }}</span> {{ block.settings.position }}</p>{%- endif -%} {%- if block.settings.quote != blank -%}<p>{{ block.settings.quote }}</p>{%- endif -%} </div> {%- endfor -%} {%- endif -%} </section> <style> .huratips-testimonial-container { border: 2px solid #ccc; background-color: #eee; border-radius: 5px; padding: 16px; margin: 16px 0; } .huratips-testimonial-container::after { content: ""; clear: both; display: table; } .huratips-testimonial-container img { float: left; margin-right: 20px; border-radius: 50%; } .huratips-testimonial-container span { font-size: 20px; margin-right: 15px; } @media (max-width: 500px) { .huratips-testimonial-container { text-align: center; } .huratips-testimonial-container img { margin: auto; float: none; display: block; } } </style> {% schema %} { "name": "Testimonials", "class": "index-section", "max_blocks": 25, "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Testimonials" } ], "blocks": [ { "type": "quote", "name": "Testimonial", "settings": [ { "type": "richtext", "id": "quote", "label": "Text", "default": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>" }, { "type": "text", "id": "author", "label": "Author", "default": "Author’s name" }, { "type": "text", "id": "position", "label": "Position" }, { "type": "image_picker", "id": "avatar", "label": "Avatar" } ] } ], "presets": [ { "name": "Testimonials", "category": "Text", "blocks": [ { "type": "quote" }, { "type": "quote" }, { "type": "quote" } ] } ] } {% endschema %}

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109

  <!--- Coded by HuynhMaiAnhKiet.Com - HuraTips.Com ---> <section data-section-id="{{ section.id }}" data-section-type="testimonials">   <h2>{{ section.settings.title }}</h2>   {%- if section.blocks.size > 0 -%}   {%- for block in section.blocks -%}   <div class="huratips-testimonial-container">     <img src="{%- if block.settings.avatar == blank -%}//cdn.shopify.com/s/files/1/0382/4185/files/male.png?v=1613363122{%-else-%}{{ block.settings.avatar | img_url: '512x512' }}{%-endif-%}" alt="Avatar" style="width:90px">     {%- if block.settings.author != blank -%}<p><span>{{ block.settings.author }}</span> {{ block.settings.position }}</p>{%- endif -%}     {%- if block.settings.quote != blank -%}<p>{{ block.settings.quote }}</p>{%- endif -%}   </div>       {%- endfor -%}   {%- endif -%} </section> <style>   .huratips-testimonial-container {     border: 2px solid #ccc;     background-color: #eee;     border-radius: 5px;     padding: 16px;     margin: 16px 0;   }   .huratips-testimonial-container::after {     content: "";     clear: both;     display: table;   }   .huratips-testimonial-container img {     float: left;     margin-right: 20px;     border-radius: 50%;   }   .huratips-testimonial-container span {     font-size: 20px;     margin-right: 15px;   }     @media (max-width: 500px) {     .huratips-testimonial-container {       text-align: center;     }     .huratips-testimonial-container img {       margin: auto;       float: none;       display: block;     }   } </style> {% schema %} {   "name": "Testimonials",   "class": "index-section",   "max_blocks": 25,   "settings": [     {       "type": "text",       "id": "title",       "label": "Heading",       "default": "Testimonials"     }   ],   "blocks": [     {       "type": "quote",       "name": "Testimonial",       "settings": [         {           "type": "richtext",           "id": "quote",           "label": "Text",           "default": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"         },         {           "type": "text",           "id": "author",           "label": "Author",           "default": "Author’s name"         },         {           "type": "text",           "id": "position",           "label": "Position"         },         {           "type": "image_picker",           "id": "avatar",           "label": "Avatar"         }       ]     }   ],   "presets": [     {       "name": "Testimonials",       "category": "Text",       "blocks": [         {           "type": "quote"         },         {           "type": "quote"         },         {           "type": "quote"         }       ]     }   ] } {% endschema %}

• Click Save and you are done.

To add the Testimonial section on homepage, you must go to Customize theme. Navigate to the theme editor and select Add section. Within the Text category there will be an option for Testimonials. A maximum of 25 image blocks with links can be added.

Happing coding.