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)

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

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."
  }
}

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

Schritt 4: Cache leeren & Theme kompilieren

1. Cache leeren: Einstellungen > System > Cache & Indizes – "Caches leeren"
2. 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

• Google PageSpeed Insights
• Shopware Dokumentation
• Twig Dokumentation
• Bootstrap Cheatsheet

Bilder und Icons in der Shopware 6 Flyout Navigation: Schritt für Schritt Anleitung

Einführung: Die Bedeutung visueller Hinweise

Visuelle Hinweise sind ein wichtiges Element in Online-Shops. Kunden erkennen Kategorien schneller und navigieren intuitiver, wenn visuelle Elemente wie Bilder und Icons verwendet werden. In diesem Beitrag zeige ich dir Schritt für Schritt, wie du Bilder und Icons in die Flyout Navigation von Shopware 6 integrieren kannst. Zunächst besprechen wir die Vor- und Nachteile, um herauszufinden, ob diese Anpassung für euren Shopware-Shop sinnvoll ist.

Vorteile: Warum Bilder oder Icons in der Navigation?

• Schnellere Erkennung von Kategorien: Menschen erkennen Kategorien schneller durch visuelle Hinweise.
• Emotionale Bindung: Bilder können emotionale Reaktionen hervorrufen, die die Bindung zu eurer Marke stärken.
• Verbesserte Nutzererfahrung: Bilder machen die Navigation einfacher und übersichtlicher.
• Erhöhte Conversion-Rate: Eine verbesserte Nutzererfahrung kann die Conversion-Rate steigern.

Nachteile: Warum du vielleicht doch auf Bilder oder Icons in der Navigation verzichten solltest?

• Performance-Probleme: Große oder zu viele Bilder können die Performance beeinträchtigen.
• Inkonsistenz im Design: Unterschiedliche oder minderwertige Bilder oder Icons können den Stil und das Design des Shops stören.
• Zusätzlicher Aufwand: Die Pflege und Aktualisierung der Bilder/Icons erfordert zusätzlichen Aufwand.

Zusatz-Tipp: Performance im Blick behalten

Bevor es losgeht, mache einen PageSpeed-Test vor den Änderungen und nach den Änderungen, damit du sehen kannst, ob du durch die Änderungen große Nachteile erleidest. Hier geht's zu Google PageSpeed Insights

Vorbereitung vor dem Start

Bevor du loslegst, stelle sicher, dass du folgende Ressourcen und die entsprechende Einrichtung hast:

• Einen Shopware 6 Shop.
• Eine Testumgebung.
• Ein Child-Theme.
• Zugang zu deinen Template-Dateien.
• Die Kategorien sollten ähnlich angeordnet sein wie auf dem Screenshot.


Kategorie Ansicht (Quelle: Shopware 6.5.7.3 Admin-Bereich)

Wenn du an diesem Punkt schon verzweifelst, kontaktiere mich, dann helfe ich dir gerne. Denn ohne diese Voraussetzungen brauchst du hier gar nicht weiterlesen, das wäre tatsächlich in dem Fall Zeitverschwendung.

Du hast alles und bist ready? Nice! Dann ab an die Arbeit.

3-Schritte-Anleitung

Schritt 1: Zusatzfeld anlegen

1. Logge dich in deinen Admin-Bereich ein, meistens “/admin”, also z.B. www.beispiel-shop.de/admin.
2. Gehe links auf “Einstellungen”, dort unter “System” auf “Zusatzfelder”.
   

   Zusatzfelder Einstellung (Quelle: Shopware 6.5.7.3 Admin-Bereich)

3. Klicke oben rechts auf “Set anlegen”.
4. Vergib einen technischen Namen: “categorydata_menu” → In allen Administrationssprachen pflegen → Label z.B. “Kategorie Icon” (DE) und “Category Icon” (EN) → Verwenden für “Kategorien” (wichtig, damit wir das Zusatzfeld im Admin-Bereich an der richtigen Stelle sehen) → Dann auf “Speichern”.
   
   

   Set Anlegen (Quelle: Shopware 6.5.7.3 Admin-Bereich)

5. Jetzt nach unten scrollen und auf “Neues Zusatzfeld” klicken → Typ → “Medienfeld” → Technischer Name “categorydata_menu_image” (wichtig, das muss genauso heißen, da wir diesen Namen dann im späteren Code verwenden) → Position → Kann auf 1 gesetzt werden → Label beschriften z.B. “Icon wählen” (DE) “Select icon” (EN) → “Hinzufügen” → Dann auf “Speichern”.
   

   Zusatzfelder Anlegen (Quelle: Shopware 6.5.7.3 Admin-Bereich)

6. Cache leeren: “Einstellungen” → “System” → Cache & Indizes → “Caches leeren”.
7. Admin-Bereich neu laden und überprüfen, es sollte in den Kategorien unten das Zusatzfeld erscheinen.
   

   Zusatzfeld im Admin-Bereich (Quelle: Shopware 6.5.7.3 Admin-Bereich)

Schritt 2: Twig-Datei bearbeiten

1. Öffne deine Template-Dateien über deine IDE oder im Editor in deinem Child-Theme (ShopwareVerzeichnis/custom/plugins/DeinTheme/). “DeinTheme” sollte dann der Child-Theme Name sein, den du auch im Admin-Bereich unter “Inhalte” → “Themes” findest.
   

   Child Theme Template (Quelle: PhpStorm 2022.3.2)

2. Bearbeite oder erstelle die Datei: custom/plugin/DeinTheme/layout/navigation/flyout.html.twig (Wenn bei dir die Datei schon bearbeitet wurde, überschreibe nur den Block "{% block layout_navigation_flyout_categories %}")
3. Speichern natürlich nicht vergessen.

So sollte die Datei dann aussehen:

{% sw_extends '@Storefront/storefront/layout/navigation/flyout.html.twig' %}

{% block layout_navigation_flyout_categories %}
    {% set mediaIds = [] %}
    {% for child in navigationTree.children %}
        {% for grandchild in child.children %}
            {% if grandchild.category.customFields.categorydata_menu_image is not empty %}
                {% set mediaIds = mediaIds | merge([grandchild.category.customFields.categorydata_menu_image]) %}
            {% endif %}
        {% endfor %}
    {% endfor %}
    {% set mediaCollection = mediaIds is not empty ? searchMedia(mediaIds, context.context) : {} %}

    <div class="{{ category.media ? 'col-8 col-xl-9' : 'col' }}">
        <div class="navigation-flyout-categories row">
            {% for child in navigationTree.children %}
                <div class="col">
                    <ul class="list-unstyled">
                        <li class="navigation-flyout-item">
                            <strong>{{ child.category.translated.name }}</strong>
                        </li>
                        <ul class="list-unstyled">
                            {% for grandchild in child.children %}
                                {% set mediaId = grandchild.category.customFields.categorydata_menu_image %}
                                {% set media = mediaId ? mediaCollection.get(mediaId) : grandchild.category.media %}
                                <li class="navigation-flyout-item">
                                    <a itemprop="url" href="{{ grandchild.category.type == 'link'
                                    ? (grandchild.category.internalLink
                                    ? seoUrl('frontend.navigation.page', { navigationId: grandchild.category.internalLink })
                                    : grandchild.category.externalLink)
                                    : seoUrl('frontend.navigation.page', { navigationId: grandchild.category.id }) }}"
                                       title="{{ grandchild.category.translated.name }}" class="nav-link navigation-flyout-link">
                                        {% if media %}
                                            {% sw_thumbnails 'navigation-flyout-teaser-image-thumbnails' with {
                                                media: media,
                                                sizes: { 'default': '50px' },
                                                attributes: {
                                                    'class': 'navigation-flyout-category-image img-fluid me-3',
                                                    'alt': (media.translated.alt ?: grandchild.category.translated.name),
                                                    'title': (media.translated.title ?: grandchild.category.translated.name),
                                                    'data-object-fit': 'cover',
                                                    'loading': 'eager'
                                                }
                                            } %}
                                        {% endif %}
                                        <span itemprop="name" class="navigation-flyout-category-name">{{ grandchild.category.translated.name }}</span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </ul>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

Was passiert hier?

• Vererbung: Wir erweitern das originale Template von Shopware und überschreibe den Block "layout_navigation_flyout_categories", um die Grundstruktur beizubehalten.
• Bildlogik: Wir prüfen, ob die Kategorie oder das Zusatzfeld ein Bild hat, und wenn ja, wird es angezeigt. Wenn die Kategorie bereits ein Bild hat und ihr das weiter verwenden wollt, aber für das Flyout ein anderes Bild nutzen möchtet, könnt ihr das Zusatzfeld verwenden. Easy peasy!

Schritt 3: Cache leeren und Theme kompilieren

1. Cache leeren: “Einstellungen” → “System” → Cache & Indizes → “Caches leeren”.
2. Theme kompilieren: “Inhalte” → “Themes” → Dein Theme hier auswählen → “Speichern” klicken und anschließend mit “Speichern” bestätigen.

Fazit

Zusammengefasst: Mit dieser Anleitung kannst du ganz einfach Bilder und Icons in die Shopware 6 Flyout Navigation einfügen. Dies verbessert die Nutzererfahrung und kann eure Conversion-Rate steigern. Denke daran, die Performance deines Shops im Auge zu behalten und regelmäßig zu überprüfen. Wenn du Fragen hast oder Unterstützung benötigst, kontaktiere mich gerne. Viel Erfolg!

Links zum Thema

• Google PageSpeed Insights
• Shopware Dokumentation
• Twig Dokumentation
• Bootstrap Cheatsheet