Testimonial Slider

Testimonial Slider

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.

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' }}">
{% if section.settings.title != blank %}
<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>
{% endif %}

{% if section.blocks.size > 0 %}
<global-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>
</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.author != blank %}
<cite><span>-</span>&nbsp{{ block.settings.author | escape }}</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 %}
</global-slider>
{% endif %}
</div>
<style>
.sectionHeader {
display: flex;
flex-direction: column;
}
.sectionHeader > p {
text-align: center;
}

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

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

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

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

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

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

global-slider [data-counter] > span {
width: 20px;
background: #eee
}

.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;
}

.slide__link--active > span {
background: #E08BFD !important;
}

.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: #F1FCFE;
}

.authorWrapper {
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
}

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

@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: 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": "color",
"id": "border_color",
"label": "Border color",
"default": "#eee"
},
{
"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": "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": "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);

 

That's it.

Copied!
Voltar para o blogue

Deixe um comentário