How to Add Testimonial Slider in Shopify [NO APP]

How to Add Testimonial Slider in Shopify [NO APP]

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible with all Shopify Themes.

Add a testimonial slider to your Shopify. You can customize the position of the of the author name and the color of the border. Do you want no border? Remove the color in the section settings. 

You can see this testimonial slider in my current theme.

What you are buying:

  • Earn your customers trust by adding the section
  • Add testimonials with links to provide legitimacy
  • Option to add authors' image next to the name
  • Mobile friendly

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. Go to Admin Shopify store > Themes > Actions > Edit Code

2. In Section folder, create a new section, name it whatever you want, then replace the default code with the code below.

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="page-width " style= "padding-top: {{ section.settings.padding_top | append: 'px' }}; padding-bottom: {{section.settings.padding_bottom | append: 'px' }}">
<div class="sectionHeader">
{% if section.settings.title %} <h1 style="margin-bottom: 0">{{ section.settings.title | escape }}</h1>{% endif %}
{% if section.settings.description %}<h2 style="margin: 0; text-align: center">{{section.settings.description}}</h2>{% endif %}
</div>

{% if section.blocks.size > 0 %}
<testimonial-slider class="quotesWrapper">
<div class="quotesSliderWrapper slider__slide">
<ul class="quotesSlider" data-slider>
{% for block in section.blocks %}
<li class="quotesSlide slideCol {% if section.blocks.size == 1 %} quotes-slide--single{% endif %} {% if forloop.first %} slide--active{% endif %}"
data-slider-item
aria-labelledby="slide{{ block.id }}"
{{ block.shopify_attributes }}>
<blockquote class="quoteSliderText">
{% if block.settings.quote != blank %}
<div class="rte">
<span class="quoteIcon">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-quote" viewBox="0 0 41 35"><path d="M10.208 17.711h6.124v16.332H0V21.684C0 8.184 5.444.956 16.332 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766zm24.498 0h6.124v16.332H24.498V21.684C24.498 8.184 29.942.956 40.83 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766z"/></svg>
{% if block.settings.verify_comment != blank %} <a href="{{block.settings.verify_comment}}" target="_blank">{{ block.settings.verify_comment_text }}</a>{% endif %}
</span>
{{ block.settings.quote }}
</div>
{% endif %}
<div class="authorWrapper" style="justify-content: {{block.settings.author_position }}">
{% if block.settings.author_image != blank %}
<img src="{{block.settings.author_image | img_url: "small" }}"
alt="{{block.settings.author_image.alt}}"
style="object-position: {{block.settings.image_position}}">
{% endif %}
{% if block.settings.title != blank %}
<cite>
{{ block.settings.title | escape | prepend: "- "}}
{% if block.settings.date %} <span class="commentDate">{{ block.settings.date }}</span> {% endif %}
</cite>
{% endif %}
</div>
</blockquote>
</li>
{% endfor %}
</ul>
</div>

{% if section.blocks.size > 1 %}
<ul class="slickDots" data-counter-container>
{%- for block in section.blocks -%}
<li {% if forloop.first %} class="slide__link--active"{% endif %} data-counter="{{forloop.index0}}">
<span aria-label="slide number {{forloop.index }}" class="{{section.settings.dot_design}}"></span>
</li>
{%- endfor -%}
</ul>
{% endif %}
</testimonial-slider>
{% endif %}
</div>
<style>
.sectionHeader {
display: flex;
flex-direction: column;
}

.sectionHeader::after {
content: '{{section.settings.swipeable_text}}';
display: none;
margin: auto;
font-size: 14px;
text-transform: uppercase;
animation: blink 1.5s linear infinite;
}

@keyframes blink {
0% {
opacity: 0;
}
30% {
opacity: .5;
}
100% {
opacity: 1;
}
}

.sectionHeader > p {
text-align: center;
}

testimonial-slider [data-slider] {
display: flex;
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 0;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
-ms-overflow-style: none;
scrollbar-width: none;
}

testimonial-slider [data-slider]::-webkit-scrollbar {
display: none;
}

testimonial-slider [data-slider-item] {
border: 2px solid transparent;
}

testimonial-slider li {
list-style: none;
}

testimonial-slider [data-counter-container] {
display: flex;
justify-content: center;
align-items: center;
}

testimonial-slider [data-counter] {
height: 10px;
display: flex;
margin: auto 5px;
padding: 20px 0;
}

testimonial-slider [data-counter] > span {
width: 20px;
background: {{block.settings.non_active}};
}

.quotesSlider{
padding-left: 0;
scroll-snap-type: x mandatory;
scroll-padding: 10%;
}

.quotesSlide {
scroll-snap-align: start;
}

.round {
height: 20px;
aspect-ratio: 1;
border-radius: 50%;
}

.round-corner {
height: 5px;
border-radius: 5px;
}

.no-round-corner {
height: 5px;
}

.slide--active {
border: 2px solid {{section.settings.border_color}} !important;
}

.slickDots > .slide__link--active > span {
background: {{section.settings.border_color}};
}

.quotesWrapper blockquote {
height: 100%;
margin: 0;
padding: 2rem;
border-left: none;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
}

.quoteIcon svg {
width: 20px;
fill: inherit;
}

.authorWrapper {
display: flex;
gap: 10px;
align-items: center;
}

.authorWrapper > img {
border-radius: 50%;
aspect-ratio: 1;
width: 70px;
object-fit: cover;
}

.authorWrapper > cite {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}


.authorWrapper > cite > span {
font-size: 12px;
}

.quoteIcon {
display: flex;
justify-content: space-between;
align-items: center;
}

.quoteIcon a {
font-size: 12px;
}

.slickDots span {
background: {{section.settings.non_active}};
}

@media only screen and (min-width: 950px) {
.slideCol {
min-width: 33%;
}
}

@media only screen and (max-width: 949px) {
.slideCol {
min-width: 50%;
}
}

@media only screen and (max-width: 750px) {
.slickDots {
display: none !important
}

.sectionHeader::after {
display: block
}
}

@media only screen and (max-width: 481px ) {
.slideCol {
min-width: 100%;
}
}
</style>
{% schema %}
{
"name": "Testimonials",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Testimonials"
},
{
"type": "richtext",
"id": "description",
"label": "Text",
"default": "<p>Tell why the customers should shop in your store.</p>"
},
{
"type": "text",
"id": "swipeable_text",
"label": "Text",
"default": "Swipeable content"
},
{
"type": "color",
"id": "border_color",
"label": "Border color",
"default": "#eee"
},
{
"type": "color",
"id": "non_active",
"label": "None active color",
"default": "#000"
},
{
"type": "select",
"id": "dot_design",
"label": "Dot design",
"default": "round-corner",
"options": [
{
"value": "round-corner",
"label": "round corner"
},
{
"value": "no-round-corner",
"label": "no round corner"
},
{
"value": "round",
"label": "round"
}
]
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 99,
"step": 1,
"unit": "%",
"default": 0,
"label": "Section padding top"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 99,
"step": 1,
"unit": "%",
"default": 0,
"label": "Section padding bottom"
}
],
"blocks": [
{
"type": "quote",
"name": "Testimonial",
"settings": [
{
"type": "url",
"id": "verify_comment",
"label": "Verify Comment Link"
},
{
"type": "text",
"id": "verify_comment_text",
"label": "Verify Comment Label"
},
{
"type": "richtext",
"id": "quote",
"label": "Text",
"default": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
},
{
"type": "text",
"id": "title",
"label": "Author",
"default": "Author's name"
},
{
"type": "text",
"id": "date",
"label": "Date comment is created"
},
{
"type": "select",
"id": "author_position",
"label": "Author info position",
"default": "center",
"options": [
{
"value": "center",
"label": "center"
},
{
"value": "flex-start",
"label": "left"
},
{
"value": "flex-end",
"label": "right"
}
]
},
{
"type": "image_picker",
"id": "author_image",
"label": "Author's image"
},
{
"type": "select",
"id": "image_position",
"label": "Image object fit position",
"default": "top",
"options": [
{
"value": "top",
"label": "top"
},
{
"value": "center",
"label": "center"
},
{
"value": "bottom",
"label": "bottom"
},
{
"value": "left",
"label": "left"
},
{
"value": "right",
"label": "right"
},
{
"value": "unset",
"label": "unset"
}
]
}
]
}
],
"presets": [
{
"name": "Testimonials",
"category": "Text",
"blocks": [
{
"type": "quote"
},
{
"type": "quote"
},
{
"type": "quote"
}
]
}
]
}
{% endschema %}


 3. Next, open the Asset folder, find the global.js or theme.js. Then add the code below.

class TestimonialSlider extends HTMLElement {
constructor() {
super();
this.sliderControlWrapper = this.querySelector('.slider-buttons');

this.slider = this.querySelector('[data-slider]');
this.sliderItems = this.querySelectorAll('[data-slider-item]');

this.sliderControlLinksArray = Array.from(this.querySelectorAll('[data-counter]'));
this.sliderControlLinksArray.forEach(link => link.addEventListener('click', this.linkToSlide.bind(this)));

this.slider.addEventListener('scroll', this.scrollListener.bind(this));
}

scrollListener() {
this.sliderItemOffset = this.sliderItems[1].offsetLeft - this.sliderItems[0].offsetLeft;
this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1;

this.currentIndex(this.currentPage - 1);
}

update(slide) {
this.currentIndex(slide);
this.slideScrollPosition = slide * this.sliderItems[0].clientWidth;

this.slider.scrollTo({
left: this.slideScrollPosition
});
}

linkToSlide(event) {
const dotIndex = event.currentTarget.dataset.counter;
this.step = dotIndex;
this.update(this.step);
}

currentIndex(index) {
this.sliderControlLinksArray.forEach(link => {
link.classList.remove('slide__link--active');
link.removeAttribute('aria-current');
});

this.sliderControlLinksArray[index].classList.add('slide__link--active');
this.sliderControlLinksArray[index].setAttribute('aria-current', true);

this.sliderItems.forEach(slide => {
slide.classList.remove('slide--active');
slide.removeAttribute('aria-current');
});

this.sliderItems[index].classList.add('slide--active');
this.sliderItems[index].setAttribute('aria-current', true);
}
}

customElements.define('testimonial-slider', TestimonialSlider);

 

4. Lastly, go to your theme editor and add the section named "Testimonials."

 

That's it.

Copied!
Back to blog

Leave a comment