Key Takeaways

Ein dynamischer Gratisversand-Balken 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 im Cart Drawer, auf der Warenkorbseite oder als persistente Ankündigungsleiste 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 nativen Shopify-Section. Apps wie „Gift with Purchase“ oder „Shipping Bar“-Apps bieten No-Code-Optionen.

„Fügen Sie noch 12,50 € hinzu, um kostenlosen Versand zu erhalten.“ Diese eine Nachricht, die dynamisch angezeigt wird, wenn sich der Warenkorbwert ändert, ist eines der Elemente mit dem höchsten ROI, die Sie einem Shopify-Shop hinzufügen können. Sie gibt Käufern ein konkretes, sich selbst aktualisierendes Ziel – und verwandelt zögernde Besucher in Kunden, 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

Ein „dynamischer Abschnitt“ bedeutet in diesem Zusammenhang ein Bereich, dessen Anzeige basierend auf Live-Daten (der Warenkorbsumme) aktualisiert wird, ohne dass die Seite neu geladen werden muss. Dies unterscheidet sich von einem statischen Abschnitt, der sich nur beim Refresh der Seite aktualisiert.

Die Hauptbestandteile:

HTML/Liquid — das Markup des Abschnitts und der Anfangszustand
Shopify Cart API — liefert die aktuelle Warenkorbsumme als JSON
JavaScript — liest die Warenkorbsumme aus, berechnet den verbleibenden Betrag und aktualisiert den Balken
CSS — styles für die Progress Bar

Passend dazu: So fügen Sie benutzerdefiniertes JavaScript in Shopify hinzu (2026).

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) {
      // Gratisversand erreicht
      progressEl.style.width = '100%';
      messageEl.textContent = 'Sie haben 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 = 'Noch ' + remainingFormatted + ' € bis zum 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: Warenkorb konnte nicht geladen werden', err);
      });
  }

  // Initialer Ladevorgang
  fetchCart();

  // Auf Warenkorb-Updates reagieren (für Shops, die Shopify Cart Drawer Events nutzen)
  document.addEventListener('cart:updated', fetchCart);

  // Auch auf das Standard-Shopify-Event für Warenkorbänderungen 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 Ihr Theme einen anderen Event-Namen verwendet, prüfen Sie das JavaScript Ihres Themes auf das entsprechende Event.

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 effektivste Platzierung – Kunden sehen den Balken genau in dem Moment, in dem sie ihren Warenkorb prüfen. Fügen Sie das Section-Snippet in Ihr Cart-Drawer-Template ein.

Warenkorbseite (/cart). Dieselbe Logik wie beim Drawer, aber für Kunden, die direkt zur Warenkorbseite navigieren.

Ankündigungsleiste / Header (shopweit). Zeigt den Schwellenwert bereits an, bevor Besucher den Warenkorb erreichen – das kann motivieren, direkt von der Produktseite aus Artikel hinzuzufügen. Geringerer Echtzeit-Effekt, da er auf jeder Seite erscheint.

Produktseiten. Die Anzeige „Noch X € bis zum kostenlosen Versand“ direkt auf Produktseiten, in der Nähe des Add-to-Cart-Buttons, kann ein starker Motivator sein. Erfordert, dass das JavaScript weiterhin die Warenkorbdaten abruft.

Erstellen Sie einen dynamischen Gratisversand-Balken, indem Sie ihn Fudge beschreiben.

Try Fudge for Free

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 meistinstallierten Shopify-Apps für dieses Feature. Kostenlose Version verfügbar. Beinhaltet die Platzierung in der Announcement-Bar und eine einfache Progress Bar.

Monster Upsells — enthält einen Shipping Bar innerhalb eines größeren Upsell-Toolkits.

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

App-Abwägung: schneller einzurichten, fügt jedoch externe Skripte zu deinem Store hinzu und bietet weniger Design-Flexibilität als nativer Code.