Custom Review Slider Shopify Section
Enhance Social Proof with a Fully Responsive Review Slider on Shopify Customer reviews are a powerful tool to build trust and credibility for your Shopify store. Our Custom Review Slider Shopify Section allows you to showcase customer testimonials in an interactive and visually appealing way. Designed for full responsiveness, this section ensures that reviews look great on desktop, tablet, and mobile devices. Key Features: ✔ Fully Responsive Design – Works perfectly across all screen sizes. ✔ Customizable Layout – Adjust padding, font sizes, background colors, and more. ✔ Image Support – Display customer images alongside their testimonials. ✔ Slick Slider Integration – Smooth, touch-friendly sliding experience. ✔ Typography Control – Customize text styles for better readability. ✔ SEO Optimized – Structured content that improves on-page SEO. ✔ Easy Setup – No coding required; just drag and drop in Shopify. How It Works With this Shopify section, you can easily add customer reviews using the built-in block settings.
Liquid Code
<section class="customer-reviews-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
<div class="customer-reviews-container page-width">
<div class="reviews-header">
{% if section.settings.caption != blank %}
<p class="reviews-caption">{{ section.settings.caption }}</p>
{% endif %}
{% if section.settings.title != blank %}
<h2 class="reviews-title">{{ section.settings.title }}</h2>
{% endif %}
</div>
<div class="reviews-slider">
{% for block in section.blocks %}
<div class="review-item">
<div class="review-image">
{% if block.settings.image %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Customer photo">
{% else %}
<div class="placeholder-container">
{{ 'image' | placeholder_svg_tag: 'customer-placeholder' }}
</div>
{% endif %}
</div>
<div class="review-content">
<div class="quote-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
<path d="M7 10V13H10V17H5V13C5 11.34 6.34 10 8 10H7ZM14 10V13H17V17H12V13C12 11.34 13.34 10 15 10H14Z"/>
</svg>
</div>
<div class="review-text-container">
<p class="review-text">{{ block.settings.review_text }}</p>
<p class="review-author">— {{ block.settings.customer_name }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<style>
.customer-reviews-section {
text-align: center;
}
.review-text-container {
text-align: left;
}
.quote-icon {
display: flex;
}
.reviews-header {
margin-bottom: 30px;
}
.reviews-caption {
font-size: 14px;
color: gray;
text-transform: uppercase;
}
.reviews-title {
font-size: 28px;
font-weight: bold;
}
.reviews-slider {
display: none; /* Hide until Slick.js loads */
}
.review-item {
position: relative;
width: 100%;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.review-image img, .review-image .placeholder-container {
width: 100%;
height: 460px;
display: flex;
align-items: center;
justify-content: center;
background-color: white; /* Ensure white background */
border: 1px solid #ddd;
border-radius: 10px;
object-fit: cover;
}
.placeholder-container svg {
width: 100%;
}
.review-content {
position: absolute;
bottom: 0;
color: white;
width: 100%;
box-shadow: inset 1px -20px 20px 0px rgb(0 0 0 / 31%);
padding: 20px;
}
.quote-icon svg {
width: 60px;
height: 60px;
transform: rotateZ(180deg);
}
.review-text {
font-size: 16px;
margin: 0;
}
.review-author {
font-size: 14px;
font-weight: bold;
margin-top: 10px;
}
/* Slick slider buttons */
.slick-prev, .slick-next {
z-index: 10;
color: black;
font-size: 24px;
}
.slick-prev:before, .slick-next:before {
color: black;
}
.reviews-slider .review-item {
margin: 0 8px; /* Adds spacing between slides */
}
.slick-list {
margin: 0 -8px; /* Counteracts the margin to prevent overflow issues */
}
</style>
<!-- Include jQuery & Slick.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick-theme.css"/>
<script>
$(document).ready(function(){
$('.reviews-slider').show().slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 3000,
dots: false,
arrows: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1
}
}
]
});
});
</script>
{% schema %}
{
"name": "Customer Reviews Slider",
"settings": [
{
"type": "text",
"id": "caption",
"label": "Caption",
"default": "Customers"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Don't just take it from us"
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#f0ece4"
},
{
"type": "range",
"id": "padding_top",
"label": "Padding Top",
"default": 50,
"min": 0,
"max": 200,
"step": 2
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom",
"default": 50,
"min": 0,
"max": 200,
"step": 2
}
],
"blocks": [
{
"type": "review",
"name": "Review",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Customer Image"
},
{
"type": "text",
"id": "review_text",
"label": "Review Text",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
"type": "text",
"id": "customer_name",
"label": "Customer Name",
"default": "John Doe"
}
]
}
],
"presets": [
{
"name": "Customer Reviews Slider",
"category": "Testimonials"
}
]
}
{% endschema %}