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

Wichtigste Erkenntnisse

• Ein dynamischer 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.
• Er kann zum Cart Drawer, zur Warenkorb-Seite oder als dauerhafte Announcement Bar im gesamten Shop hinzugefügt werden.
• Der Balken benötigt JavaScript, um wirklich dynamisch zu sein – statische Versionen werden nur beim Laden der Seite angezeigt.
• Fudge erstellt dies als native Shopify-Section. Free Shipping Bar Apps wie Hextom bieten No-Code-Optionen.

Um einen dynamischen Free Shipping Bar in Shopify hinzuzufügen, erstelle eine Liquid-Section, die die Warenkorbsumme aus /cart.js ausliest und einen Fortschrittsbalken mit JavaScript aktualisiert, sobald sich der Warenkorb ändert. Eine Nachricht wie “Füge noch für 12,50 € Artikel hinzu, um kostenlosen Versand zu erhalten” ist ein günstiges, effektives Element für einen Shopify-Shop: Es gibt Käufern ein konkretes, sich selbst aktualisierendes Ziel und macht aus zögernden Besuchern Leute, die 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“ bedeutet in diesem Kontext eine Section, deren Anzeige sich basierend auf Live-Daten (der Warenkorbsumme) ohne Neuladen der Seite aktualisiert. Das unterscheidet sich von einer statischen Section, die sich nur aktualisiert, wenn die Seite neu geladen wird.

Die wichtigsten Bestandteile:

1. HTML/Liquid — das Section-Markup und der Anfangszustand
2. Shopify Cart API — liefert die aktuelle Warenkorbsumme im JSON-Format
3. JavaScript — liest die Warenkorbsumme, berechnet den fehlenden Betrag und aktualisiert den Balken
4. CSS — das Styling des Fortschrittsbalkens

Wo Theme-Skripte hingehören, erfährst du unter Eigenes 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 cents
    var progressEl = document.getElementById('shipping-bar-progress')
    var messageEl = document.getElementById('shipping-bar-message')

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

        if (remaining <= 0) {
            // Free shipping achieved
            progressEl.style.width = '100%'
            messageEl.textContent = 'You have free shipping!'
            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 = 'Add $' + remainingFormatted + ' more for free shipping'
        }
    }

    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)
            })
    }

    // Initial load
    fetchCart()

    // Listen for cart updates (for stores using Shopify's cart drawer events)
    document.addEventListener('cart:updated', fetchCart)

    // Some themes dispatch change:cart instead
    document.addEventListener('change:cart', fetchCart)
})()

Hinweis: Themes kündigen Warenkorb-Änderungen unterschiedlich an. Dawn veröffentlicht PUB_SUB_EVENTS.cartUpdate über seine pubsub.js, rufe also bei Dawn stattdessen subscribe(PUB_SUB_EVENTS.cartUpdate, fetchCart) auf; andere senden DOM-Events wie cart:updated. Überprüfe das JavaScript deines Themes, um herauszufinden, welches es verwendet.

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 das JavaScript selbst zu implementieren, kannst du das gesamte Feature einfach Fudge beschreiben, dem KI-Operator für Shopify-Shops:

“Füge meinem Cart Drawer einen dynamischen Free Shipping Bar hinzu. Er soll einen Fortschrittsbalken zeigen, der sich füllt, wenn die Warenkorbsumme in Richtung des 75-Dollar-Schwellenwerts für kostenlosen Versand steigt. Wenn der Schwellenwert erreicht ist, zeige die Nachricht ‘Du hast den kostenlosen Versand freigeschaltet!’ an. Der Balken soll sich sofort aktualisieren, wenn Artikel hinzugefügt werden, ohne dass die Seite neu geladen wird.”

Fudge generiert die komplette Section — HTML, JavaScript, CSS und das Schema — als Entwurf für dich zur Überprüfung. Der Schwellenwert ist im Theme-Editor konfigurierbar, ohne den Code anzufassen. Sobald der Balken live ist, vergleicht Fudge den durchschnittlichen Bestellwert (Average Order Value) vor und nach dem Live-Gang. Free-Shipping-Ziele stehen bei Fudges Merchandising-Arbeit neben Bundles, Upsells und Free Gifts. Deine Angebote zur Warenkorb-Wertsteigerung werden also an einem Ort verwaltet statt in jeweils einer eigenen App.

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. Bietet einen kostenlosen Tarif. Beinhaltet die Platzierung als Announcement Bar und einen einfachen Fortschrittsbalken.

Monster Upsells — beinhaltet einen Shipping Bar innerhalb eines umfassenderen Upsell-Toolkits.

Gift with Purchase-Apps beinhalten oft einen Shipping Bar als Teil ihrer Warenkorb-Incentive-Logik. Wenn das Geschenk selbst das Ziel ist, siehe Wie man in Shopify ein kostenloses Geschenk zum Kauf anbietet.

App-Nachteile (Tradeoffs): Schneller einzurichten, fügt deinem Shop aber externe Skripte hinzu und bietet weniger Design-Flexibilität als nativer Code.

Für andere Warenkorb-Angebote, siehe Upsells im Shopify-Warenkorb hinzufügen.

FAQ