Das Wichtigste auf einen Blick
- Ein Fortschrittsbalken für kostenlosen Versand ist kein natives Shopify-Feature – du benötigst eine App oder Fudge.
- Die “Free Shipping Bar” von Hextom ist eine weit verbreitete, kostenlose App.
- Fortschrittsbalken zeigen Kunden an, wie viel sie noch ausgeben müssen, um sich für den kostenlosen Versand zu qualifizieren.
- Ein effektiver Balken nutzt spezifisches Messaging und aktualisiert sich dynamisch, wenn Artikel zum Warenkorb hinzugefügt werden.
Schwellenwerte für kostenlosen Versand erhöhen den durchschnittlichen Bestellwert (Average Order Value). Ein Fortschrittsbalken macht diesen Schwellenwert sichtbar und verwandelt eine abstrakte Richtlinie in einen Echtzeit-Anreiz. „Noch 12 € bis zum kostenlosen Versand“ bringt Käufer dazu, nach einem weiteren Artikel zu suchen.
Warum du uns vertrauen kannst
Wir haben an Warenkorb-Conversion-Strategien für hunderte von Shopify-Stores gearbeitet. Außerdem haben wir Fudge entwickelt — einen KI-Storefront-Editor mit einer 5.0-Bewertung im Shopify App Store.
Was ist ein Fortschrittsbalken für kostenlosen Versand?
Ein dynamisches Element – meist im Cart Drawer oder auf der Warenkorbseite angezeigt –, das Folgendes darstellt:
- Die Schwelle für kostenlosen Versand (z. B. „Kostenloser Versand ab 50 €“)
- Den aktuellen Warenkorbwert des Käufers
- Einen Fortschrittsbalken, der anzeigt, wie nah sie dem Schwellenwert sind
- Eine Nachricht, die sich beim Hinzufügen von Artikeln aktualisiert („Noch 12 € bis zum kostenlosen Versand“ – „Du hast den kostenlosen Versand freigeschaltet!“)
Gut umgesetzt ist dies eine der Ergänzungen mit dem höchsten ROI für einen Warenkorb. Es kostet den Käufer nichts (er muss lediglich mehr ausgeben) und kann den durchschnittlichen Bestellwert deutlich steigern.
Um die Ergebnisse zu messen, siehe Conversions in Shopify tracken.
Option 1 – Free Shipping Bar von Hextom (beliebteste App)
Dies ist die am häufigsten installierte Free Shipping Bar App im Shopify App Store.
Schritt 1. Gehe in den Shopify App Store und suche nach „Free Shipping Bar by Hextom“.
Schritt 2. Installiere die App.
Schritt 3. Lege in den App-Einstellungen deinen Schwellenwert für kostenlosen Versand fest (dieser muss mit deinem tatsächlichen Versandtarif unter Einstellungen > Versand übereinstimmen).
Schritt 4. Passe den Nachrichtentext an – die App unterstützt dynamische Variablen wie {amount_remaining}, um die genaue Differenz anzuzeigen.
Schritt 5. Wähle den Anzeigeort: seitenweite Announcement Bar, Warenkorbseite, Cart Drawer oder alle Standorte.
Schritt 6. Speichern und Vorschau anzeigen.
Die App ist in der Basisversion mit einem Anzeigeort kostenlos. Kostenpflichtige Tarife bieten zusätzlich Targeting, A/B-Tests und die Anzeige an mehreren Standorten.
Passend dazu: Eine dynamische Free Shipping Bar in Shopify hinzufügen.
Option 2 – Cart Drawer Upsell-Apps mit Fortschrittsbalken
Mehrere Apps zur Warenkorb-Optimierung enthalten einen Fortschrittsbalken für kostenlosen Versand als Teil einer umfassenderen Suite:
Monster Upsells – enthält einen Fortschrittsbalken plus einen Upsell-Bereich im Cart Drawer.
iCart Cart Drawer Cart Upsell – Fortschrittsbalken, Cart-Upsells und Geschenkoptionen in einem Warenkorb-Modul.
Wenn du bereits Cart-Upsells oder Cross-Sells einbaust, lohnt es sich, eine App zu wählen, die beides abdeckt.
Passend dazu: Upsells im Shopify-Warenkorb hinzufügen.
Option 3 – Einen individuellen Fortschrittsbalken mit Fudge erstellen
Für einen Fortschrittsbalken, der nativ in deinem Theme integriert ist – passend zu deinem Brand Style, exakt dort positioniert, wo du ihn haben willst, und ohne App-Abo – kann Fudge diesen programmieren.
Ein individueller Fortschrittsbalken ist ein kleines Stück JavaScript und Liquid, das:
- Den aktuellen Warenkorbwert ausliest
- Ihn mit dem Schwellenwert für kostenlosen Versand vergleicht
- Ein Balkenelement und den Nachrichtentext dynamisch aktualisiert
Beispiel-Prompt für Fudge:
„Füge einen Fortschrittsbalken für kostenlosen Versand zum Cart Drawer hinzu. Der Schwellenwert liegt bei 75 €. Zeige einen Fortschrittsbalken, der sich füllt, wenn der Warenkorbwert steigt. Nachricht: ‚Noch [amount] bis zum kostenlosen Versand‘, wenn unter dem Schwellenwert, ‚Du hast den kostenlosen Versand freigeschaltet!‘, wenn darüber. Gestalte ihn in der grünen Akzentfarbe der Marke.“
Fudge erstellt dies als Entwurf. Überprüfen und veröffentlichen.
Passend dazu: Benutzerdefiniertes JavaScript in Shopify hinzufügen.
Was einen Fortschrittsbalken für kostenlosen Versand effektiv macht
Setze den Schwellenwert strategisch. Der Schwellenwert sollte über deinem durchschnittlichen Bestellwert (AOV) liegen. Wenn dein AOV bei 45 € liegt, setze den kostenlosen Versand bei 60 € an. Zu nah am AOV bewirkt keine Verhaltensänderung. Zu weit weg fühlt es sich unerreichbar an.
Nutze spezifisches Echtzeit-Messaging. „Noch 12,50 € bis zum kostenlosen Versand“ ist weitaus überzeugender als „Kostenloser Versand ab 50 €“. Die konkrete Differenz macht die Handlung greifbar.
Feiere das Freischalten. Wenn der Schwellenwert überschritten wird, zeige eine Glückwunsch-Nachricht („Kostenloser Versand freigeschaltet!“) und eine kleine visuelle Änderung (Balken füllt sich, grüne Farbe). Positive Verstärkung sorgt dafür, dass Käufer mit ihrer Entscheidung zufrieden sind.
Frühzeitig anzeigen. Zeige den Balken auch bei leerem Warenkorb an („Gib 75 € aus für kostenlosen Versand“). Das weckt Erwartungen, bevor der Käufer mit dem Hinzufügen beginnt.
Platzierung testen. Bei vielen Stores erzielt die Anzeige oben im Warenkorb-Drawer (vor den Artikeln) bessere Ergebnisse als eine Platzierung ganz unten.
So fügst du eine Versandkosten-Leiste der gesamten Website hinzu
Viele Stores zeigen eine Versandkosten-Leiste auch als Ankündigungsbanner (Announcement Bar) oben auf jeder Seite an. Dies ist unabhängig vom Fortschrittsbalken im Warenkorb – es ist ein statisches oder semi-dynamisches Banner, das alle Besucher über die Versandbedingungen informiert.
Dies wird über die Ankündigungsleiste im Theme-Editor (falls dein Theme eine hat) oder über eine App gesteuert. Der Fortschrittsbalken im Warenkorb ist ein separates, warenkorbspezifisches Element.
Zum Messen der Ergebnisse siehe Track Conversions in Shopify.