„Noch 12 € bis zum kostenlosen Versand“ kann eine nützliche Orientierung im Warenkorb sein. Damit daraus kein falsches Versprechen wird, muss die Anzeige zur echten Versandregel im Shopify-Checkout passen.
Dieses Snippet bildet für einen festen Euro-Grenzwert ab, welcher Anteil mit dem aktuellen Warenkorbwert erreicht ist. Es ist ein überschaubares Einstiegsbeispiel – keine automatische Ermittlung deiner konfigurierten Versandtarife.
Vorher festlegen: Welche Schwelle gilt?
Nehmen wir an, dein Shop bietet für eine bestimmte Versandzone ab 75 € anrechenbarem Warenwert kostenlosen Standardversand an. Nur wenn das für die betroffene Kundengruppe und den jeweiligen Checkout tatsächlich gilt, solltest du den Grenzwert so kommunizieren.
Shopify stellt den Warenkorbwert unter cart.total_price in der kleinsten Währungseinheit bereit (bei EUR: Cent). Der Betrag berücksichtigt Rabatte, nicht jedoch bereits anfallende Versandkosten. Siehe Shopify Liquid – cart.
Das Liquid-Snippet
Erstelle die Datei snippets/free-shipping-meter.liquid:
{%- comment -%}
snippets/free-shipping-meter.liquid
Beispiel: Grenze 75,00 EUR = 7500 Cent.
Nur nutzen, wenn die Versandregeln des Markts dazu passen.
{%- endcomment -%}
{%- assign threshold = 7500 -%}
{%- assign current = cart.total_price -%}
{%- assign remaining = threshold | minus: current -%}
{%- assign progress = current
| times: 100.0
| divided_by: threshold
| round
-%}
{%- if progress > 100 -%}
{%- assign progress = 100 -%}
{%- endif -%}
<div class="shipping-meter" aria-label="Versandfortschritt">
{%- if remaining > 0 -%}
<p>Nur noch <strong>{{ remaining | money }}</strong>
bis zur Versandkostenfrei-Grenze.</p>
{%- else -%}
<p>Die Warenwert-Schwelle für kostenlosen Versand ist erreicht.
Verfügbarkeit im Checkout prüfen.</p>
{%- endif -%}
<div class="shipping-meter__track"
role="progressbar"
aria-label="Fortschritt zur Versandkostenfrei-Grenze"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="{{ progress }}">
<span style="width: {{ progress }}%"></span>
</div>
</div>Warum rechnen wir mit 7500 statt 75? Shopify verwendet für EUR Centbeträge. Die Liquid-Filter minus, times, divided_by und round berechnen den Restbetrag und den prozentualen Fortschritt; der Filter money zeigt den fehlenden Betrag lesbar an.
Der Fortschritt wird auf 100 % begrenzt. Wenn der Warenkorb die Schwelle übersteigt, wird der Balken nicht breiter als sein Container.
CSS für den Balken
.shipping-meter { padding: 1rem; background: #f2f5f1; }
.shipping-meter p { margin: 0 0 .75rem; line-height: 1.5; }
.shipping-meter__track {
height: .55rem; background: #d8e2d8;
border-radius: 2rem; overflow: hidden;
}
.shipping-meter__track span {
display: block; height: 100%;
border-radius: inherit; background: #307b58;
transition: width .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.shipping-meter__track span { transition: none; }
}Die Anzeige kommt ohne externe Bibliothek aus. Das progressbar-Element macht den Fortschritt zusätzlich für Assistenztechnologien auslesbar.
Im Shopify-Warenkorb einbauen
- Eine Theme-Kopie anlegen.
- Das Snippet und das CSS hinzufügen.
- Die Warenkorb-Section suchen – der Dateiname ist je nach Theme verschieden.
- An der gewünschten Position einfügen:
{% render 'free-shipping-meter' %}In einem klassischen Warenkorb mit Seiten-Neuladen erscheint nach dem nächsten Seitenaufruf der aktualisierte Liquid-Wert.
Wichtig: Ein Cart Drawer aktualisiert sich anders
Viele moderne Themes ändern Mengen im Warenkorb ohne kompletten Seiten-Neuladen. In diesem Fall bleibt reines Liquid nach einer AJAX-Änderung zunächst unverändert.
Für eine korrekt aktualisierte Anzeige muss deine Theme-Logik die betroffene Section nach jeder Cart-Änderung neu rendern oder Daten aus der Shopify Ajax Cart API verwenden. Welche Event-Hooks dafür existieren, ist themespezifisch; ein beliebiger Eventname wie cart:updated funktioniert nicht automatisch in jedem Shop.
Shopify dokumentiert hierfür auch Bundled Section Rendering bei Warenkorb-Aktionen. Damit kannst du aktualisiertes HTML zurückliefern und die Ausgabe gegen die neue ersetzen.
Einschränkungen, die du nicht übersehen solltest
- Versandprofile und Lieferzonen: Unterschiedliche Waren oder Ziele können abweichende Versandpreise ergeben.
- Rabatte: Automatische und manuelle Rabatte verändern den anrechenbaren Betrag.
- Shopify Markets: 7500 ist kein universeller Betrag für alle Währungen; Märkte brauchen passende Grenzwerte und Währungsumrechnung.
- Versandart und Produkte: Sperrgut, digitale Produkte, Abholung oder bestimmte Versandarten können ausgenommen sein.
- Express Checkout: Zeige keine definitive Zusage, wenn der tatsächliche Versandtarif erst beim Checkout ermittelt wird.
So testest du das Snippet
Teste mit einem leeren Warenkorb, knapp unter 75 €, genau bei 75 € und darüber. Danach prüfst du Rabattcodes, Mengenänderungen im Cart Drawer und unterschiedliche Versandziele. Der Checkout ist die maßgebliche Kontrolle, nicht der Balken.
Das Ziel ist nicht künstlicher Kaufdruck, sondern eine verständliche Versandinformation. Wenn du anschließend messen möchtest, ob die Darstellung hilft, findest du weitere Ansätze im Artikel Shopify Conversion Rate optimieren.
War dieser Artikel hilfreich?
Dein Feedback hilft uns, unsere Ratgeber zu verbessern.
Mit Digitalhaus Kunze gearbeitet?
Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.
Auf Google bewerten