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 file123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109<!--- 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.
Amazing thank you – is there any way to put 3 testimonials in the one horizontal bar though?
For example, each testimonial comes in one long horizontal grey bar/banner. Could you please provide the code to maybe have all in that one bar, with 3 columns in it? It would just fit much better and save a lot of space – would be greatly appreciated, but if it’s not something that’s possible no problem. Thanks in advance if you can
Is there any way to make the background of the testimonials black? they are currently grey however the background of my whole store is black.
Yes, there is. In line 17, you can change “background-color: #eee;” to “background-color: #000;”
Thank you very much for your help, much appreciated!!
Hi! Is there a way to decrease the gap between the testimonial – author , and also between the different testminonials?
Thank you!
Is there a way to change the border size?
yes why not, just edit the 16th line
Is there a way to put a border?