So fügen Sie einen Vorher-Nachher-Schieberegler in Shopify ein

Stellen Sie sich vor, Sie verkaufen ein Zahnaufhellungs-Set, einen Fahrzeugaufbereitungs-Service oder ein Set von Lightroom-Presets. Was bringt einen potenziellen Kunden dazu, zuzuschlagen? Bei Produkten wie diesen wollen die Menschen mehr als nur Ihre Versprechen. Sie wollen die Ergebnisse sehen.

Ein Vorher-Nachher-Slider ermöglicht es Käufern, genau zu visualisieren, wofür sie bezahlen. Ziehen Sie den Regler, beobachten Sie die Verwandlung – und der Wert verkauft sich von selbst. Es ist eine der schnellsten Möglichkeiten, Vertrauen aufzubauen und Ihr Produkt in einem überfüllten Markt hervorzuheben.

Wenn Sie auf Shopify verkaufen, gibt es einen Haken: Die Standard-Themes enthalten standardmäßig keinen Vorher-Nachher-Block. Um einen hinzuzufügen, haben Sie drei Möglichkeiten: Installieren Sie eine App aus dem Shopify App Store, betten Sie ein kostenloses No-Code-Widget ein oder programmieren Sie einen Slider individuell in Ihre Theme-Dateien. Diese Anleitung führt Sie durch alle drei Methoden, damit Sie Interessenten in Käufer verwandeln können.

Option 1: Eine Erweiterung aus dem Shopify App Store installieren

Für die meisten Händler ist der erste Impuls, den Shopify App Store zu öffnen und nach „Vorher-Nachher-Slider“ zu suchen. Sie werden zahlreiche Optionen finden, und die meisten davon werden als nativer App-Block installiert. Sobald Sie die App hinzugefügt haben, erscheint der Slider direkt in Ihrem Theme-Editor als Abschnitt oder Block, den Sie auf einer Produktseite platzieren können. Diese Bequemlichkeit ist der Reiz.

Allerdings bringt das zwei Kosten mit sich.

Die erste ist das, was Shop-Betreiber als „App-Steuer“ bezeichnen. Fast jede spezialisierte Slider-App läuft über ein monatliches Abonnement – typischerweise irgendwo zwischen 1 und 10 US-Dollar pro Monat für eine einzige interaktive Funktion. Ein Slider hier, ein Countdown-Timer dort, und ein Jahr später zahlen Sie echtes Geld für Funktionen, die früher einmalige Add-ons waren. 

Die zweite Kostenquelle ist die Geschwindigkeit. Front-End-Visualisierungs-Apps schleusen häufig ihr eigenes JavaScript von Drittanbietern in jede Seite ein, die sie berühren. Installieren Sie einige davon, und Ihre Produktseiten tragen eine Last externer Skripte, was die Seitengeschwindigkeit verlangsamen kann – was sich direkt sowohl auf Ihre Konversionsrate als auch auf Ihre SEO auswirkt.

Wenn Sie diese Kompromisse abgewogen haben und dennoch den Weg über die native App wählen möchten, finden Sie hier die Einrichtung:

1. Navigieren Sie zum Shopify App Store und stellen Sie sicher, dass Sie in Ihrem Shopify-Konto angemeldet sind. Suchen Sie nach „Vorher-Nachher-Slider“.

2. Wählen Sie eine App aus und klicken Sie auf Installieren, um sie zu Ihrem Shop hinzuzufügen.

3. Folgen Sie den Anweisungen der App, um sie einzurichten. Die meisten Apps erfordern, dass Sie die Zahlung einrichten, bevor Sie sie verwenden können, daher müssen Sie dies tun, bevor Sie sie zu Ihrem Theme hinzufügen.

Option 2: Ein kostenloses No-Code-Slider-Widget verwenden (empfohlen)

Wenn Sie einen anpassbaren und responsiven Vergleichs-Slider ohne monatliches Abonnement wünschen, ist der beste Weg ein kostenloses eingebettetes Widget. Der Jotform Vorher-Nachher-Slider ist genau dafür gemacht. Sie konfigurieren ihn visuell, kopieren einen Einbettungscode und fügen ihn in Ihre Shopify-Seite ein. Es gibt keine App zu installieren und keine wiederkehrende Gebühr.

Da das Widget von den Servern von Jotform geladen wird, anstatt Skripte in Ihr Theme einzuschleusen, hält es den Code Ihres Shops schlank, was dazu beiträgt, die Seitengeschwindigkeit zu schützen. Sie können eine horizontale oder vertikale Enthüllung einstellen, zwischen Ziehen, Klicken oder Hover-Interaktion wählen, Beschriftungen und Bildunterschriften hinzufügen und sogar bis zu drei Vergleichspaare in einem kompakten Karussell stapeln.

So fügen Sie ihn hinzu:

1. Fügen Sie auf der Seite des Jotform Vorher-Nachher-Sliders Ihre Vorher- und Nachher-Bilder hinzu und schreiben Sie für jedes Paar eine Beschriftung und eine Bildunterschrift. Jotform ruft Bilder per URL ab. Wenn Ihre Fotos also noch nicht online sind, laden Sie sie zuerst unter Einstellungen > Dateien in Shopify hoch und kopieren Sie die URL jedes Bildes. Sie können auch die Option zum Hochladen von Bildern wählen, wenn Sie Bilder lieber direkt in Jotform hinzufügen möchten.

2. Passen Sie die Enthüllungsrichtung, die Position des Trenners, die Farben und die Größe an Ihren Shop an.

3. Kopieren Sie den Einbettungscode, den Jotform generiert. Dazu klicken Sie auf die Schaltfläche Code kopieren in der Registerkarte Veröffentlichen.

4. Öffnen Sie in Ihrem Shopify-Theme-Editor das Produkt- oder Seitentemplate, in dem Sie den Slider haben möchten, klicken Sie auf Abschnitt hinzufügen (oder Block hinzufügen) und wählen Sie Custom Liquid. Fügen Sie den Einbettungscode ein und klicken Sie dann auf Speichern.

Option 3: Den Code Ihres Shopify-Themes bearbeiten

Wenn Sie lieber gar keine externe App oder Einbettung verwenden möchten, können Sie einen Vergleichs-Slider direkt in Ihrem Theme erstellen. Das ist der Weg mit der meisten Kontrolle und dem geringsten Overhead, aber auch die Option, bei der am leichtesten etwas kaputtgehen kann.

Die Erstellung besteht aus drei Teilen: HTML, um die beiden Bilder zu halten, CSS, um sie zu stapeln und zuzuschneiden, und JavaScript, um den Trenner zu bewegen, während der Besucher zieht. Der einfachste Ort, um all das unterzubringen, ist ein einzelner Custom Liquid-Block, damit Sie Ihre Template-Dateien nicht direkt bearbeiten müssen.

So gehen Sie vor:

1. Fügen Sie das Markup mit Ihren beiden Bild-URLs hinzu. Das „Vorher“-Bild liegt oben und wird zugeschnitten; das „Nachher“-Bild liegt darunter.

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. Fügen Sie das CSS hinzu. Absolute Positionierung überlagert die Bilder, clip-path zeigt zu Beginn die Hälfte des „Vorher“-Bilds, und touch-action: none verhindert, dass die Seite scrollt, während jemand auf einem Smartphone zieht.

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. Fügen Sie das JavaScript hinzu. Pointer-Events decken Maus und Touch in einem Pfad ab, sodass der Griff einem Cursor-Ziehen oder einem Daumen-Wischen folgt. Speichern Sie und testen Sie dann auf einem echten Smartphone.

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>

Eine faire Warnung: Das ist die Option, die ihre Tücken hat. Eine vergessene Klammer oder ein Style, der in den Rest Ihres Themes durchsickert, kann Ihr mobiles Layout zerstören oder, schlimmer noch, den Checkout-Prozess stören. Das Touch-Verhalten muss auf echten Geräten getestet werden, nicht nur in Ihrem Desktop-Browser, und Sie sind für jeden Fehler und jede künftige Korrektur selbst verantwortlich. Wenn dieser Kompromiss schlechter klingt als ein Widget, empfehlen wir Option 2.

Verbessern Sie Ihren Shopify-Shop mit smarten No-Code-Widgets

Ein Vorher-Nachher-Schieberegler lohnt sich, aber er ist selten das einzige interaktive Element, das ein Shop braucht. Shopify verdient seinen Platz unter den besten E-Commerce-Website-Baukästen auch deshalb, weil es sich so einfach erweitern lässt – und die richtigen Add-ons machen aus einem funktionalen Shop einen ausgefeilten. Die Falle besteht darin, für jedes einzelne ein separates monatliches Abonnement zu zahlen, denn diese Gebühren fressen still und leise die Margen auf, die Sie zu schützen versuchen.

Genau deshalb lohnt es sich, stattdessen auf kostenlose, gehostete Widgets zurückzugreifen. Tools wie der Jotform Vorher-Nachher-Schieberegler bewahren Ihren Gewinn, halten Ihre Seiten schnell geladen und Ihre Käufer bei der Stange. Und dasselbe Verzeichnis deckt weit mehr ab als nur Bildvergleiche.

Einige weitere Jotform-Widgets, die sich für einen Shopify-Shop lohnen, sind unter anderem:

• Ein Countdown-Timer, um einem Flash-Sale oder einem Produkt-Drop ein Gefühl der Dringlichkeit zu verleihen
• Ein FAQ-Widget, um häufige Produktfragen direkt auf der Seite zu beantworten
• Altersverifizierung für altersbeschränkte Produkte
• Ein Nach-oben-Button, um lange Produktseiten leichter navigierbar zu machen

Durchstöbern Sie das vollständige Jotform-Website-Widget-Verzeichnis, um zu sehen, was zu Ihrem Shop passt. Darüber hinaus können Sie Ihre Formulare und Daten direkt über die Jotform-Shopify-Integration verbinden. Probieren Sie Ihr erstes No-Code-Widget kostenlos aus und richten Sie es in nur wenigen Minuten ein.