So fügen Sie einen dynamischen Gratisversand-Balken in Shopify hinzu (2026)

Das Wichtigste in Kürze

• Eine dynamische Leiste für kostenlosen Versand (Free Shipping Bar) liest die aktuelle Warenkorbsumme über die Shopify Cart API aus und aktualisiert den Fortschrittsbalken in Echtzeit, wenn Artikel hinzugefügt oder entfernt werden.
• Sie kann im Cart Drawer, auf der Warenkorbseite oder als dauerhafte Announcement Bar im gesamten Shop hinzugefügt werden.
• Die Leiste erfordert JavaScript, um wirklich dynamisch zu sein – statische Versionen werden nur beim Laden der Seite angezeigt.
• Fudge erstellt dies als native Shopify-Section. Apps für “Gift with Purchase” oder “Shipping Bar” bieten No-Code-Optionen.

“Füge noch für 12,50 $ Artikel hinzu, um kostenlosen Versand zu erhalten.” Diese einzelne Nachricht, die dynamisch angezeigt wird, während sich der Warenkorbwert ändert, ist eines der Elemente mit dem höchsten ROI, das du einem Shopify-Shop hinzufügen kannst. Sie gibt Käufern ein konkretes, sich selbst aktualisierendes Ziel – und verwandelt zögernde Besucher in Käufer, die aktiv versuchen, den Schwellenwert zu erreichen.

Wie füge ich einen Gratisversand-Balken in Shopify hinzu?

Es gibt drei Ansätze: eine dedizierte App, die Erstellung mit Fudge oder die manuelle Implementierung mit der Cart API. Die richtige Wahl hängt davon ab, wie viel Kontrolle Sie über Design und Platzierung benötigen.

So erstellen Sie eine dynamische Section in Shopify

Eine „dynamische Section“ in diesem Kontext bedeutet eine Section, deren Anzeige basierend auf Live-Daten (der Warenkorbsumme) ohne Neuladen der Seite aktualisiert wird. Dies unterscheidet sich von einer statischen Section, die sich nur beim Aktualisieren der Seite ändert.

Die wichtigsten Bestandteile:

1. HTML/Liquid — das Section-Markup und der Anfangszustand
2. Shopify Cart API — liefert die aktuelle Warenkorbsumme als JSON
3. JavaScript — liest die Warenkorbsumme, berechnet den verbleibenden Betrag und aktualisiert den Balken
4. CSS — stylt den Fortschrittsbalken

Verwandt: Benutzerdefiniertes JavaScript in Shopify hinzufügen.

Die vollständige Implementierung

HTML-Struktur (in einer Liquid-Section-Datei)

{% assign free_shipping_threshold = section.settings.threshold | times: 100 %}

<div class="free-shipping-bar" data-threshold="{{ free_shipping_threshold }}">
  <div class="free-shipping-bar__track">
    <div class="free-shipping-bar__progress" id="shipping-bar-progress"></div>
  </div>
  <p class="free-shipping-bar__message" id="shipping-bar-message">
    Wird geladen...
  </p>
</div>

JavaScript – Cart API Integration

;(function () {
    var bar = document.querySelector('.free-shipping-bar')
    if (!bar) return

    var threshold = parseInt(bar.dataset.threshold, 10) // in Cent
    var progressEl = document.getElementById('shipping-bar-progress')
    var messageEl = document.getElementById('shipping-bar-message')

    function updateBar(cartTotal) {
        var remaining = threshold - cartTotal

        if (remaining <= 0) {
            // Kostenloser Versand erreicht
            progressEl.style.width = '100%'
            messageEl.textContent = 'Du hast kostenlosen Versand!'
            messageEl.classList.add('free-shipping-bar__message--achieved')
        } else {
            var percent = Math.min((cartTotal / threshold) * 100, 100)
            progressEl.style.width = percent + '%'

            var remainingFormatted = (remaining / 100).toFixed(2)
            messageEl.textContent = 'Füge noch ' + remainingFormatted + ' € hinzu für kostenlosen Versand'
        }
    }

    function fetchCart() {
        fetch('/cart.js')
            .then(function (response) {
                return response.json()
            })
            .then(function (cart) {
                updateBar(cart.total_price)
            })
            .catch(function (err) {
                console.error('Shipping bar: could not fetch cart', err)
            })
    }

    // Initiales Laden
    fetchCart()

    // Auf Warenkorb-Updates hören (für Stores, die Shopifys Cart-Drawer-Events nutzen)
    document.addEventListener('cart:updated', fetchCart)

    // Auch auf das Standard-Warenkorb-Änderungsevent von Shopify hören
    document.addEventListener('change:cart', fetchCart)
})()

Hinweis: Die Events cart:updated und change:cart werden von vielen Shopify-Themes (einschließlich Dawn) ausgelöst, wenn sich der Warenkorb ändert. Wenn dein Theme einen anderen Event-Namen verwendet, überprüfe das JavaScript deines Themes auf das ausgelöste Event zur Warenkorbaktualisierung.

CSS

.free-shipping-bar {
    padding: 10px 16px;
    text-align: center;
    background: #f5f5f5;
}

.free-shipping-bar__track {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 8px;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    overflow: hidden;
}

.free-shipping-bar__progress {
    height: 100%;
    background: #000;
    border-radius: 3px;
    transition: width 0.4s ease;
    width: 0;
}

.free-shipping-bar__message {
    font-size: 13px;
    margin: 0;
}

.free-shipping-bar__message--achieved {
    color: #2a7a2a;
    font-weight: bold;
}

Schema (für Theme Editor Einstellungen)

{% schema %}
{
  "name": "Gratisversand-Balken",
  "settings": [
    {
      "type": "range",
      "id": "threshold",
      "label": "Schwellenwert für Gratisversand (€)",
      "min": 10,
      "max": 200,
      "step": 5,
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "Gratisversand-Balken"
    }
  ]
}
{% endschema %}

Wo man den Gratisversand-Balken platziert

Cart Drawer. Die wirkungsvollste Platzierung – Kunden sehen die Leiste genau in dem Moment, in dem sie ihren Warenkorb überprüfen. Füge das Section-Snippet in dein Cart-Drawer-Template ein.

Warenkorbseite (/cart). Die gleiche Logik wie beim Drawer, jedoch für Kunden, die direkt zur Warenkorbseite navigieren.

Announcement Bar / Header (seitenweit). Zeigt Besuchern den Schwellenwert, bevor sie den Warenkorb erreichen – kann sie motivieren, Artikel von der Produktseite hinzuzufügen. Weniger Echtzeit-Wirkung, da sie auf jeder Seite angezeigt wird. Wenn du den Schwellenwert mit einem zeitlich begrenzten Angebot kombinierst, funktioniert ein ohne App erstelltes Countdown-Banner an dieser Stelle auf dieselbe Weise.

Produktseiten. Die Anzeige “Dir fehlen noch X $ bis zum kostenlosen Versand” direkt auf Produktseiten in der Nähe des In-den-Warenkorb-Buttons (ATC-Button) kann ein starker Motivator sein. Erfordert, dass JavaScript weiterhin die Warenkorbdaten abruft.

Fudge verwenden, um den Shipping-Balken zu bauen

Anstatt die Cart API und JavaScript selbst zu implementieren, beschreiben Sie das gesamte Feature einfach Fudge:

„Füge einen dynamischen Gratisversand-Fortschrittsbalken zu meinem Cart Drawer hinzu. Er soll einen Balken anzeigen, der sich füllt, wenn die Warenkorbsumme in Richtung der 75 €-Grenze steigt. Wenn der Schwellenwert erreicht ist, zeige die Nachricht ‘Du hast den kostenlosen Versand freigeschaltet!’. Der Balken soll sich sofort aktualisieren, wenn Artikel hinzugefügt werden, ohne die Seite neu zu laden.“

Fudge generiert die komplette Section – HTML, JavaScript, CSS und Schema – als Entwurf für Ihre Überprüfung. Der Schwellenwert ist im Theme Editor konfigurierbar, ohne den Code anzufassen.

App-Optionen für Gratisversand-Balken

Wenn du eine No-Code-Option bevorzugst, ohne die Cart API selbst zu implementieren:

Hextom Free Shipping Bar – eine der am häufigsten installierten Shopify-Apps für dieses Feature. Kostenlose Version verfügbar. Umfasst Announcement-Bar-Platzierung und eine einfache Progress Bar.

Monster Upsells – beinhaltet eine Shipping Bar innerhalb eines größeren Upsell-Toolkits.

Gift with Purchase-Apps enthalten oft eine Shipping Bar als Teil ihrer Cart-Incentive-Logik.

Kompromisse bei Apps: Schneller eingerichtet, fügt deinem Store aber externe Skripte hinzu und bietet weniger Design-Flexibilität als nativer Code.

FAQ

Verwandt: Upsells im Shopify-Warenkorb hinzufügen.

Verwandt: Einen Fortschrittsbalken für kostenlosen Versand in Shopify hinzufügen.