Mit ThemeWare® erweiterst du das Flyout deiner Hauptnavigation um bis zu drei Teaser mit Bild, Text und Link. So hebst du im Mega-Menü Aktionen, Themenwelten oder Top-Produkte hervor und führst deine Kunden direkt aus der Navigation zum passenden Ziel.
eine Kategorie in der Hauptnavigation, deren Flyout du mit Teasern erweitern möchtest
ein bis drei Bilder für die Teaser im Shopware-Medienmanager
optional die Zieladressen (Links) für die Teaser
"Theme-Manager" => dein ThemeWare®-Theme => Tab "Header" => Bereich "Top-Navigation Flyout"
Das Feld "Top-Navigation Flyout" bietet mehrere Darstellungen für die Untermenüs (siehe Abschnitt „Weitere Flyout-Modi" unten). Für die Teaser wählst du "ThemeWare® Flyout mit Teasern" und speicherst deine Änderungen.
"Kataloge" => "Kategorien" => Kategorie wählen => Tab "Allgemein" => Bereich "Zusatzfelder" => Zusatzfeld-Set "Flyout (... Pro)"
Pflege je Teaser die folgenden Zusatzfelder (bis zu 3 Teaser stehen zur Verfügung):
Flyout-Teaser 1–3 – Bild – das Teaserbild aus dem Medienmanager
Flyout-Teaser 1–3 – Text – der Text unter dem Bild
Flyout-Teaser 1–3 – Link – die Ziel-URL; der gesamte Teaser ist klickbar
Speichere die Kategorie.
Öffnest du das Flyout der Kategorie in der Hauptnavigation, erscheinen die Teaser nun neben den Unterkategorien. Wird nichts angezeigt, leere einmal den Shopware-Cache.
Über das Feld "Top-Navigation Flyout" bestimmst du generell, wie die Untermenüs deiner Hauptnavigation dargestellt werden – die Teaser sind nur einer von mehreren Modi:
Shopware-Standard – die native Shopware-Navigation (ohne ThemeWare®-Flyout)
ThemeWare® Flyout – das Standard-Flyout mit den Unterkategorien
ThemeWare® Dropdown – die Untermenüs als kompaktes Dropdown
ThemeWare® Flyout mit Karten – zeigt die direkten Unterkategorien als Bildkarten
Unabhängig vom Modus bestimmst du, wie die einzelnen Menüpunkte im Untermenü aussehen.
"Theme-Manager" => dein ThemeWare®-Theme => Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'" => Feld "Stil"
Liste (Shopware 6) – eine Linie links neben den Kategorien
Liste – Pfeile vor den Kategorien
Liste in Spalten (Shopware 5) – die Anordnung aus dem "Erweiterten Menü" von Shopware 5; wirkt nur im Modus "ThemeWare® Flyout"
Buttons – jede Kategorie bekommt eine eigene Fläche mit abgerundeten Ecken
Für das Dropdown gibt es eine eigene Auswahl im Abschnitt "Basiskonfiguration 'ThemeWare® Dropdown'": "Liste", "Buttons (kompakt)" und "Buttons".
Die Farben der Flächen und den Glaseffekt stellst du im selben Bereich im Abschnitt "Farbkonfiguration" ein – über "Hintergrundfarbe (Menüpunkte)" samt @hover und @active sowie "Glaseffekt [px] (Panel)".
Alle Darstellungsarten und Stile mit Beispielbildern findest du im ThemeWare® Handbuch:
Alle Konfigurationsfelder des Flyouts im Detail:
Die Teaser-Zusatzfelder im Detail:
ThemeWare® Flyout mit Sidebar – Flyout mit seitlicher Navigationsleiste
ThemeWare® Flyout mit Teasern – das in dieser Anleitung beschriebene Flyout mit Teasern
ThemeWare® Tipp: Vergib aussagekräftige Alternativtexte im Medienmanager – sie verbessern Zugänglichkeit und SEO. Möchtest du den Flyout-Typ nur für eine einzelne Kategorie abweichend setzen, nutze das Kategorie-Zusatzfeld "Top-Navigation Flyout".
ThemeWare® Tipp: Der Glaseffekt zeichnet den Seiteninhalt hinter dem Untermenü weich. Sichtbar wird er erst, wenn du bei "Hintergrundfarbe (Panel)" eine halbtransparente Farbe wählst – ein Wert von 10 ist ein guter Startpunkt.
