Geef je Shopify Webshop Meer Vertrouwen met een Testimonials Slider

Wil je de betrouwbaarheid van je Shopify-winkel vergroten en bezoekers overtuigen om bij jou te kopen? Testimonials zijn krachtig, zeker wanneer je ze mooi presenteert in een slider. In deze blog laat ik stap-voor-stap zien hoe je een eenvoudige, maar professionele testimonials slider toevoegt aan je Shopify-winkel met behulp van een custom section.

Waarom een Testimonials Slider?

Klanten vertrouwen eerder andere klanten dan jou als verkoper. Door testimonials te tonen, verhoog je het vertrouwen en stimuleer je conversies. Een slider zorgt bovendien voor een interactieve ervaring zonder dat het teveel ruimte inneemt.

Wat heb je nodig?

• Een Shopify-winkel met toegang tot het thema
• Basiskennis van Shopify-sections

Stap 1: Maak een nieuwe Custom Section

Ga in je Shopify admin naar:

Online Winkel → Thema's → Code bewerken

Klik onder het kopje Sections op Nieuwe sectie toevoegen. Noem deze bijvoorbeeld testimonials-slider.

Stap 2: Kopieer en Plak de Custom Code

Gebruik de onderstaande code en plak deze volledig in je nieuwe sectie:

<!-- Voeg dit toe aan je theme.liquid in de head sectie:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
-->

<div class="testimonials-section" id="testimonials-{{ section.id }}">
 <div class="page-width">
   <div class="testimonials-slider">
     <div class="slider-track">
       {% for block in section.blocks %}
         <div class="slide" {{ block.shopify_attributes }}>
           <div class="testimonial-card">
             {% if block.settings.image %}
               <div class="testimonial-image">
                 {{ block.settings.image | image_url: width: 1000 | image_tag: loading: 'lazy', class: 'card-image' }}
               </div>
             {% endif %}
             
             <div class="testimonial-content">
               <div class="author-info">
                 {% if block.settings.author_image %}
                   {{ block.settings.author_image | image_url: width: 250 | image_tag: loading: 'lazy', class: 'author-image' }}
                 {% endif %}
                 <div class="author-details">
                   <h4>{{ block.settings.author }}</h4>
                 </div>
               </div>

               <div class="rating">
                 {% for i in (1..block.settings.rating) %}
                   <span class="star">★</span>
                 {% endfor %}
               </div>

               <div class="testimonial-text">
                 {{ block.settings.text }}
               </div>
             </div>
           </div>
         </div>
       {% endfor %}
     </div>
     <button class="slider-nav prev" aria-label="Previous">❮</button>
     <button class="slider-nav next" aria-label="Next">❯</button>
   </div>
 </div>
</div>

<style>
 #testimonials-{{ section.id }} {
   --section-background: {{ section.settings.background_color }};
   --card-background: {{ section.settings.card_background }};
   --text-color: {{ section.settings.text_color }};
   --star-color: {{ section.settings.star_color }};
   --nav-button-color: {{ section.settings.nav_button_color }};
   --card-radius: {{ section.settings.card_radius }}px;
   --image-height: {{ section.settings.image_height }}px;
   --section-padding-top: {{ section.settings.padding_top }}px;
   --section-padding-bottom: {{ section.settings.padding_bottom }}px;
   --space-between: {{ section.settings.space_between }}px;
 }

 .testimonials-section {
   padding: var(--section-padding-top) 0 var(--section-padding-bottom);
   position: relative;
   background: var(--section-background);
 }

 .page-width {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
 }

 .testimonials-slider {
   position: relative;
   overflow: hidden;
   padding: 20px 40px;
 }

 .slider-track {
   display: flex;
   transition: transform 0.5s ease;
   touch-action: pan-y pinch-zoom;
   will-change: transform;
   gap: var(--space-between);
 }

 .slide {
   flex: 0 0 100%;
   padding: 0 10px;
   box-sizing: border-box;
 }

 .testimonial-card {
   border-radius: var(--card-radius);
   border: 1px solid #d9d9d9;
   overflow: hidden;
   height: 100%;
   background: var(--card-background);
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   color: var(--text-color);
 }

 .testimonial-image img {
   width: 100%;
   height: var(--image-height);
   object-fit: cover;
 }

 .testimonial-content {
   padding: 20px;
   text-align: {{ section.settings.text_alignment }};
 }

 .author-info {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 15px;
 }

 .author-image {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
 }

 .rating {
   color: var(--star-color);
   margin: 10px 0;
 }

 .star {
   font-size: 14px;
 }

 .slider-nav {
   {% unless section.settings.show_arrows %}
     display: none;
   {% endunless %}
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: #fff;
   border: 2px solid var(--nav-button-color);
   color: var(--nav-button-color);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   z-index: 2;
   transition: all 0.3s ease;
 }

 .slider-nav:hover {
   background: var(--nav-button-color);
   color: #fff;
 }

 .slider-nav.prev {
   left: 0;
 }

 .slider-nav.next {
   right: 0;
 }

 @media screen and (min-width: 1024px) {
   .slide {
     flex: 0 0 calc((100% - ({{ section.settings.desktop_slides | minus: 1 }} * var(--space-between))) / {{ section.settings.desktop_slides }});
   }
 }

 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .slide {
     flex: 0 0 calc((100% - ({{ section.settings.tablet_slides | minus: 1 }} * var(--space-between))) / {{ section.settings.tablet_slides }});
   }
 }

 @media screen and (max-width: 767px) {
   .slide {
     flex: 0 0 calc((100% - ({{ section.settings.mobile_slides | minus: 1 }} * var(--space-between))) / {{ section.settings.mobile_slides }});
   }
 }

 @media (hover: none) and (pointer: coarse) {
   .testimonials-slider {
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
   }
 }
</style>

<script>
 (function() {
   class TestimonialSlider {
     constructor(container) {
       this.container = container;
       this.track = container.querySelector('.slider-track');
       this.slides = container.querySelectorAll('.slide');
       this.prevButton = container.querySelector('.slider-nav.prev');
       this.nextButton = container.querySelector('.slider-nav.next');
       this.currentIndex = 0;
       this.slideCount = this.slides.length;
       this.interval = null;
       this.isAnimating = false;
       this.touchStartX = 0;
       this.touchEndX = 0;
       this.minSwipeDistance = 50;
       this.animationDuration = 500;
       this.autoplayDelay = 6000;

       if (this.slideCount < 3) return;
       this.setupInfiniteScroll();
       this.init();
     }

     setupInfiniteScroll() {
       const slidesToClone = 3;
       
       for (let i = 0; i < slidesToClone; i++) {
         const clone = this.slides[i].cloneNode(true);
         this.track.appendChild(clone);
       }
       
       for (let i = this.slideCount - 1; i >= this.slideCount - slidesToClone; i--) {
         const clone = this.slides[i].cloneNode(true);
         this.track.insertBefore(clone, this.track.firstChild);
       }

       this.slides = this.container.querySelectorAll('.slide');
       this.currentIndex = slidesToClone;
       requestAnimationFrame(() => this.updateSlider(false));
     }

     init() {
       if (this.slideCount > 0) {
         this.addEventListeners();
         this.startAutoplay();
       }
     }

     updateSlider(animate = true) {
       if (!this.slides[0]) return;
       
       const slideWidth = this.slides[0].offsetWidth;
       
       if (animate) {
         this.track.style.transition = `transform ${this.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
       } else {
         this.track.style.transition = 'none';
       }
       
       this.track.style.transform = `translateX(-${this.currentIndex * slideWidth}px)`;
     }

     moveToSlide(index, animate = true) {
       if (this.isAnimating || !this.slides[index]) return;
       
       this.isAnimating = true;
       this.currentIndex = index;
       this.updateSlider(animate);

       if (animate) {
         this.scheduleAnimationReset();
       } else {
         this.isAnimating = false;
       }
     }

     scheduleAnimationReset() {
       setTimeout(() => {
         this.isAnimating = false;
       }, this.animationDuration + 50);
     }

     nextSlide() {
       if (this.isAnimating) return;
       
       this.moveToSlide(this.currentIndex + 1, true);

       if (this.currentIndex >= this.slides.length - 3) {
         this.scheduleReset(2);
       }
     }

     prevSlide() {
       if (this.isAnimating) return;
       
       this.moveToSlide(this.currentIndex - 1, true);

       if (this.currentIndex <= 2) {
         this.scheduleReset(this.slides.length - 4);
       }
     }

     scheduleReset(resetIndex) {
       setTimeout(() => {
         requestAnimationFrame(() => {
           this.moveToSlide(resetIndex, false);
         });
       }, this.animationDuration);
     }

     startAutoplay() {
       this.stopAutoplay();
       this.interval = setInterval(() => {
         if (!this.isAnimating && document.visibilityState === 'visible') {
           this.nextSlide();
         }
       }, this.autoplayDelay);
     }

     stopAutoplay() {
       if (this.interval) {
         clearInterval(this.interval);
         this.interval = null;
       }
     }

     addEventListeners() {
       this.nextButton.addEventListener('click', () => {
         if (!this.isAnimating) {
           this.nextSlide();
           this.stopAutoplay();
           this.startAutoplay();
         }
       });

       this.prevButton.addEventListener('click', () => {
         if (!this.isAnimating) {
           this.prevSlide();
           this.stopAutoplay();
           this.startAutoplay();
         }
       });

       let touchMoved = false;
       
       this.track.addEventListener('touchstart', (e) => {
         touchMoved = false;
         this.touchStartX = e.touches[0].clientX;
         this.stopAutoplay();
         this.track.style.transition = 'none';
       }, { passive: true });

       this.track.addEventListener('touchmove', (e) => {
         if (this.isAnimating) return;
         touchMoved = true;
         
         const currentTouch = e.touches[0].clientX;
         const diff = this.touchStartX - currentTouch;
         const slideWidth = this.slides[0].offsetWidth;
         
         requestAnimationFrame(() => {
           const newPosition = -(this.currentIndex * slideWidth) - diff;
           this.track.style.transform = `translateX(${newPosition}px)`;
         });
       }, { passive: true });

       this.track.addEventListener('touchend', (e) => {
         if (!touchMoved) return;
         
         this.touchEndX = e.changedTouches[0].clientX;
         const swipeDistance = this.touchStartX - this.touchEndX;
         
         this.track.style.transition = `transform ${this.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;

         if (Math.abs(swipeDistance) > this.minSwipeDistance) {
           if (swipeDistance > 0) {
             this.nextSlide();
           } else {
             this.prevSlide();
           }
         } else {
           this.updateSlider(true);
         }

         setTimeout(() => this.startAutoplay(), this.animationDuration);
       }, { passive: true });

       document.addEventListener('visibilitychange', () => {
         if (document.visibilityState === 'visible') {
           this.startAutoplay();
         } else {
           this.stopAutoplay();
         }
       });

       let resizeTimer;
       window.addEventListener('resize', () => {
         clearTimeout(resizeTimer);
         this.stopAutoplay();
         
         resizeTimer = setTimeout(() => {
           requestAnimationFrame(() => {
             this.updateSlider(false);
             this.startAutoplay();
           });
         }, 250);
       });
     }
   }

   try {
     const sliderContainer = document.querySelector('#testimonials-{{ section.id }}');
     if (sliderContainer) {
       new TestimonialSlider(sliderContainer);
     }
   } catch (error) {
     console.warn('Testimonial slider initialization error:', error);
   }
 })();
</script>

{% schema %}
{
 "name": "Testimonials Slider",
 "settings": [
   {
     "type": "header",
     "content": "Layout Settings"
   },
   {
     "type": "select",
     "id": "layout",
     "label": "Layout Style",
     "options": [
       {
         "value": "grid",
         "label": "Grid"
       },
       {
         "value": "carousel",
         "label": "Carousel"
       }
     ],
     "default": "carousel"
   },
   {
     "type": "range",
     "id": "desktop_slides",
     "min": 1,
     "max": 6,
     "step": 1,
     "label": "Slides per View (Desktop)",
     "default": 3
   },
   {
     "type": "range",
     "id": "tablet_slides",
     "min": 1,
     "max": 4,
     "step": 1,
     "label": "Slides per View (Tablet)",
     "default": 2
   },
   {
     "type": "select",
     "id": "mobile_slides",
     "label": "Slides per View (Mobile)",
     "options": [
       {
         "value": "1",
         "label": "1 Slide"
       },
       {
         "value": "2",
         "label": "2 Slides"
       }
     ],
     "default": "1"
   },
   {
     "type": "header",
     "content": "Colors"
   },
   {
     "type": "color",
     "id": "background_color",
     "label": "Background Color",
     "default": "#ffffff"
   },
   {
     "type": "color",
     "id": "card_background",
     "label": "Card Background",
     "default": "#ffffff"
   },
   {
     "type": "color",
     "id": "text_color",
     "label": "Text Color",
     "default": "#333333"
   },
   {
     "type": "color",
     "id": "star_color",
     "label": "Star Rating Color",
     "default": "#ed5e84"
   },
   {
     "type": "color",
     "id": "nav_button_color",
     "label": "Navigation Button Color",
     "default": "#ed5e84"
   },
   {
     "type": "header",
     "content": "Animation Settings"
   },
   {
     "type": "range",
     "id": "autoplay_speed",
     "min": 2,
     "max": 10,
     "step": 0.5,
     "unit": "s",
     "label": "Autoplay Speed",
     "default": 5
   },
   {
     "type": "checkbox",
     "id": "enable_autoplay",
     "label": "Enable Autoplay",
     "default": true
   },
   {
     "type": "checkbox",
     "id": "pause_on_hover",
     "label": "Pause on Hover",
     "default": true
   },
   {
     "type": "select",
     "id": "transition_effect",
     "label": "Transition Effect",
     "options": [
       {
         "value": "slide",
         "label": "Slide"
       },
       {
         "value": "fade",
         "label": "Fade"
       }
     ],
     "default": "slide"
   },
   {
     "type": "header",
     "content": "Card Style"
   },
   {
     "type": "range",
     "id": "card_radius",
     "min": 0,
     "max": 30,
     "step": 2,
     "unit": "px",
     "label": "Card Border Radius",
     "default": 18
   },
   {
     "type": "range",
     "id": "image_height",
     "min": 100,
     "max": 400,
     "step": 10,
     "unit": "px",
     "label": "Image Height",
     "default": 200
   },
   {
     "type": "select",
     "id": "text_alignment",
     "label": "Text Alignment",
     "options": [
       {
         "value": "left",
         "label": "Left"
       },
       {
         "value": "center",
         "label": "Center"
       },
       {
         "value": "right",
         "label": "Right"
       }
     ],
     "default": "left"
   },
   {
     "type": "header",
     "content": "Navigation"
   },
   {
     "type": "checkbox",
     "id": "show_arrows",
     "label": "Show Navigation Arrows",
     "default": true
   },
   {
     "type": "checkbox",
     "id": "show_dots",
     "label": "Show Navigation Dots",
     "default": false
   },
   {
     "type": "header",
     "content": "Spacing"
   },
   {
     "type": "range",
     "id": "padding_top",
     "min": 0,
     "max": 100,
     "step": 5,
     "unit": "px",
     "label": "Padding Top",
     "default": 50
   },
   {
     "type": "range",
     "id": "padding_bottom",
     "min": 0,
     "max": 100,
     "step": 5,
     "unit": "px",
     "label": "Padding Bottom",
     "default": 50
   },
   {
     "type": "range",
     "id": "space_between",
     "min": 10,
     "max": 50,
     "step": 5,
     "unit": "px",
     "label": "Space Between Slides",
     "default": 20
   }
 ],
 "blocks": [
   {
     "type": "testimonial",
     "name": "Testimonial",
     "settings": [
       {
         "type": "image_picker",
         "id": "image",
         "label": "Testimonial Image"
       },
       {
         "type": "image_picker",
         "id": "author_image",
         "label": "Author Image"
       },
       {
         "type": "text",
         "id": "author",
         "label": "Author Name",
         "default": "Customer Name"
       },
       {
         "type": "range",
         "id": "rating",
         "min": 1,
         "max": 5,
         "step": 1,
         "label": "Rating",
         "default": 5
       },
       {
         "type": "textarea",
         "id": "text",
         "label": "Testimonial",
         "default": "Share customer testimonials to show your store's reputation."
       }
     ]
   }
 ],
 "presets": [
   {
     "name": "DT Testimonials Slider",
     "blocks": [
       {
         "type": "testimonial"
       },
       {
         "type": "testimonial"
       },
       {
         "type": "testimonial"
       }
     ]
   }
 ]
}
{% endschema %}

‍

Stap 3: Activeer de Testimonials Slider

Ga nu naar de thema-aanpasser (Online Winkel → Thema's → Aanpassen). Klik op Sectie toevoegen en selecteer je nieuwe testimonials slider (DT Testimonials Slider). Vul vervolgens eenvoudig testimonials in via het gebruiksvriendelijke Shopify dashboard.

Stap 4: Aanpassen naar jouw smaak

Je kunt eenvoudig kleuren, slidersnelheid, het aantal testimonials en andere instellingen aanpassen. Experimenteer hiermee tot je de perfecte look en feel bereikt hebt.

Bonus: Video Tutorial

Vind je het prettiger om visueel te leren? Bekijk dan onderstaande video waarin ik stap-voor-stap uitleg hoe je de testimonials slider instelt.

Samenvatting

Een testimonials slider is een must-have om jouw Shopify-winkel een boost te geven. Door deze simpele stappen te volgen, heb je binnen enkele minuten een professionele slider op je site. Veel succes!

Heb je vragen? Laat hieronder gerust een reactie achter!

‍

‍

‍