free shipping progress bar Martin Supplieth

Kostenlosen Versandfortschrittsbalken in Shopware 6 integrieren: Schritt-für-Schritt-Anleitung

Einführung: Warum ein Versandfortschrittsbalken?

Ein kostenloser Versand ist für viele Kunden der heilige Gral des Online-Shoppings. Doch wie nutzt du das gezielt? Mit einem Versandfortschrittsbalken zeigst du klar, wie nah die Kunden am kostenlosen Versand sind – ein Anreiz, den Warenkorb zu füllen. In dieser Anleitung erfährst du Schritt für Schritt, wie du diesen Fortschrittsbalken in Shopware 6 integrierst.

Vorteile: Wie steigert der Fortschrittsbalken deinen durchschnittlichen Warenkorbwert?

Erhöhter durchschnittlicher Warenkorbwert: Mehr Artikel, um den kostenlosen Versand zu erreichen, steigern direkt deinen Umsatz.
Bessere Kundenerfahrung: Klare, transparente Informationen schaffen Vertrauen und steigern die Zufriedenheit.
Reduzierte Abbruchrate: Kunden erkennen schnell, wie nah sie am Gratisversand sind, was Kaufabbrüche reduziert.
Gezielte Verkaufsförderung: Bewirb relevante Produkte, um die Versandgrenze attraktiv zu gestalten.

Vorbereitung vor dem Start

Stelle sicher, dass du Folgendes parat hast:

Einen Shopware 6 Shop
Eine Testumgebung (damit dein Live-Shop nicht beeinträchtigt wird)
Ein Child-Theme
Zugang zu deinen Template-Dateien

Alles bereit? Dann los!

4-Schritte-Anleitung

Schritt 1: Versandart einrichten

Damit der Fortschrittsbalken korrekt funktioniert, musst du zunächst die passende Versandart konfigurieren.

Shop -> Versand">

Einstellungen → Shop → Versand (Quelle: Shopware 6.6.9.0 Admin-Bereich)

Gehe zu Einstellungen > Shop > Versand.
Klicke auf die Versandart "Standard" (oder eine andere, falls du sie anders benannt hast).
Unter "Preisregeln" legst du zwei Regeln an:
- 0 € bis 60 €: Versandkosten 4,95 € (Brutto)
- 60 € bis ∞: Versandkosten 0 € (also kostenlos)
Wähle im Bereich "Preismatrix" aus, dass sich die Regel auf den Warenkorbwert bezieht.
Speichere deine Einstellungen.

Preisregeln definieren (Quelle: Shopware 6.6.9.0 Admin-Bereich)

Mit dieser Basis greift dein Fortschrittsbalken später auf den richtigen Wert zu und kann korrekt anzeigen, ab wann der Versand kostenlos ist.

Schritt 2: Übersetzungsdateien anlegen

Für Mehrsprachigkeit: Lege JSON-Dateien für Übersetzungen an.

Datei: `DeinTheme.de-DE.json`

{
  "freeShippingProgress": {
    "heading": "Fortschritt zum kostenlosen Versand",
    "only": "Nur noch",
    "moreToFreeShipping": "bis zum kostenlosen Versand",
    "freeShippingInfo": "Kostenloser Versand innerhalb Deutschlands.",
    "freeShippingAvailable": "Glückwunsch! Sie erhalten kostenlosen Versand innerhalb Deutschlands."
  }
}

Deutsche Übersetzungsdatei

Datei: `DeinTheme.en-GB.json`

{
  "freeShippingProgress": {
    "heading": "Free Shipping Progress",
    "only": "Only",
    "moreToFreeShipping": "more to get free shipping",
    "freeShippingInfo": "Free shipping within Germany.",
    "freeShippingAvailable": "Congratulations! You qualify for free shipping within Germany."
  }
}

Englische Übersetzungsdatei

Speichere die Dateien unter custom/plugins/DeinTheme/src/Resources/snippet/.

Schritt 3: Twig-Datei bearbeiten

Erstelle oder erweitere die offcanvas-cart.html.twig in deinem Child-Theme:

{% sw_extends '@Storefront/storefront/component/checkout/offcanvas-cart.html.twig' %}

{% block component_offcanvas_cart_header %}
    {{ parent() }}
    {% block component_offcanvas_cart_header_free_shipping_progress %}
        {% set delivery = page.cart.deliveries.first %}
        {% if delivery is defined and delivery.shippingMethod is defined and delivery.shippingMethod.prices|length > 0 %}
            {% set shippingMethodPrice = delivery.shippingMethod.prices.first %}
            {% set freeShippingMinimum = shippingMethodPrice.quantityEnd ?? 0 %}
            {% set currentTotalWithoutShipping = page.cart.price.positionPrice %}

            {% if currentTotalWithoutShipping >= 0 and freeShippingMinimum > 0 %}
                {% set amountUntilFreeShipping = freeShippingMinimum - currentTotalWithoutShipping %}
                {% set progress = (currentTotalWithoutShipping / freeShippingMinimum) * 100 %}
                {% set progress = progress > 100 ? 100 : (progress < 0 ? 0 : progress) %}
                {% set cartToken = page.cart.token %}

                <div class="free-shipping-counter text-center mt-2"
                     aria-live="polite"
                     aria-labelledby="free-shipping-header-{{ cartToken }}">

                    <span id="free-shipping-header-{{ cartToken }}" class="visually-hidden">
                        {{ "freeShippingProgress.heading"|trans|sw_sanitize }}
                    </span>

                    {% if amountUntilFreeShipping > 0 %}
                        <p class="free-shipping-counter-text mb-2">
                            {{ "freeShippingProgress.only"|trans|sw_sanitize }}
                            <strong class="free-shipping-counter-amount">
                                {{ amountUntilFreeShipping|currency }}
                            </strong>
                            {{ "freeShippingProgress.moreToFreeShipping"|trans|sw_sanitize }}
                        </p> 
                        <div class="free-shipping-counter-range d-flex align-items-center justify-content-between">
                            <span class="free-shipping-counter-current-total">
                                {{ currentTotalWithoutShipping|currency }}
                            </span>
                            <div class="progress flex-grow-1 mx-2">
                                <div id="progress-bar-{{ cartToken }}"
                                     class="progress-bar progress-bar-striped progress-bar-animated"
                                     role="progressbar"
                                     style="width: {{ progress|round }}%;"
                                     aria-valuemin="0"
                                     aria-valuemax="100"
                                     aria-valuenow="{{ progress|round }}">
                                </div>
                            </div>
                            <span class="free-shipping-counter-minimum-total">
                                {{ freeShippingMinimum|currency }}
                            </span>
                        </div>
                        <p class="free-shipping-counter-info mt-2">
                            {{ "freeShippingProgress.freeShippingInfo"|trans|sw_sanitize }}
                        </p> 
                    {% else %}
                        <div class="free-shipping-counter-alert text-start">
                            {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
                                type: 'success',
                                content: "freeShippingProgress.freeShippingAvailable"|trans|sw_sanitize
                            } %}
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        {% endif %}
    {% endblock %}
{% endblock %}

Überarbeitete Twig-Datei mit verbesserten ARIA-Attributen für Barrierefreiheit.

Schritt 4: Cache leeren & Theme kompilieren

Cache leeren: Einstellungen > System > Cache & Indizes – "Caches leeren"
Theme kompilieren: Inhalte > Themes – Theme auswählen & "Speichern"

Fazit

Mit dieser Anleitung integrierst du einen kostenlosen Versandfortschrittsbalken in deinen Shopware 6 Shop. Du erhöhst den durchschnittlichen Warenkorbwert, verbesserst das Nutzererlebnis und senkst Abbruchraten. Achte dabei stets auf SEO, Performance (z. B. schlanker Code und schnelle Ladezeiten) und Barrierefreiheit (ARIA-Attribute, klare Struktur). Bei Fragen oder Hilfe, kontaktiere mich gern. Viel Erfolg!

Links zum Thema

Wichtig: Diese Anleitung wurde auf Shopware Version 6.6.9.0 getestet. Setze die Schritte auf eigene Gefahr um. Wenn dein Shop plötzlich in Flammen steht – ich wars nicht! 😉