Flyout Navigation
Die Flyout-Navigation ist das Megamenü in Shopware 6, welches beim Überfahren der Kategorien die Unterkategorien darstellt.
Last updated
Die Flyout-Navigation ist das Megamenü in Shopware 6, welches beim Überfahren der Kategorien die Unterkategorien darstellt.
Last updated
Aktiviere die Flyout Navigation unter Header > Main Navigation > Grundeinstellungen > Unternavigation Aussehen
Die Hintergrundfarbe (1) des Flyout-Menüs kann auch eine teiltransparente Farbe sein. Über den Colorpicker kann die Sichtbarkeit im Alpha-Kanal hinterlegt werden.
Textfarbe (2) und Text:hover-Farbe (3) müssen nicht unterschiedlich sein. Beim Überfahren mit der Maus rücken die einzelnen Einträge ein paar Pixel zur Seite.
Über Volle Breite (1) stellst Du ein, ob das Menü die volle Breite des Themes ausnutzen soll. Über Flyout Header Zeile (2) kann der Bereich "Zur Kategorie XY >" ausgeblendet werden, um ein ablenkungsfreies Design zu kreieren. Verschiedene wählbare Animationen (5) runden das Konzept ab.
Das Kategoriebild kann über Flyout-Teaser (3) global ein oder ausgeschaltet werden. Oft wünscht man sich das Kategoriebild als Kategoriebild im Header der Folgekategorie, möchte dieses aber nicht in der Flyout-Navigation darstellen.
Icon bei externen Links (4) zeigt das bekannte "Externer Link" Icon bei Kategorien des Typs "Link" an, wenn dieser durch den Haken "In neuem Tab öffnen" als externer Link eingestellt wurde. Damit wissen Deine Besucher ganz genau, was passiert, wenn sie auf einen solches Link klicken, siehe Beispiel 2.
Der Gruppierungsrahmen links (6) hilft bei vielen Unterkategorien eine Abgrenzung der Spalten hervorzuheben, siehe Beispiel 3.
Die Navigations-Ebenen (7) geben an, wie viele Ebenen des Kategoriebaums dargestellt werden sollen. Gezählt wird ab der Hauptkategorien-Ebene.
Achtung: In den Einstellungen des Sales-Channels muss die Anzahl der Hauptnavigations-Ebenen mindestens so hoch sein wie hier angegeben.
Diese Einstellung behebt die Shopware Bugs NEXT-9461 und NEXT-13203.
Spalten (8) gibt an, auf wie viele Spalten die Menüpunkte im Flyout-Menü angeordnet werden sollen.
Über die Dynamische Spaltenfüllung (9) werden die Spalten auf Grund ihres verfügbaren Platzes aufgebaut. So können in einer Spalte auch mehrere Oberkategorien Platz finden.
Kategorie 1 Unterkategorie Unterkategorie Unterkategorie Kategorie 2 Kategorie 3
Kategorie 4 Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie
Kategorie 5 Unterkategorie Unterkategorie Kategorie 6 Unterkategorie Unterkategorie Unterkategorie
Aktivierst Du die Option Inhalte scrollbar (10) definiert Du mit der Maximale Höhe (11) die Begrenzung des Flyouts und die Darstellug der Scrollleisten. Damit kannst Du sicherstellen, dass Deine Kunden alle Navigationspunkte auch bei umfangreicheren Navigationen komfortabel erreichen können - auch wenn der Header Sticky ist.
Kategoriebilder von Unterkategorien anzeigen (1) aktiviert die Kategoriebilder global für Unterkategorien deiner ersten Haupt-Navigationsebene in der Flyout-Navigation. Als Bild wird das zugewiesene Kategorie-Bild verwendet.
In den Zusatzfeldern der Kategorie kannst Du diese Einstellung je Kategorie umstellen. Zusätzlich kannst Du ein alternatives Kategorie-Bild hinterlegen, wenn Du nicht das eigentliche Kategorie-Bild anzeigen möchtest.
Du kannst das Aussehen (2) auf "Text unter Bild" oder "Text neben Bild" stellen.
Du kannst die Hintergrundfarbe (3 und 4) und die Textfarbe (5 und 6) der Kachel des Kategoriebildes konfigurieren.
Zusätzlich kannst Du einen Rahmen (7 und 8) und einen Schlagschatten (9 und 10) einstellen.
Die Maximale Bildhöhe (11) bestimmt die maximale Höhe der Kacheln. Das sorgt dafür, dass die Kacheln auch bei unterschiedlichen Bildformaten immer in einer einheitlichen Größe angezeigt werden.
Mit dem Anzeigemodus (12) entscheidest Du, wie das Bild dargestellt werden soll:
Original: Das Bild wird in der Originalgröße der Bilddatei ausgespielt.
Zugeschnitten: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
Feste Höhe: Das Bild wird gestreckt und auf die Größe des Containers angepasst. Es wird hierbei nicht beschnitten.
Die Vertikale Bildausrichtung (13) legt fest, wie sich das Bild vertikal am Container orientiert.
Die Horizontale Bildausrichtung (14) legt fest, wie sich das Bild horizontal am Container orientiert.
Mit dem Seitenverhältnis (15) stellst Du ein, ob die Kacheln im Hoch- oder Querformat angezeigt werden.
Der Innenabstand (16) legt fest, wieviel Abstand zwischen dem Inhalt der Kachel zum Rand dargestellt wird.
Du kannst eine Hover-Animation (17) einstellen. Dabei kannst Du zwischen "Keine" und "Bildzoom" wählen.
Beispiel:
Über die Einstellung im Block Elemente kannst Du die einzelnen Einträge der Flyout-Navigation formatieren.
Beispiel 1:
Die Hintergrundfarbe kann auch transparent sein. Mit der kleinen rgba-Funktion kann zusätzlich zur Farbe eine Sichtbarkeit angegeben werden.
rgba($sw-color-brand-primary, 90%)
Beispiel 2:
Beispiel 3:
ab Theme Version 4.7.0
Über die Zusatzfelder unter Kataloge > Kategorien > [Kategorie auswählen] im Tab "Weitere" findest Du ein Medienfeld Kategorie Icon zum Hinterlegen des Kategorie Icons.
Über die Checkbox Icon (1) aktivierst Du die Darstellung der Icons im Hauptmenü und stellst die Größe (2) der Icons für das jeweilige Menü ein.
Beispiel:
