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

Das Wichtigste in Kürze

• Eine dynamische Free Shipping Bar liest den aktuellen Warenkorbwert über die Shopify Cart API aus und aktualisiert den Fortschrittsbalken in Echtzeit, sobald Artikel hinzugefügt oder entfernt werden.
• Sie kann in den Cart Drawer, auf der Warenkorbseite oder als durchgehende Announcement Bar im gesamten Shop eingefügt werden.
• Der Balken erfordert JavaScript, um wirklich dynamisch zu sein – statische Versionen werden nur beim Laden der Seite angezeigt.
• Fudge erstellt dies als native Shopify Section. Apps wie „Gift with Purchase“ oder spezielle Shipping Bar Apps bieten No-Code-Alternativen.

“Füge noch 12,50 $ hinzu für kostenlosen Versand.” Diese simple Nachricht, die dynamisch angezeigt wird, sobald sich der Warenkorbwert ändert, ist eines der Elemente mit dem höchsten ROI, die du zu einem Shopify-Store hinzufügen kannst. 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:

1. HTML/Liquid — das Markup des Abschnitts und der Anfangszustand
2. Shopify Cart API — liefert die aktuelle Warenkorbsumme als JSON
3. JavaScript — liest die Warenkorbsumme aus, berechnet den verbleibenden Betrag und aktualisiert den Balken
4. 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.

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.