Shopware 6 Flyout Menü Anpassungen

von Der Atilla | Feb. 7, 2026 | Alle, Shopware, Shopware 6, Shopware Design | 0 Kommentare

Das Shopware 6 Flyout Menü ist ein zentrales Element jedes Online-Shops und entscheidet maßgeblich über die Nutzerführung und Conversion-Rate. In diesem umfassenden Guide zeigen wir dir, wie du dein Shopware 6 Flyout Menü professionell anpassen, erweitern und mit Kategorietexten, Bildern und Links optimieren kannst. Du lernst, wie du das Standard-Template erweiterst, Kategorietexte einbindest und ein modernes Mega-Menü mit Superfly-Effekt implementierst. Ob du das Flyout Menü für bessere Usability optimieren oder mit individuellen Inhalten anreichern möchtest – dieser Artikel führt dich Schritt für Schritt durch den gesamten Prozess der Shopware 6 Flyout Menü Anpassung.

1. Grundlagen und Aufbau des Shopware 6 Flyout Menüs
2. Template-Struktur und wichtige Blöcke
3. Kategorietext im Flyout Menü einbinden
4. Text-Kürzung und Formatierung implementieren
5. Überschrift und „Mehr erfahren“ Link hinzufügen
6. Superfly-Option und erweiterte Anpassungen
7. Responsive Optimierung und CSS-Anpassungen
8. Best Practices und Tipps für die Praxis
Quellen und weiterführende Links

Das Shopware 6 Flyout Menü basiert auf dem Template flyout.html.twig und wird automatisch generiert, wenn eine Kategorie Unterkategorien besitzt. Die Standard-Implementierung zeigt dabei die Unterkategorien in einer mehrspaltige Ansicht an. Optional kann ein Teaser-Bild rechts angezeigt werden, wenn der Kategorie ein Media-Element zugeordnet wurde.

Die Architektur des Shopware 6 Flyout Menüs folgt dem Twig-Template-System und nutzt verschiedene Blöcke, die überschrieben werden können. Das ermöglicht eine flexible Anpassung ohne Beeinträchtigung der Core-Funktionalität. Besonders wichtig ist dabei die Verwendung von {% sw_extends %} anstelle von {% extends %}, um die Shopware-spezifische Template-Vererbung zu nutzen.

Hauptkomponenten des Flyout Menüs

Navigation Bar: Enthält den Link zur Hauptkategorie und den Schließen-Button
Kategorien-Bereich: Zeigt die Unterkategorien in einer strukturierten Liste an
Teaser-Bereich: Optional für Bilder und zusätzliche Informationen
Content-Container: Umschließt alle Elemente und ermöglicht Grid-Layout

Für die Anpassung des Shopware 6 Flyout Menüs erstellen wir ein Theme oder Plugin und überschreiben das entsprechende Template. Der Pfad lautet standardmäßig: src/Storefront/Resources/views/storefront/layout/navigation/flyout.html.twig

Shopware 6 Flyout Menü – zurück zur Übersicht

Die Template-Struktur des Shopware 6 Flyout Menüs besteht aus mehreren verschachtelten Blöcken, die jeweils spezifische Funktionen erfüllen. Das Verständnis dieser Struktur ist essentiell für erfolgreiche Anpassungen.

Wichtige Template-Blöcke im Detail

Der Hauptblock layout_navigation_flyout umschließt das gesamte Flyout-Menü. Innerhalb dieses Blocks finden wir:

{% block layout_navigation_flyout %}
    {% set category = navigationTree.category %}
    {% set name = category.translated.name %}
    
    {% block layout_navigation_flyout_bar %}
        {# Navigation Bar mit Kategorie-Link und Close-Button #}
    {% endblock %}
    
    {% block layout_navigation_flyout_content %}
        {# Hauptcontent mit Kategorien und Teaser #}
    {% endblock %}
{% endblock %}

Der Block layout_navigation_flyout_content enthält die eigentliche Content-Struktur mit einem Row-Container für das Grid-Layout. Hier werden die Unterkategorien links und der optionale Teaser rechts positioniert.

Verfügbare Variablen

navigationTree – Enthält die gesamte Navigationsstruktur
category – Die aktuelle Kategorie mit allen Eigenschaften
name – Der übersetzte Name der Kategorie
category.media – Das zugeordnete Teaser-Bild
category.description – Die Kategoriebeschreibung
category.customFields – Eigene Felder für zusätzliche Daten

Diese Variablen ermöglichen es uns, auf alle relevanten Daten der Kategorie zuzugreifen und sie im Shopware 6 Flyout Menü anzuzeigen.

Shopware 6 Flyout Menü – zurück zur Übersicht

Eine der häufigsten Anforderungen bei der Anpassung des Shopware 6 Flyout Menüs ist die Einbindung von Kategorietexten. Diese zusätzlichen Informationen helfen dem Kunden bei der Orientierung und können die Conversion-Rate deutlich steigern.

Schritt 1: Template erweitern

Zunächst erstellen wir ein erweitertes Template in unserem Theme oder Plugin. Der Pfad sollte identisch zum Original sein: src/Resources/views/storefront/layout/navigation/flyout.html.twig

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

{% block layout_navigation_flyout_teaser %}
    {% if category.media or category.description %}
        
            
                {# Teaser-Bild bleibt unverändert #}
                {% block layout_navigation_flyout_teaser_image %}
                    {{ parent() }}
                {% endblock %}
                
                {# Neuer Block für Kategorietext #}
                {% block layout_navigation_flyout_teaser_text %}
                    {% if category.description %}
                        
                            {{ category.description|raw }}
                        
                    {% endif %}
                {% endblock %}
            
        
    {% endif %}
{% endblock %}

Schritt 2: Bedingung anpassen

Wichtig ist die Anpassung der Bedingung für die Teaser-Spalte. Im Standard wird diese nur angezeigt, wenn category.media vorhanden ist. Für unser Shopware 6 Flyout Menü erweitern wir die Bedingung um category.description, damit der Teaser auch ohne Bild erscheint, wenn Text vorhanden ist.

{% if category.media or category.description %}
    {# Teaser wird angezeigt #}
{% endif %}

Die Variable category.description greift auf das Standard-Beschreibungsfeld der Kategorie zu, das über die Shopware-Administration gepflegt werden kann.

Shopware 6 Flyout Menü – zurück zur Übersicht

Lange Kategorietexte können das Layout des Shopware 6 Flyout Menüs sprengen und die Usability beeinträchtigen. Deshalb implementieren wir eine intelligente Text-Kürzung mit CSS und Twig-Filtern.

Twig-Filter für Zeichenbegrenzung

Shopware 6 bietet mit dem u.truncate()-Filter eine elegante Lösung zur Textkürzung:

{{ category.description|striptags|u.truncate(300, '...')|raw }}

Die Filter-Kette funktioniert folgendermaßen:

striptags – Entfernt alle HTML-Tags für saubere Zeichenzählung
u.truncate(300, '...') – Kürzt den Text auf 300 Zeichen und fügt „…“ hinzu
raw – Gibt den Text ohne zusätzliches Escaping aus

CSS für visuelle Zeilenbegrenzung

Zusätzlich zur Zeichenbegrenzung implementieren wir eine CSS-basierte Zeilenbegrenzung für ein konsistentes Layout im Shopware 6 Flyout Menü:

<div class="navigation-flyout-teaser-text" style="display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;">
    {{ category.description|striptags|u.truncate(300, '...')|raw }}
</div>

Diese CSS-Eigenschaften bewirken:

display: -webkit-box – Aktiviert den Flexbox-Modus für Zeilenbegrenzung
-webkit-line-clamp: 4 – Begrenzt die Anzeige auf maximal 4 Zeilen
-webkit-box-orient: vertical – Definiert die vertikale Ausrichtung
overflow: hidden – Versteckt überlaufenden Text

Kombinierte Lösung für optimale Ergebnisse

Die Kombination aus Zeichenbegrenzung (300 Zeichen) und Zeilenbegrenzung (4 Zeilen) stellt sicher, dass das Shopware 6 Flyout Menü auf allen Bildschirmgrößen optimal dargestellt wird. Kurze Texte werden vollständig angezeigt, während lange Texte elegant abgeschnitten werden.

Shopware 6 Flyout Menü – zurück zur Übersicht

Um das Shopware 6 Flyout Menü noch informativer zu gestalten, ergänzen wir eine Überschrift und einen Call-to-Action Link, der zur vollständigen Kategorieseite führt.

Kompletter Teaser-Text Block

Der vollständige Block für den Teaser-Text enthält nun drei Elemente: Überschrift, Beschreibung und Link.

{% block layout_navigation_flyout_teaser_text %}
    <div class="navigation-flyout-teaser-text-container">
        {# Kategorie-Überschrift #}
        {% if name is not empty %}
            <h3 class="navigation-flyout-teaser-title">
                {{ name }}
            </h3>
        {% endif %}
        
        {# Kategorie-Beschreibung #}
        {% if category.description is not empty %}
            <div class="navigation-flyout-teaser-text">
                {{ category.description|striptags|u.truncate(300, '...')|raw }}
            </div>
        {% endif %}
        
        {# Link zur Kategorie #}
        <a class="nav-link navigation-flyout-teaser-link"
           href="{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}"
           itemprop="url"
           title="{{ name }}">
            {{ 'general.toCategory'|trans|sw_sanitize }} {{ name }}
        </a>
    </div>
{% endblock %}

Verwendung von Übersetzungen

Für den Link-Text nutzen wir die Shopware-interne Übersetzungsfunktion trans. Der Snippet general.toCategory wird automatisch in die konfigurierte Shop-Sprache übersetzt. Das macht unser Shopware 6 Flyout Menü mehrsprachfähig ohne zusätzlichen Aufwand.

SEO-optimierte URLs

Die Funktion seoUrl() generiert suchmaschinenfreundliche URLs für die Kategorie. Das Attribut itemprop="url" sorgt für semantisch korrektes HTML und verbessert die Indexierung durch Suchmaschinen.

Styling-Empfehlungen

Verwende h3 für die Überschrift, um die HTML-Hierarchie einzuhalten
Gib der Überschrift eine CSS-Klasse für flexibles Styling
Style den Link als Button oder als Text-Link je nach Design
Achte auf ausreichend Abstand zwischen den Elementen

Shopware 6 Flyout Menü – zurück zur Übersicht

Die Superfly-Option erweitert das Shopware 6 Flyout Menü um zusätzliche visuelle Effekte und Layout-Anpassungen. Diese können über die Theme-Konfiguration aktiviert werden.

Theme-Config Variable definieren

Zunächst erstellen wir eine Theme-Config Variable in der theme.json:

{
  "name": "MeinTheme",
  "author": "great2gether",
  "config": {
    "fields": {
      "g2g-header-flyout-navi-superfly": {
        "label": {
          "de-DE": "Superfly Flyout Navigation aktivieren",
          "en-GB": "Enable Superfly Flyout Navigation"
        },
        "type": "switch",
        "value": false
      }
    }
  }
}

Variable im Template verwenden

Im Template greifen wir auf die Theme-Config Variable zu und fügen eine bedingte CSS-Klasse hinzu:

{% set g2gHeaderFlyoutSuperfly = theme_config('g2g-header-flyout-navi-superfly') %}

{% block layout_navigation_flyout_content %}
    <div class="row navigation-flyout-content {% if g2gHeaderFlyoutSuperfly == 1 %}super-mega-superfly{% endif %}">
        {# Content bleibt unverändert #}
    </div>
{% endblock %}

Spalten-Layout intelligent anpassen

Eine wichtige Optimierung im Shopware 6 Flyout Menü ist die dynamische Anpassung der Spaltenbreiten. Wenn ein Teaser vorhanden ist, sollten die Kategorien schmaler dargestellt werden:

<div class="{% if category.media or category.description %}col-8 col-xl-9 with-flyout-teaser{% else %}col{% endif %}">
    <div class="navigation-flyout-categories">
        {# Kategorien-Liste #}
    </div>
</div>

Die Klasse with-flyout-teaser kann in deinem CSS genutzt werden, um spezifische Styles für Layouts mit Teaser zu definieren. Das ermöglicht ein flexibles Responsive-Design.

Prüfung auf Media UND Description

Wichtig ist die konsequente Verwendung der erweiterten Bedingung {% if category.media or category.description %} an allen relevanten Stellen im Template. So wird der Teaser-Bereich im Shopware 6 Flyout Menü auch dann angezeigt, wenn nur Text, aber kein Bild vorhanden ist.

Shopware 6 Flyout Menü – zurück zur Übersicht

Ein professionelles Shopware 6 Flyout Menü muss auf allen Geräten optimal funktionieren. Hier zeigen wir dir wichtige CSS-Anpassungen für ein responsives Design.

Mobile-First Breakpoints

Die Standard-Shopware-Breakpoints sollten beibehalten werden für konsistentes Verhalten:

/* Tablet und größer */
@media (min-width: 768px) {
    .navigation-flyout-teaser-text-container {
        padding: 1rem;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .navigation-flyout-teaser-title {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
}

Styling für den Teaser-Container

Ein ausgewogenes Styling verbessert die Lesbarkeit und Integration im Shopware 6 Flyout Menü:

.navigation-flyout-teaser-text-container {
    padding: 1rem 0.5rem;
}

.navigation-flyout-teaser-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #000;
}

.navigation-flyout-teaser-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4a5568;
    margin-bottom: 1rem;
    /* Text-Begrenzung bereits im Template definiert */
}

.navigation-flyout-teaser-link {
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.navigation-flyout-teaser-link:hover {
    text-decoration: underline;
}

Optimierung der Ladezeit

Verwende loading="lazy" für Teaser-Bilder
Komprimiere Bilder vor dem Upload in Shopware
Nutze moderne Bildformate wie WebP wenn möglich
Minimiere CSS und JavaScript für das Flyout-Menü

Diese Optimierungen sorgen dafür, dass dein Shopware 6 Flyout Menü auch auf mobilen Geräten mit langsamer Verbindung schnell lädt.

Shopware 6 Flyout Menü – zurück zur Übersicht

Nach der technischen Implementierung des Shopware 6 Flyout Menüs gibt es einige bewährte Praktiken, die du beachten solltest.

Content-Strategie für Kategorietexte

Konsistente Länge: Halte die Texte aller Kategorien in etwa gleich lang für ein harmonisches Layout
SEO-Optimierung: Integriere relevante Keywords natürlich in die Kategorietexte
Call-to-Action: Formuliere Texte handlungsorientiert und überzeugend
Unique Content: Vermeide Duplicate Content zwischen Kategoriebeschreibung und Teaser-Text
Mobile-freundlich: Teste die Texte auf verschiedenen Geräten und passe bei Bedarf an

Template-Entwicklung Best Practices

Bei der Entwicklung deines erweiterten Shopware 6 Flyout Menüs solltest du folgende Punkte beachten:

Verwende immer {% sw_extends %} statt {% extends %}
Überschreibe nur die Blöcke, die du wirklich ändern musst
Nutze {{ parent() }} wo möglich, um Standard-Funktionalität zu erhalten
Kommentiere komplexe Logik ausführlich für spätere Wartung
Teste nach jedem Shopware-Update die Kompatibilität

Performance-Monitoring

Überwache die Performance deines Shopware 6 Flyout Menüs regelmäßig:

// JavaScript für Performance-Tracking
document.querySelectorAll('.navigation-flyout').forEach(flyout => {
    flyout.addEventListener('mouseenter', function() {
        performance.mark('flyout-open-start');
    });
    
    // Nach Animation
    setTimeout(() => {
        performance.mark('flyout-open-end');
        performance.measure('flyout-open', 'flyout-open-start', 'flyout-open-end');
    }, 500);
});

Testing und Quality Assurance

Teste dein Shopware 6 Flyout Menü gründlich vor dem Go-Live:

Browser-Testing: Chrome, Firefox, Safari, Edge
Device-Testing: Desktop, Tablet, Smartphone
Barrierefreiheit: Tastaturnavigation, Screen Reader
Edge Cases: Sehr lange Kategorienamen, viele Unterkategorien, fehlende Bilder
Multi-Language: Alle konfigurierten Shop-Sprachen testen

Häufige Fehler vermeiden

Cache leeren vergessen: Nach Template-Änderungen immer den Shopware-Cache leeren
Falsche Pfade: Achte auf die exakte Verzeichnisstruktur für Template-Overrides
Missing Fallbacks: Immer Fallback-Lösungen für fehlende Daten implementieren
Zu viel Inhalt: Das Flyout-Menü sollte nicht überladen werden
Inkonsistentes Styling: Das Flyout-Menü muss zum Rest des Designs passen