Een voor-en-na-slider toevoegen in Shopify

Stel je voor dat je een tandenbleekset, een autodetailingservice of een set Lightroom-presets verkoopt. Wat zet een potentiële klant aan tot kopen? Bij dit soort producten willen mensen meer dan je beloftes. Ze willen de resultaten zien.

Met een voor-en-na-slider kunnen shoppers precies visualiseren waarvoor ze betalen. Sleep de hendel, bekijk de transformatie en de waarde verkoopt zichzelf. Het is een van de snelste manieren om vertrouwen op te bouwen en je product te onderscheiden in een drukke markt.

Als je verkoopt op Shopify, is er een addertje onder het gras: de standaardthema’s bevatten standaard geen voor-en-na-blok. Om er een toe te voegen, heb je drie opties: installeer een app uit de Shopify App Store, voeg een gratis no-code widget toe, of codeer handmatig een slider in je themabestanden. Deze gids behandelt alle drie de methoden, zodat je browsers kunt gaan omzetten in kopers.

Optie 1: Installeer een extensie uit de Shopify App Store

Voor de meeste verkopers is de eerste ingeving om de Shopify App Store te openen en te zoeken op “voor-en-na-slider.” Je vindt er tal van opties, en de meeste installeren als een native app-blok. Zodra je de app hebt toegevoegd, verschijnt de slider direct in je thema-editor als een sectie of blok dat je op een productpagina kunt plaatsen. Dat gemak is de aantrekkingskracht.

Het brengt echter twee kosten met zich mee.

De eerste is wat winkeleigenaren de “app-belasting” noemen. Bijna elke speciale slider-app draait op een maandelijks abonnement — doorgaans ergens tussen de $1 en $10 per maand voor één interactieve functie. Een slider hier, een afteltimer daar, en een jaar later betaal je echt geld voor functies die vroeger eenmalige add-ons waren. 

De tweede kostenpost is snelheid. Front-end visuele apps injecteren vaak hun eigen JavaScript van derden in elke pagina die ze raken. Installeer er een paar, en je productpagina’s dragen een lading externe scripts met zich mee, wat de paginasnelheid kan vertragen — en dat heeft rechtstreeks invloed op zowel je conversieratio als je SEO.

Als je deze afwegingen hebt gemaakt en toch de native-app-route wilt volgen, is dit de installatie:

1. Ga naar de Shopify App Store en zorg ervoor dat je bent ingelogd op je Shopify-account. Zoek op “voor-en-na-slider.”

2. Selecteer een app en klik op Installeren om deze aan je winkel toe te voegen.

3. Volg de instructies van de app om deze in te stellen. De meeste apps vereisen dat je betaling instelt voordat je ze gebruikt, dus dat moet je doen voordat je ze aan je thema toevoegt.

Optie 2: Gebruik een gratis, no-code slider-widget (aanbevolen)

Als je een aanpasbare en responsieve vergelijkingsslider wilt zonder maandelijks abonnement, is de beste route een gratis ingesloten widget. De Jotform Voor-en-na-slider is precies hiervoor gebouwd. Je configureert hem visueel, kopieert één embedcode en plaatst deze op je Shopify-pagina. Er is geen app om te installeren en geen terugkerende kosten.

Omdat de widget laadt vanaf de servers van Jotform in plaats van scripts in je thema te injecteren, houdt hij de code van je winkel slank, wat helpt de paginasnelheid te beschermen. Je kunt horizontaal of verticaal onthullen instellen; kiezen voor interactie via slepen, klikken of hover; labels en bijschriften toevoegen; en zelfs tot drie vergelijkingsparen stapelen in een compacte carousel.

Zo voeg je hem toe:

1. Voeg op de pagina van de Jotform Voor-en-na-slider je voor- en na-afbeeldingen toe en schrijf voor elk paar een label en bijschrift. Jotform haalt afbeeldingen op via URL, dus als je foto’s nog niet online staan, upload ze dan eerst naar Shopify onder Instellingen > Bestanden en kopieer de URL van elke afbeelding. Je kunt ook de optie voor het uploaden van afbeeldingen kiezen als je de afbeeldingen liever rechtstreeks op Jotform toevoegt.

2. Pas de onthullingsrichting, de positie van de scheidingslijn, de kleuren en de grootte aan om bij je winkel te passen.

3. Kopieer de embedcode die Jotform genereert. Dit doe je door op de knop Code kopiëren te klikken in het tabblad Publiceren.

4. Open in je Shopify thema-editor de product- of paginasjabloon waar je de slider wilt plaatsen, klik op Sectie toevoegen (of Blok toevoegen) en kies Custom Liquid. Plak de embedcode en klik vervolgens op Opslaan.

Optie 3: Bewerk de code van je Shopify-thema

Als je liever helemaal geen externe app of embed wilt gebruiken, kun je een vergelijkingsslider rechtstreeks in je thema bouwen. Dit is de route met de meeste controle en de minste overhead, maar het is ook de optie die het makkelijkst kapotgaat.

De opbouw bestaat uit drie delen: HTML om de twee afbeeldingen vast te houden, CSS om ze te stapelen en bij te snijden, en JavaScript om de scheidingslijn te verplaatsen terwijl de bezoeker sleept. De eenvoudigste plek om dit allemaal te plaatsen is één enkel Custom Liquid-blok, zodat je je sjabloonbestanden niet rechtstreeks hoeft te bewerken.

Dit is wat je moet doen:

1. Voeg de markup toe met je twee afbeeldings-URL’s. De “voor”-afbeelding staat bovenop en wordt bijgesneden; de “na”-afbeelding staat eronder.

html<div class="ba-slider" id="baSlider">  <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore">  <img src="AFTER_IMAGE_URL" alt="After" class="ba-img">  <div class="ba-handle" id="baHandle"></div></div>

2. Voeg de CSS toe. Absolute positionering laat de afbeeldingen overlappen, clip-path toont bij aanvang de helft van de “voor”-afbeelding, en touch-action: none voorkomt dat de pagina scrollt terwijl iemand op een telefoon sleept.

html<style>  .ba-slider { position: relative; width: 100%; max-width: 600px;    aspect-ratio: 3 / 2; overflow: hidden; touch-action: none; user-select: none; }  .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  .ba-before { clip-path: inset(0 50% 0 0); }  .ba-handle { position: absolute; top: 0; left: 50%; width: 2px; height: 100%;background: #fff; transform: translateX(-50%); cursor: ew-resize; }  .ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%;    width: 36px; height: 36px; border-radius: 50%; background: #fff;    transform: translate(-50%, -50%); box-shadow: 0 0 4px rgba>(0,0,0,.4); }</style>

3. Voeg de JavaScript toe. Pointer-events dekken muis en touch in één pad, zodat de handle een cursorsleep of een duimveeg volgt. Sla op en test vervolgens op een echte telefoon.

html<script>  const s = document.getElementById('baSlider');  const before = document.getElementById('baBefore');  const handle = document.getElementById('baHandle');  let dragging = false;  function setPos(x) {    const r = s.getBoundingClientRect();    let pct = Math.max(0, Math.min(100, ((x - r.left) / r.width) * 100));    before.style.clipPath = `inset(0 ${100 - pct}% 0 0)`;    handle.style.left = pct + '%';  }  s.addEventListener('pointerdown', e => { dragging = true; setPos(e.clientX); });  window.addEventListener('pointermove', e => { if (dragging) setPos(e.clientX); });  window.addEventListener('pointerup', () => { dragging = false; });</script>

Een eerlijke waarschuwing: dit is de optie die kan tegenvallen. Een verdwaalde haak of een stijl die naar de rest van je thema lekt, kan je mobiele lay-out breken of, erger nog, het afrekenproces verstoren. Het aanraakgedrag moet op echte apparaten worden getest, niet alleen in je desktopbrowser, en je bent zelf verantwoordelijk voor elke bug en elke toekomstige oplossing. Als die afweging erger klinkt dan een widget, raden we Optie 2 aan.

Verbeter je Shopify-winkel met slimme, no-code widgets

Een voor-en-na-slider is het toevoegen waard, maar het is zelden het enige interactieve element dat een winkel nodig heeft. Shopify verdient zijn plek onder de beste e-commerce websitebouwers deels omdat het zo gemakkelijk uit te breiden is, en de juiste add-ons zijn wat een functionele winkel in een verzorgde winkel veranderen. De valkuil is dat je voor elk daarvan een apart maandelijks abonnement betaalt, aangezien die kosten stilletjes de marges opeten die je probeert te beschermen.

Dat pleit ervoor om in plaats daarvan te kiezen voor gratis, gehoste widgets. Tools zoals de Jotform Voor-en-na-slider houden je winst intact, je pagina’s snel laadbaar en je shoppers betrokken. En diezelfde directory dekt veel meer dan alleen afbeeldingsvergelijkingen.

Enkele andere Jotform-widgets die het verkennen waard zijn voor een Shopify-winkel zijn onder meer

• Een afteltimer om urgentie toe te voegen aan een flash sale of productlancering
• Een FAQ-widget om veelgestelde productvragen direct op de pagina te beantwoorden
• Leeftijdsverificatie voor leeftijdsgebonden producten
• Een terug-naar-boven-knop om lange productpagina’s gemakkelijker te navigeren

Blader door de volledige Jotform website widgets directory om te zien wat bij je winkel past. Daarnaast kun je je formulieren en gegevens rechtstreeks koppelen via de Jotform-Shopify-integratie. Probeer je eerste no-code widget gratis en stel het in slechts een paar minuten in.