Die Nachricht kam an einem Mittwochmorgen, mit einem Screenshot und einem Stück alten Codes im Anhang. Der Inhaber eines Kopenhagener Onlineshops für Aluminiumkoffer und Reiseartikel, den wir hier Havn & Co. nennen, hatte im Warenkorb eines Mitbewerbers etwas gesehen und wollte es auch: eine kleine Box unter den Produkten mit dem Text Sicherheitspaket: Schutz vor Verlust, Diebstahl und Beschädigung und einem Schalter, den der Kunde vor dem Checkout aktivieren kann.
Genau so wollen wir es, hieß es, und Text, Bild und Farben wollen wir selbst ändern können. Bitte keine neue App. Diese Fallstudie zeigt, wie wir diesen Shopify Versandschutz-Schalter gebaut haben: was die Funktion macht, warum jedes Detail da ist, welche Überraschung wir im Live-Shop fanden und welche Optionen wir im Theme-Editor ergänzt haben.
Zu dieser Fallstudie: Sie basiert auf echter Shopify-Projektarbeit für einen dänischen Kunden. Der Shopname wurde geändert, die Bilder sind Illustrationen. Funktionen, Einstellungen und Tests sind genau so beschrieben, wie sie geliefert wurden.
Das Projekt auf einen Blick
| Kunde | Dänischer Onlineshop für Koffer und Reiseartikel, Preise in DKK |
| Plattform | Shopify, Horizon-Theme 3.5, Warenkorb-App Upcart |
| Funktion | Optionaler Schalter „Sicherheitspaket“ (Versandschutz) im Warenkorb-Drawer |
| Geliefert | 1 Snippet, 1 Skript, 1 Stylesheet, eine neue Gruppe Safety package in den Theme-Einstellungen, kleine Ergänzungen in 4 Theme-Dateien |
| Vorgaben | Keine zusätzliche Schutz-App, kein Theme-Wechsel, alles im Theme-Editor bearbeitbar, dänische Texte |
Der Auftrag: Was der Shop wollte
Aus Screenshot, Codebeispiel und einem kurzen Gespräch haben wir fünf konkrete Anforderungen festgehalten:
- Eine Schutz-Box im Warenkorb, direkt unter den Produkten, mit Icon, Titel, kurzer Beschreibung und Ein/Aus-Schalter.
- Ein Tippen zum Hinzufügen oder Entfernen, mit sofort aktualisierter Summe und ohne Neuladen der Seite.
- Ein aufgeräumter Warenkorb: Der Schutz soll nicht als verwirrende zusätzliche Produktzeile erscheinen.
- Volle Kontrolle im Theme-Editor: Text, Bild, Größen, Farben und das Preisprodukt, ohne Code anzufassen.
- Dänische Texte im Shop: Sikkerhedspakke und Beskyttelse mod tab, tyveri og skade.
Was ein Versandschutz-Schalter ist und warum Shops ihn nutzen
Mit einem Versandschutz-Schalter kann der Kunde im letzten Schritt vor dem Checkout eine kleine Gebühr für den Schutz vor Verlust, Diebstahl oder Beschädigung des Pakets wählen. Hinter dem Schalter steckt ein ganz normales Shopify-Produkt (in unseren Illustrationen 49 kr), das in den Warenkorb gelegt oder daraus entfernt wird.
Für einen Shop, der Koffer für mehrere hundert Kronen verkauft, erfüllt er drei Aufgaben auf einmal:
- Sicherheit im richtigen Moment. Die Frage „Was, wenn er verloren geht?“ wird direkt neben dem Checkout-Button beantwortet, genau dort, wo gezögert wird.
- Mehr Umsatz pro Bestellung. Jeder Kunde, der sich dafür entscheidet, erhöht den Bestellwert, und der Shop entscheidet selbst, wie er Schäden damit abdeckt.
- Weniger Support-Anfragen. Geht ein Paket verloren, gibt es bereits eine klare Vereinbarung, was abgedeckt ist.
Eine Regel hat das gesamte Design geprägt: In der EU muss eine zusätzliche kostenpflichtige Leistung vom Kunden aktiv gewählt werden. Die Verbraucherrechte-Richtlinie (2011/83/EU, Artikel 22) erlaubt keine vorangekreuzten Felder für Zusatzzahlungen. Deshalb ist der Schalter standardmäßig aus, und der optionale Auto-Modus ist in den Einstellungen klar gekennzeichnet und respektiert immer einen Kunden, der ihn ausschaltet.
Die Überraschung: Der Warenkorb gehörte nicht zum Theme
Unsere erste Version setzte die Box in den Warenkorb-Drawer des Horizon-Themes. Im Code funktionierte alles, doch im Live-Shop war sie nirgends zu sehen. Der Grund: Der Shop nutzt Upcart, eine Warenkorb-App, die den Drawer des Themes komplett ersetzt und einen eigenen zeichnet, abgeschottet von den Styles des Themes.
Statt den Kunden Code in die App einfügen zu lassen, haben wir den Live-Shop untersucht, die verfügbaren Upcart-Funktionen bestätigt und den Ansatz geändert: Das Theme enthält weiterhin alle Einstellungen, und ein kleines Skript setzt die Sicherheitspaket-Box in den Upcart-Drawer, hält sie dort, wenn Upcart neu zeichnet, und lässt Upcart nach jeder Änderung aktualisieren. Die Version für den Theme-Drawer bleibt als Reserve erhalten, falls der Shop Upcart einmal entfernt.
Die Funktionen im Einzelnen
1. Ein Schalter, sofort aktualisierte Summe
Was: Der Schalter fügt das Schutzprodukt über die Warenkorb-API von Shopify hinzu oder entfernt es, danach werden Drawer und Warenkorbzähler aktualisiert. Warum: Ein Neuladen der Seite in diesem Moment unterbricht den Ablauf und kostet Umsatz. Der Kunde sieht die neue Summe nach etwa einer Sekunde.
2. Eine ausgeblendete Schutzzeile
Was: Das Schutzprodukt wird in der Artikelliste ausgeblendet, in Upcart und im Warenkorb des Themes. Warum: Eine zweite „Produktzeile“ mit eigenen Mengen-Buttons verwirrt. Die Box zeigt den Status bereits an, und der Preis bleibt Teil der Summe und der Bestellung.
3. Smarte Warenkorb-Regeln
Was: Nach jeder Änderung im Warenkorb laufen automatisch drei Regeln. Warum: Ein Warenkorb darf nie in einem seltsamen Zustand landen, etwa mit Schutz, der allein gekauft wird.
- Nie allein verkauft: Entfernt der Kunde das letzte echte Produkt, wird auch der Schutz entfernt.
- Immer Menge 1: Duplikate oder eine Menge über eins werden korrigiert.
- Respektiert ein Nein: Ist der Auto-Modus aktiv, wird ein Kunde, der den Schutz ausschaltet, während des Besuchs nicht erneut gefragt.
4. Funktioniert mit Upcart und mit dem Theme
Was: Dieselbe Funktion läuft im Upcart-Drawer, im Drawer des Horizon-Themes und auf der vollständigen Warenkorbseite. Warum: Händler wechseln Apps. Die Schutz-Box soll diese Entscheidung ohne Neuentwicklung überstehen.
5. Schlanker Code im eigenen Besitz
Was: Ein kleines Skript und ein Stylesheet, geladen vom Theme. Warum: Keine monatliche Gebühr für eine weitere Schutz-App, kein zusätzliches Drittanbieter-Skript auf jeder Seite, und der Code liegt im eigenen Theme des Händlers.
Alle Optionen, die wir im Theme-Editor ergänzt haben
Alle Einstellungen liegen in einer neuen Gruppe: Onlineshop → Themes → Anpassen → Theme-Einstellungen → Safety package. Der Händler kann alles unten Genannte ohne Entwickler ändern.
| Gruppe | Einstellung | Funktion |
|---|---|---|
| Allgemein | Enable safety package | Schaltet die ganze Funktion ein oder aus |
| Protection product | Das Produkt (und der Preis), das in den Warenkorb gelegt wird | |
| Add automatically to cart | Optionales automatisches Hinzufügen, standardmäßig aus; merkt sich eine Ablehnung | |
| Hide protection product in the item list | Hält den Warenkorb aufgeräumt | |
| Also show on cart page | Zeigt die Box auch auf der Warenkorbseite | |
| Inhalt | Bild, Bildbreite | Eigenes Bild hochladen oder das integrierte Icon mit Karton und Schild nutzen |
| Schildfarbe des Icons | Farbe des Schilds im integrierten Icon | |
| Titel, Beschreibung | Beliebiger Text in jeder Sprache | |
| Preis neben dem Titel | Zeigt den Preis des Schutzes an | |
| Typografie | Titelgröße, Zeichenabstand, Großbuchstaben, Beschreibungsgröße | Passt zur Typografie des Shops |
| Box-Stil | Text- und Hintergrundfarbe, Trennlinie, Rahmenbreite und -farbe, Eckenradius, Innenabstand, Seitenabstand in Upcart | Passt zum Design des Drawers |
| Schalter | Farben für An, Aus und Knopf | Ein Schalter in Markenfarben |
So funktioniert es unter der Haube
Für alle, die selbst Shopify-Shops bauen, die Kurzfassung: Das Theme gibt die Einstellungen als kleinen JSON-Block und ein HTML-Template aus. Das Skript liest sie, wartet, bis Upcart geladen ist, und setzt die Box unter die Produktliste von Upcart. Ein MutationObserver setzt die Box zurück, sobald Upcart neu rendert. Der Schalter ruft die Standard-Endpunkte des Warenkorbs auf und aktualisiert dann den Drawer:
// einschalten
await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: protectionVariantId, quantity: 1 }] }),
});
// Upcart-Drawer mit der neuen Summe neu zeichnen
window.upcartRefreshCart?.();Die Schutzzeile wird über ihre Varianten-ID ausgeblendet, die Upcart in die ID jeder Zeile schreibt. Warenkorb-Anfragen laufen in einer Warteschlange, sodass schnelles mehrfaches Tippen nie zu Konflikten führt.
Tests im Live-Shop
Vor der Übergabe haben wir das Verhalten im echten Shop in einer isolierten Browser-Sitzung getestet, mit einem Platzhalterprodukt, damit keine echte Bestellung entstand:
| Test | Ergebnis |
|---|---|
| Produkt hinzufügen und Drawer öffnen | Die Box erscheint unter dem Artikel, ausgeschaltet |
| Einschalten | Schutz hinzugefügt, Zeile ausgeblendet, Summe aktualisiert |
| Ausschalten | Schutz entfernt, Summe zurück auf den Produktpreis |
| Einschalten, dann das letzte echte Produkt löschen | Schutz automatisch entfernt, Warenkorb leer |
Was der Kunde bekommen hat
- Eine Sicherheitspaket-Box wie in der Vorlage, auf Dänisch, in dem Drawer, den die Kunden tatsächlich sehen.
- Eine Einstellungsgruppe, die in Minuten bearbeitet werden kann: Text, Bild, Farben, Größen und das Preisprodukt.
- Kein neues monatliches App-Abo für die Schutzfunktion.
- Regeln, die jeden Warenkorb gültig halten, und ein Opt-in-Design, das zu den EU-Verbraucherregeln passt.
- Eine einfache Anleitung zum Anlegen des Schutzprodukts und zum Aktivieren der Funktion.
Eigene Funktion oder Schutz-App?
| Schutz-App | Eigener Schalter | |
|---|---|---|
| Monatliche Kosten | Meist ein Abo oder ein Anteil an jeder Gebühr | Einmalige Entwicklung, danach kostenlos im Betrieb |
| Design | Widget der App, begrenzte Gestaltung | Genau Ihr Design, im Theme-Editor eingestellt |
| Warenkorb | Unterstützt nicht jede Drawer-App | Gebaut für Ihren Drawer (hier Upcart) und das Theme |
| Schadenabwicklung | Oft durch den App-Anbieter | Durch den Shop selbst |
| Ideal für | Shops, die Schadenfälle auslagern wollen | Shops, die Kontrolle und ein Markenerlebnis wollen |
Keine Lösung ist immer die richtige. Soll ein Dritter die Schadenfälle übernehmen, ist eine App sinnvoll. Will der Shop Gebühr, Text und Optik selbst bestimmen, ist ein eigener Schalter schlanker und langfristig günstiger.
Was passt noch in Ihren Warenkorb?
Dasselbe Muster (eine Einstellung im Theme-Editor, ein kleines Skript, dahinter ein Produkt oder ein Warenkorb-Attribut) funktioniert für viele weitere Extras, die den Bestellwert erhöhen oder Rückfragen reduzieren:
- Geschenkverpackung als kostenpflichtiges Extra.
- Gratisversand-Fortschrittsleiste, die zu einem weiteren Artikel motiviert.
- Auswahl des Lieferdatums, gespeichert an der Bestellung.
- Erweiterte Garantie pro Produkt.
- Spenden-Aufrundung für einen guten Zweck.
- Gravur und Bestellnotizen mit Validierung.
Häufige Fragen
Funktioniert das mit Upcart?
Ja. Die Box wird im Upcart-Drawer platziert und bleibt synchron, wenn Upcart neu zeichnet. Sie funktioniert auch im Drawer des Themes und auf der Warenkorbseite.
Darf man Schutz in der EU automatisch hinzufügen?
Kostenpflichtige Extras müssen vom Kunden gewählt werden, daher ist der Schalter standardmäßig aus. Das automatische Hinzufügen ist optional; ein Shop, der es aktiviert, sollte sich rechtlich beraten lassen.
Kann der Preis ein Prozentsatz des Warenkorbs sein?
Standardmäßig ist es ein Festpreis am Schutzprodukt. Gestaffelte Preise nach Warenkorbwert sind mit mehreren Varianten und etwas zusätzlicher Logik möglich.
Macht es den Shop langsamer?
Nein. Es ist ein kleines Skript und ein Stylesheet, und Warenkorb-Anfragen laufen nur, wenn der Kunde den Schalter nutzt oder sich der Warenkorb ändert.
Können wir die Texte später ändern?
Ja. Titel, Beschreibung, Bild und Farben sind Theme-Einstellungen und lassen sich in wenigen Minuten ändern, in jeder Sprache.
Das Wichtigste in Kürze
- Den Schutz dort anbieten, wo entschieden wird: im Warenkorb, neben der Summe.
- Opt-in mit klarem Preis, und ein Nein des Kunden respektieren.
- Die technische Produktzeile ausblenden, die Summe ehrlich halten.
- Vor dem Bauen prüfen, welchen Warenkorb der Live-Shop wirklich nutzt.
- Alle Texte, Farben und Größen in den Theme-Editor legen, damit der Händler sie selbst steuert.
Sie möchten so eine Funktion in Ihrem Shop? Wir entwickeln individuelle Warenkorb-Funktionen, Integrationen mit Upcart und Themes sowie komplette Shopify-Entwicklung für Shops in ganz Europa. Sehen Sie sich unsere Leistungen an oder sprechen Sie uns an.