Free Shipping Bar Tutorial

AOV um bis zu 10% steigern mit diesem Mini-Cart-Hack

Versandkosten sind eine smarte Lösung, deinen Umsatz pro Kauf zu steigern. Klar, ist sicher nichts Neues für dich, wenn du selbst mit einer Versandkosten-Freigrenze arbeitest.

Problem: Simple Hinweise werden schnell übersehen. Deshalb nutzen wir eine unübersehbare Stelle (Den Mini-Warenkorb), um Nutzer interaktiv drauf hinzuweisen.

Um deine monatlichen Fixkosten als junger Shop schlank zu halten, funktioniert unsere Lösung ohne teure Apps – völlig kostenlos mit ein paar simplen Code-Eingriffen.

Hinweis: Wir nutzen hierfür das kostenlose Dawn-Theme. Für die meisten Themes mit Mini-Warenkorb funktioniert es auch, wenn du die richtige Stelle im Template findest.

1. Snippet mit Namen „free-shipping-bar“ anlegen

Öffne deinen Shopify-Themecode

Lege unter „Snippets“ ein Neues an und speichere dort diesen Code:

<div class="free-shipping-bar-container">
<span class="free-shipping-bar-icon"><svg width="22" height="22" viewbox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" fill="#223267" fill-rule="evenodd" clip-rule="evenodd"><path d="M3 18h-2c-.552 0-1-.448-1-1v-2h15v-9h4.667c1.117 0 1.6.576 1.936 1.107.594.94 1.536 2.432 2.109 3.378.188.312.288.67.288 1.035v4.48c0 1.121-.728 2-2 2h-1c0 1.656-1.344 3-3 3s-3-1.344-3-3h-6c0 1.656-1.344 3-3 3s-3-1.344-3-3zm3-1.2c.662 0 1.2.538 1.2 1.2 0 .662-.538 1.2-1.2 1.2-.662 0-1.2-.538-1.2-1.2 0-.662.538-1.2 1.2-1.2zm12 0c.662 0 1.2.538 1.2 1.2 0 .662-.538 1.2-1.2 1.2-.662 0-1.2-.538-1.2-1.2 0-.662.538-1.2 1.2-1.2zm-4-2.8h-14v-10c0-.552.448-1 1-1h12c.552 0 1 .448 1 1v10zm3-6v3h4.715l-1.427-2.496c-.178-.312-.509-.504-.868-.504h-2.42z"/></svg></span>
0€ <progress max="20000" value="{{ cart.total_price }}"></progress> 200€
<br>{% if cart.items.size == 0 %}Kostenloser Versand ab 200€{% endif %}
{% if cart.items.size != 0 %}{% if cart.total_price >= 20000 %} Glückwunsch! Dein Versand ist nun kostenlos
{% elsif cart.total_price < 20000 %}Noch {{ 20000 | minus: cart.total_price | money }} bis zum kostenlosen Versand{% endif %}{% endif %}
</div>

2. Asset mit CSS Erweiterung mit Namen „free-shipping-bar“ anlegen

Lege dann unter „Assets“ ein Neues als CSS-Datei an.

Speichere darin diesen Code:

.free-shipping-bar-container {
  margin-bottom:10px;
}

.free-shipping-bar-icon {
  margin-right: 10px;
  position: relative;
  top: 7px;
}

progress {
  width: 60%;
  height: 10px;
  border-radius: 10px;
  margin: 0 7px;
  vertical-align: inherit;
}

progress::-moz-progress-bar {
  background: #4c8ecb; /* Hauptfarbe auswählen */ 
}

progress::-webkit-progress-value {
  background: #4c8ecb; /* Hauptfarbe auswählen */ 
  border-radius: 10px;
}

progress::-webkit-progress-bar {
  background: #f7f7f7;
  border-radius: 10px;
}

3. CSS Einbindungscode über schließendem </head> Element eingeben

Gehe nun in deine „theme.liquid“ Datei.

Suche dort (Strg + F) nach </head> und speichere diesen Code genau oberhalb davon:

{{ 'free-shipping-bar.css' | asset_url | stylesheet_tag }}

4. Einbindungscode im Snippet „cart-drawer.liquid“ eingeben

Nun binden wir die Free-Shipping-Bar an der passenden Stelle ein. Wenn du nicht das Dawn-Theme nutzt, sieh dir unser Video an.

Öffne dafür die Snippet-Datei „cart-drawer.liquid“. Vorsicht: Es gibt zwei Dateien, die so heißen. Du brauchst die im Snippet-Ordner.

Für dann unter dem Tag <!– Subtotals –> diesen Code ein und speichere ab.

<div class="free-shipping-bar">{% render 'free-shipping-bar' %}</div>

5. Werte und Farben für deinen Shop anpassen

Sieh dir dazu unser Video an.