Create a new section named simple-testimonial.liquid using the following code:
Customer testimonials are one of the most powerful ways to build trust and boost conversions on your Shopify store. But many store owners avoid adding them because they think it requires complex coding or paid apps.
In this step-by-step guide, I’ll show you how to add a fully customizable testimonial section to your Shopify store—without any apps or coding knowledge!
Why Add a Testimonial Section?
✅ Builds trust with potential customers
✅ Improves conversion rates by showcasing social proof
✅ Customizable to match your store’s branding
✅ Mobile-friendly and works on all Shopify themes
Step-by-Step Guide to Adding a Testimonial Section
Step 1: Access Your Shopify Theme Code
- Go to your Shopify Admin Dashboard.
- Navigate to Online Store > Themes.
- Click “Actions” > “Edit code” (on your current theme).
Step 2: Create a New Section
- Inside the “Sections” folder, click “Add a new section.”
- Name it
simple-testimonial.liquid(or any relevant name). - Paste the testimonial section code (available in the description of my YouTube tutorial).
- Click “Save.”
Step 3: Add the Testimonial Section to Your Homepage
- Go back to your Shopify admin and click “Customize” on your theme.
- In the theme editor, click “Add section.”
- Look for “Simple Testimonial” and select it.
Step 4: Customize Your Testimonial Section
Now, you can easily customize:
- Background & text colors
- Star ratings
- Customer names, titles, and images
- Testimonial content
Simply click on the section in the editor and adjust the settings.
Step 5: Add Testimonials
- Click “Add review” to insert a new testimonial.
- Upload a customer photo (or use a placeholder).
- Enter the customer name, title, and review text.
- Adjust the star rating (1-5 stars).
Step 6: Save & Publish
Once you’re happy with how it looks:
- Click “Save” in the theme editor.
- Check how it appears on desktop and mobile.
Final Thoughts
Adding a testimonial section to your Shopify store is simple, free, and highly effective for increasing sales. Since you don’t need any apps or coding, you can set it up in just a few minutes!
<!-- sections/custom-reviews.liquid -->
{% style %}
#shopify-section-{{ section.id }} {
--bg-color: {{ section.settings.background_color }};
--text-color: {{ section.settings.text_color }};
--star-color: {{ section.settings.star_color }};
--name-color: {{ section.settings.name_color }};
--title-color: {{ section.settings.title_color }};
--arrow-color: {{ section.settings.arrow_color }};
padding: 4rem 0;
background: var(--bg-color);
position: relative;
}
.custom-reviews-container {
max-width: 1200px;
margin: 0 auto;
color: var(--text-color);
position: relative;
}
.review-card {
scroll-snap-align: start;
flex: 0 0 calc(33.33% - 14px);
padding: 20px;
box-sizing: border-box;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.reviews-wrapper {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 20px;
padding: 20px 0;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
.reviews-wrapper::-webkit-scrollbar {
display: none;
}
.review-stars {
color: var(--star-color);
margin-bottom: 10px;
font-size: 20px;
}
.review-client {
display: flex;
align-items: center;
gap: 15px;
margin-top: 20px;
}
.client-image {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.nav-arrows {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.arrow-btn {
pointer-events: all;
background: var(--arrow-color);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s;
border: none;
}
.arrow-btn:hover {
transform: scale(1.1);
}
.arrow-btn svg {
width: 24px;
height: 24px;
fill: white;
}
@media (max-width: 768px) {
.review-card {
flex: 0 0 calc(100% - 20px);
}
.arrow-btn {
width: 30px;
height: 30px;
}
}
@media (max-width: 768px) {
.review-card {
flex: 0 0 calc(100% - 20px);
padding-left: 37px;
}
}
{% endstyle %}
<div class="custom-reviews-container">
<div class="nav-arrows">
<button class="arrow-btn prev-arrow">
<svg viewBox="0 0 24 24">
<path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>
</svg>
</button>
<button class="arrow-btn next-arrow">
<svg viewBox="0 0 24 24">
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
</svg>
</button>
</div>
<div class="reviews-wrapper">
{% for block in section.blocks %}
<div class="review-card" {{ block.shopify_attributes }}>
<div class="review-stars">
{% for i in (1..block.settings.rating) %}
★
{% endfor %}
</div>
<p class="review-text">{{ block.settings.review_text }}</p>
<div class="review-client">
{% if block.settings.client_image != blank %}
<img
src="{{ block.settings.client_image | img_url: '150x150' }}"
alt="{{ block.settings.client_name }}"
class="client-image"
loading="lazy"
height="60"
width="60"
>
{% endif %}
<div>
<h4 style="color: var(--name-color); margin: 0;">{{ block.settings.client_name }}</h4>
<p style="color: var(--title-color); margin: 0;">{{ block.settings.client_title }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const wrapper = document.querySelector('.reviews-wrapper');
const prevArrow = document.querySelector('.prev-arrow');
const nextArrow = document.querySelector('.next-arrow');
// Arrow navigation
const scrollAmount = () => {
const card = wrapper.querySelector('.review-card');
return card ? card.offsetWidth + 20 : 400;
};
nextArrow.addEventListener('click', () => {
wrapper.scrollBy({
left: scrollAmount(),
behavior: 'smooth'
});
});
prevArrow.addEventListener('click', () => {
wrapper.scrollBy({
left: -scrollAmount(),
behavior: 'smooth'
});
});
// Hide arrows on scroll extremes
const checkArrows = () => {
prevArrow.style.visibility = wrapper.scrollLeft > 0 ? 'visible' : 'hidden';
nextArrow.style.visibility = wrapper.scrollLeft + wrapper.offsetWidth < wrapper.scrollWidth ? 'visible' : 'hidden';
};
wrapper.addEventListener('scroll', checkArrows);
checkArrows();
// Drag scroll (existing functionality)
let isDown = false;
let startX;
let scrollLeft;
wrapper.addEventListener('mousedown', (e) => {
isDown = true;
startX = e.pageX - wrapper.offsetLeft;
scrollLeft = wrapper.scrollLeft;
});
wrapper.addEventListener('mouseleave', () => {
isDown = false;
});
wrapper.addEventListener('mouseup', () => {
isDown = false;
});
wrapper.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - wrapper.offsetLeft;
const walk = (x - startX) * 2;
wrapper.scrollLeft = scrollLeft - walk;
});
});
</script>
{% schema %}
{
"name": "Simple Testimonial",
"max_blocks": 15,
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "star_color",
"label": "Stars Color",
"default": "#FFD700"
},
{
"type": "color",
"id": "name_color",
"label": "Client Name Color",
"default": "#333333"
},
{
"type": "color",
"id": "title_color",
"label": "Client Title Color",
"default": "#666666"
},
{
"type": "color",
"id": "arrow_color",
"label": "Arrows Color",
"default": "#000000"
}
],
"blocks": [
{
"type": "review",
"name": "Review",
"settings": [
{
"type": "range",
"id": "rating",
"label": "Star Rating",
"min": 1,
"max": 5,
"step": 1,
"default": 5
},
{
"type": "textarea",
"id": "review_text",
"label": "Review Text",
"default": "Excellent product quality and service!"
},
{
"type": "text",
"id": "client_name",
"label": "Client Name",
"default": "John Doe"
},
{
"type": "text",
"id": "client_title",
"label": "Client Title",
"default": "Fashion Blogger"
},
{
"type": "image_picker",
"id": "client_image",
"label": "Client Image"
}
]
}
],
"presets": [
{
"name": "Simple Testimonial",
"category": "Custom Sections"
}
]
}
{% endschema %}
