Testimonials are a great way to gain the trust of new visitors. In the default Shopify site, you can add a testimonial section with a few simple customization options, including adding an image, heading, and content. But many Shopify store owners want to take testimonials beyond the default limits, and add features like star ratings, author names, and more.
So, to solve this problem, we’ve designed a highly customizable and animated testimonial section, which allows you to take the customer reviews to the next level. Unlike the standard Shopify grid-based layout, our section comes with smooth sliding animations that makes the testimonials visually appealing and engaging.
Key Features of the New Testimonial Section
- Animated Slide Layout – Testimonials no longer appear in a grid format, but slide up and down.
- Star Ratings – Rate each testimonial one to five stars.
- Name of Reviewer & Customizable Content – Enter the name of the reviewer and add detailed descriptions.
- Multiple Image Support – Add images in different sections of the testimonial
- Dynamic Testimonial Cards – Create multiple testimonial cards to feature multiple customer reviews.
Step-by-Step Guide to Adding the Custom Testimonial Section
Step 1: Accessing Your Shopify Store Code
- Log in to your Shopify admin panel.
- Navigate to Online Store > Themes.
- Before you do anything else, duplicate your current theme so you have a backup.
- Click on the three dots next to your theme and select Edit Code.
Step 2: Creating a New Section
- In the code editor, locate the Sections folder.
- Click Add new section and name it something like GRT Testimonial.
- To get rid of that default code that appears, just replace it with the custom code that I have provided.
HTML Code
<div class="slide-section-bg grt-{{ section.id }}">
<div class="section-heading ">
<div class="maincon">
<h2>{{ section.settings.heading }}</h2>
<p>{{ section.settings.description }}</p>
</div>
</div>
<div class="{{ section.id }} featured-collection" style="padding-top: {{ section.settings.top_padding }}px; padding-bottom: {{ section.settings.bottom_padding }}px;">
<div class="products-wrapper page-width scroll-container">
<div class=" marquee-container scroll-content ">
<!-- Line 1 -->
<div class=" line line-1 review-column">
{% for block in section.blocks %}
{% if block.settings.line1_heartimage != blank
or block.settings.line1_image != blank
or block.settings.line1_description != blank
or block.settings.line1_heading != blank
or block.settings.line1_comma != blank
or block.settings.line1_star_rating != blank
or block.settings.line1_author != blank %}
<div class="product-card review-list {% if block.settings.line5_description != blank %} has-description{% endif %}">
{% if block.settings.line1_heartimage %}
<img src="{{ block.settings.line1_heartimage | img_url: 'master' }}" alt="{{ block.settings.line1_heading }}">
{% endif %}
{% if block.settings.line1_image %}
<img src="{{ block.settings.line1_image | img_url: 'master' }}" loading="lazy" alt="{{ block.settings.line1_heading }}">
{% endif %}
{% if block.settings.line1_description != '' %}
<div class="product-info">
{% if block.settings.line1_heading %}
<p class="head">{{ block.settings.line1_heading }}</p>
{% endif %}
{% if block.settings.line1_comma %}
<div class="comm">
<img class="comma" src="{{ block.settings.line1_comma | img_url: 'master' }}" loading="lazy" alt="{{ block.settings.line1_heading }}">
</div>
{% endif %}
{% if block.settings.line1_description %}
<div class="dsec">{{ block.settings.line1_description }}</div>
<!-- Star Rating -->
<div class="star-rating">
{% if block.settings.line1_star_rating %}
{% for i in (1..5) %}
<span>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="{% if i <= block.settings.line1_star_rating %}#8dc321{% else %}#D3D3D3{% endif %}">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
</svg>
</span>
{% endfor %}
{% endif %}
</div>
<p class="author">{{ block.settings.line1_author }}</p>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
<!-- Line 2 -->
<div class="line line-2 review-column ">
{% for block in section.blocks %}
{% if block.settings.line2_heartimage != blank
or block.settings.line2_image != blank
or block.settings.line2_description != blank
or block.settings.line2_heading != blank
or block.settings.line2_comma != blank
or block.settings.line2_star_rating != blank
or block.settings.line2_author != blank %}
<div class="product-card review-list {% if block.settings.line5_description != blank %} has-description{% endif %}">
{% if block.settings.line2_heartimage %}
<img src="{{ block.settings.line2_heartimage | img_url: 'master' }}" alt="{{ block.settings.line2_heading }}">
{% endif %}
{% if block.settings.line2_image %}
<img src="{{ block.settings.line2_image | img_url: 'master' }}" alt="{{ block.settings.line2_heading }}">
{% endif %}
{% if block.settings.line2_description != '' %}
<div class="product-info">
{% if block.settings.line2_heading %}
<p class="head">{{ block.settings.line2_heading }}</p>
{% endif %}
{% if block.settings.line2_comma %}
<div class="comm">
<img class="comma" src="{{ block.settings.line2_comma | img_url: 'master' }}" alt="{{ block.settings.line2_heading }}">
</div>
{% endif %}
{% if block.settings.line2_description %}
<div class="dsec">{{ block.settings.line2_description }}</div>
<!-- Star Rating -->
<div class="star-rating">
{% if block.settings.line2_star_rating %}
{% for i in (1..5) %}
<span>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="{% if i <= block.settings.line2_star_rating %}#8dc321{% else %}#D3D3D3{% endif %}">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
</svg>
</span>
{% endfor %}
{% endif %}
</div>
<p class="author">{{ block.settings.line2_author }}</p>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
<!-- Line 3 -->
<div class="line line-3 review-column ">
{% for block in section.blocks %}
{% if block.settings.line3_heartimage != blank
or block.settings.line3_image != blank
or block.settings.line3_description != blank
or block.settings.line3_heading != blank
or block.settings.line3_comma != blank
or block.settings.line3_star_rating != blank
or block.settings.line3_author != blank %}
<div class="product-card review-list {% if block.settings.line5_description != blank %} has-description{% endif %}">
{% if block.settings.line3_heartimage %}
<img src="{{ block.settings.line3_heartimage | img_url: 'master' }}" alt="{{ block.settings.line3_heading }}">
{% endif %}
{% if block.settings.line3_image %}
<img src="{{ block.settings.line3_image | img_url: 'master' }}" alt="{{ block.settings.line3_heading }}">
{% endif %}
{% if block.settings.line3_description != '' %}
<div class="product-info">
{% if block.settings.line3_heading %}
<p class="head">{{ block.settings.line3_heading }}</p>
{% endif %}
{% if block.settings.line3_comma %}
<div class="comm">
<img class="comma" src="{{ block.settings.line3_comma | img_url: 'master' }}" alt="{{ block.settings.line3_heading }}">
</div>
{% endif %}
{% if block.settings.line3_description %}
<div class="dsec">{{ block.settings.line3_description }}</div>
<!-- Star Rating -->
<div class="star-rating">
{% if block.settings.line3_star_rating %}
{% for i in (1..5) %}
<span>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="{% if i <= block.settings.line3_star_rating %}#8dc321{% else %}#D3D3D3{% endif %}">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
</svg>
</span>
{% endfor %}
{% endif %}
</div>
<p class="author">{{ block.settings.line3_author }}</p>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
<!-- Line 4 -->
<div class="line line-4 review-column ">
{% for block in section.blocks %}
{% if block.settings.line4_heartimage != blank
or block.settings.line4_image != blank
or block.settings.line4_description != blank
or block.settings.line4_heading != blank
or block.settings.line4_comma != blank
or block.settings.line4_star_rating != blank
or block.settings.line4_author != blank %}
<div class="product-card review-list {% if block.settings.line5_description != blank %} has-description{% endif %}">
{% if block.settings.line4_heartimage %}
<img src="{{ block.settings.line4_heartimage | img_url: 'master' }}" alt="{{ block.settings.line4_heading }}">
{% endif %}
{% if block.settings.line4_image %}
<img src="{{ block.settings.line4_image | img_url: 'master' }}" alt="{{ block.settings.line4_heading }}">
{% endif %}
{% if block.settings.line4_description != '' %}
<div class="product-info">
{% if block.settings.line4_heading %}
<p class="head">{{ block.settings.line4_heading }}</p>
{% endif %}
{% if block.settings.line4_comma %}
<div class="comm">
<img class="comma" src="{{ block.settings.line4_comma | img_url: 'master' }}" alt="{{ block.settings.line4_heading }}">
</div>
{% endif %}
{% if block.settings.line4_description %}
<div class="dsec">{{ block.settings.line4_description }}</div>
<!-- Star Rating -->
<div class="star-rating">
{% if block.settings.line4_star_rating %}
{% for i in (1..5) %}
<span>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="{% if i <= block.settings.line4_star_rating %}#8dc321{% else %}#D3D3D3{% endif %}">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
</svg>
</span>
{% endfor %}
{% endif %}
</div>
<p class="author">{{ block.settings.line4_author }}</p>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
<!-- Line 5 -->
<div class="line line-5 review-column ">
{% for block in section.blocks %}
{% if block.settings.line5_heartimage != blank
or block.settings.line5_image != blank
or block.settings.line5_description != blank
or block.settings.line5_heading != blank
or block.settings.line5_comma != blank
or block.settings.line5_star_rating != blank
or block.settings.line5_author != blank %}
<div class="product-card review-list {% if block.settings.line5_description != blank %} has-description{% endif %}">
{% if block.settings.line5_heartimage %}
<img src="{{ block.settings.line5_heartimage | img_url: 'master' }}" alt="{{ block.settings.line5_heading }}">
{% endif %}
{% if block.settings.line5_image %}
<img src="{{ block.settings.line5_image | img_url: 'master' }}" alt="{{ block.settings.line5_heading }}">
{% endif %}
{% if block.settings.line5_description != '' %}
<div class="product-info">
{% if block.settings.line5_heading %}
<p class="head" style="background:white; height: 20px;" >{{ block.settings.line5_heading }}</p>
{% endif %}
{% if block.settings.line5_comma %}
<div class="comm">
<img src="{{ block.settings.line5_comma | img_url: 'master' }}" alt="{{ block.settings.line5_heading }}">
</div>
{% endif %}
{% if block.settings.line5_description %}
<div class="dsec">{{ block.settings.line5_description }}</div>
<!-- Star Rating -->
<div class="star-rating">
{% if block.settings.line5_star_rating %}
{% for i in (1..5) %}
<span>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="{% if i <= block.settings.line5_star_rating %}#8dc321{% else %}#D3D3D3{% endif %}">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
</svg>
</span>
{% endfor %}
{% endif %}
</div>
<p class="author">{{ block.settings.line5_author }}</p>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
CSS Code
<style>
.grt-{{ section.id }}{background:#EFEFEF;}
.{{ section.id }} .product-card.has-description { height:313px;}
/* .{{ section.id }}.featured-collection {position: relative;background-size: cover; background-position: center;padding: 50px 0;overflow: hidden;height: 966px;} */
.{{ section.id }}.featured-collection {position: relative;background-size: cover; background-position: center;padding: 50px 0;overflow: hidden;}
.{{ section.id }} .products-wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.{{ section.id }} .product-card {margin-bottom:24px; border-radius: 10px; overflow: hidden; text-align: center; width: 238px; }
.{{ section.id }} .product-card img { width: 100%; margin-bottom: 10px; border-radius: 15px;}
.{{ section.id }} .product-info { font-size: 14px; background: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); min-height: 385px; }
.section-heading { text-align: center; height:173px; }
.{{section.id}} .comm {width: 20px; left: 44%; position: relative; height: 15px;}
{% if section.settings.background_image %}.product-info{display:block;} {% else %}.product-info{display:none;} {% endif %}
.{{ section.id }} .head {height: 63px; background: #8dc321; top: -17px; font-size:16px!important; position: relative; display: flex; justify-content: center; align-items: center; color: white;}
.{{ section.id }} .dsec {display: flex; align-items: center; margin: 16px;min-height: 100px; flex-grow: 1; line-height: auto; line-height: normal;}
.{{ section.id }} .product-card .author {align-self: flex-end; font-size:12px!important; color: #838383;}
.{{ section.id }} .svg {margin-top: 9px;}
/* Mobile Styles */
@media (max-width: 768px) {
.{{ section.id }} .marquee-container { display: grid; grid-template-columns: repeat(4, 1fr);margin:0px;}
.{{section.id}} .comm { width: 8px; left: 44%; position: relative; height: 6px;}
.{{ section.id }} .line.line-5 { display: none;}
.{{ section.id }} .marquee-container { gap: 10px;}
.{{ section.id }} .line { display: block;}
.{{ section.id }} .line-1, .line-2, .line-3, .line-4 { display: block; }
/* .{{ section.id }} .product-card { width: 92px; height: 121px;} */
.{{ section.id }} .product-card.has-description { height:121px;}
.{{ section.id }} .product-card { width: 92px; margin:1px; }
.{{ section.id }}.featured-collection {margin-bottom: 24px; padding: 0px 0; height: 439px; width: 100%;}
.{{ section.id }} .product-info .head {font-size: 5px !important;height: 35px; align-items: self-end; top: -18px; }
.{{ section.id }} .product-info{min-height:200px;}
.{{ section.id }} .dsec { display: flex; align-items: center; margin: 3px; position: relative; bottom: 42px; min-height: 111px; padding: 22px 5px; font-size: 5px !important; }
.{{ section.id }} .dsec p { display: flex; align-items: center; margin-bottom: -2px; padding: 22px 5px; font-size: 5px !important; }
.{{ section.id }} .product-info .author { font-size: 6px!important; margin: -65px 1px; }
.maincon {position: relative;}
.section-heading { height:236px; }
.maincon h2 {margin:0px 37px;}
.maincon p { margin: 20px 14px;}
.{{ section.id }} .star-rating { position: relative; bottom: 94px; height: 0;}
.{{ section.id }} .svg { width: 9px; margin-top: 9px;}
.{{ section.id }} .products-wrapper { margin: 0px 20px;}
}
.{{ section.id }} .slick-list.draggable { height: 788px !important;}
@media (min-width: 768px) {
.{{ section.id }} .marquee-container {margin:22px; display: grid; grid-template-columns: repeat(5, 1fr); flex-wrap: wrap; gap: 28px; justify-content: center; width: 100%; }
.{{section.id}} .slide-section-bg{background-image: url({{ section.settings.background_image | image_url }});}
.star-rating {margin-top: -13px;}
.maincon {position: relative; bottom: -38px;}
}
</style>
JS Code
<script>
$(document).ready(function(){
let speed = {{ section.settings.marquee_speed }} * 1000;
$('.line-1, .line-2, .line-3, .line-4, .line-5').slick({
vertical: true,
verticalSwiping: true,
autoplay: true,
autoplaySpeed: 0,
speed: speed,
cssEase: 'linear',
infinite: true,
arrows: false,
dots: false,
pauseOnHover: false,
pauseOnFocus: false,
});
});
</script>
Liquid Code
{% schema %}
{
"name": "grt-slide-testimonial",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Section Heading"
},
{
"type": "richtext",
"id": "description",
"label": "Section Description"
},
{
"type": "range",
"id": "top_padding",
"label": "Top Padding",
"min": 0,
"max": 100,
"default": 50,
"unit": "px"
},
{
"type": "range",
"id": "bottom_padding",
"label": "Bottom Padding",
"min": 0,
"max": 100,
"default": 50,
"unit": "px"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background Image line1"
},
{
"type": "range",
"id": "marquee_speed",
"label": "Slide Speed",
"info": "control slide content speed",
"min": 1,
"max": 10,
"step": 0.1,
"default": 5
}
],
"blocks": [
{
"type": "testomonail",
"name":"testomonial",
"settings": [
{
"type": "text",
"id": "line1_heading",
"label": "Line 1 Heading"
},
{
"type": "number",
"id": "line1_star_rating",
"label": "Line 1 Star Rating",
},
{
"type": "richtext",
"id": "line1_description",
"label": "Line 1 Description"
},
{
"type": "text",
"id": "line1_author",
"label": "Line 1 author"
},
{
"type": "image_picker",
"id": "line1_image",
"label": "Line 1 Image"
},
{
"type": "image_picker",
"id": "line1_heartimage",
"label": "Line 1 heart Image"
},
{
"type": "image_picker",
"id": "line1_comma",
"label": "Line 1 Comma"
},
{
"type": "text",
"id": "line2_heading",
"label": "Line 2 Heading"
},
{
"type": "inline_richtext",
"id": "line2_description",
"label": "Line 2 Description"
},
{
"type": "text",
"id": "line2_author",
"label": "Line 2 author"
},
{
"type": "number",
"id": "line2_star_rating",
"label": "Line 2 Star Rating",
},
{
"type": "image_picker",
"id": "line2_image",
"label": "Line 2 Image"
},
{
"type": "image_picker",
"id": "line2_heartimage",
"label": "Line 2 heart Image"
},
{
"type": "image_picker",
"id": "line2_comma",
"label": "Line 2 Comma"
},
{
"type": "text",
"id": "line3_heading",
"label": "Line 3 Heading"
},
{
"type": "inline_richtext",
"id": "line3_description",
"label": "Line 3 Description"
},
{
"type": "text",
"id": "line3_author",
"label": "Line 3 author"
},
{
"type": "number",
"id": "line3_star_rating",
"label": "Line 3 Star Rating",
},
{
"type": "image_picker",
"id": "line3_image",
"label": "Line 3 Image"
},
{
"type": "image_picker",
"id": "line3_heartimage",
"label": "Line 3 heart Image"
},
{
"type": "image_picker",
"id": "line3_comma",
"label": "Line 3 Comma"
},
{
"type": "text",
"id": "line4_heading",
"label": "Line 4 Heading"
},
{
"type": "number",
"id": "line4_star_rating",
"label": "Line 4 Star Rating",
},
{
"type": "inline_richtext",
"id": "line4_description",
"label": "Line 4 Description"
},
{
"type": "text",
"id": "line4_author",
"label": "Line 4 author"
},
{
"type": "image_picker",
"id": "line4_image",
"label": "Line 4 Image"
},
{
"type": "image_picker",
"id": "line4_heartimage",
"label": "Line 4 heart Image"
},
{
"type": "image_picker",
"id": "line4_comma",
"label": "Line 4 Comma"
},
{
"type": "text",
"id": "line5_heading",
"label": "Line 5 Heading"
},
{
"type": "number",
"id": "line5_star_rating",
"label": "Line 5 Star Rating",
},
{
"type": "inline_richtext",
"id": "line5_description",
"label": "Line 5 Description"
},
{
"type": "text",
"id": "line5_author",
"label": "Line 5 author"
},
{
"type": "image_picker",
"id": "line5_image",
"label": "Line 5 Image"
},
{
"type": "image_picker",
"id": "line5_heartimage",
"label": "Line 5 heart Image"
},
{
"type": "image_picker",
"id": "line5_comma",
"label": "Line 5 Comma"
},
]
}
] ,
"presets": [
{
"name": "grt home slide testomonial",
}
]
}
{% endschema %}
- Save the file.
Step 3: Adding the Testimonial Section to Your Theme
- Go back to the Shopify admin panel.
- Click on Customize Theme.
- Locate the newly created section (e.g., GRT Home Slide Testimonial).
- Add the section to your desired page.
- Customize settings such as heading, description, padding, and background image.
- Save the changes.
Step 4: Configuring Testimonials
- Click on Add Testimonial to start adding reviews.
- Each testimonial consists of five configurable lines:
- Add a heading, description, and author name etc according to your choices in all lines (line 1 to line 5)
- Save and preview your changes.
Step 5: Adding Multiple Testimonial Cards
- To add more testimonials, add more blocks to the testimonials section.
- Enter content for each block as needed.
- Save and preview your updates.
Animated Testimonial Section With this awesome testimonial section, your Shopify store will show customer reviews in a way that’s really eye-catching and interactive. Unlike standard testimonial cards, your reviews will slide in smoothly giving visitors a professional and interactive experience.
Note - Ensure that JQuery & Sliq Library must be installed on your theme
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
