Top-Navigation Flyout
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Shopware-Standard
• ThemeWare® Flyout
• ThemeWare® Dropdown*
• ThemeWare® Flyout mit Karten
• ThemeWare® Flyout mit Sidebar
• ThemeWare® Flyout mit Teasern
Beispiel Wert:ThemeWare® Flyout
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout"
Technischer Name:twt-nav-main-flyout
Wähle, wie die Untermenüs der Top-Navigation dargestellt werden.
Jede Kategorie kann diese globale Einstellung über das Kategorie-Zusatzfeld "Top-Navigation Flyout" individuell übersteuern.
ThemeWare® Dropdown
ThemeWare® Flyout mit Karten
ThemeWare® Flyout mit Sidebar
ThemeWare® Flyout mit Teasern
*) Hinweis: Derzeit nicht im "Full-Width Sticky-Header" verfügbar.
Hinweis: In der Darstellungsart "ThemeWare® Flyout mit Karten" werden Kategorien vom Typ "Ordner" nicht angezeigt, weil jede Karte ein Ziel benötigt.
Design
Flyout
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Liste
• Liste (Shopware 6)
• Liste in Spalten (Shopware 5)
• Buttons
Beispiel Wert:Liste
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Design"
Technischer Name:twt-nav-main-flyout-design
Wähle das Design des Flyouts aus.
Liste (Shopware 6): Eine Linie links neben den Kategorien sorgt für eine klare Struktur im Flyout.
Liste: Statt der Linie von Shopware 6 werden – wie in ThemeWare® für Shopware 5 – Pfeile vor den Kategorien dargestellt.
Liste in Spalten (Shopware 5): Die Kategorien werden wie im Flyout von Shopware 5 in Spalten angeordnet, die Links behalten die Pfeile vom Design "Liste". Das Design wirkt nur im Flyout – "Flyout mit Karten", "Flyout mit Sidebar" und "Flyout mit Teasern" behalten das Design "Liste".
Buttons: Jede Kategorie erhält eine eigene Fläche mit abgerundeten Ecken. Die Farben der Flächen legst du im Bereich "Farben" fest.
Hinweis: Das Shopware 5 Layout wird nicht empfohlen wenn die Anzahl der Unterkategorien stark schwankt.
Dropdown-Navigation
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Liste
• Buttons
• Buttons (kompakt)
Beispiel Wert:Buttons (kompakt)
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Design"
Technischer Name:twt-nav-main-dropdown-design
Wähle das Design der Dropdown-Navigation aus.
Liste: Reiner Text ohne Flächen und ohne Trennlinien. Der Pfeil an Menüpunkten mit Unterkategorien bleibt.
Buttons (kompakt): Jeder Menüpunkt ist eine Fläche über die volle Breite der Karte, getrennt durch Linien.
Buttons: Die Karte erhält einen Innenabstand, die Menüpunkte werden zu eingerückten Flächen mit abgerundeten Ecken.
Beta: Die Funktion kann sich in einem kommenden Update nochmal ändern, teste sie aber gerne schon einmal und sende uns dein Feedback.
Basiskonfiguration
Animation
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• keine Animation (Standard)
• Einblenden
• Einblenden von unten
• Federn von unten
• Einblenden von oben
• Federn von oben
• Aufklappen (3D) #beta
Beispiel Wert:Einblenden
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration"
Technischer Name:twt-nav-main-flyout-animation
Hauptnavigations-Ebenen
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• 1 Ebene
• 2 Ebenen
• 3 Ebenen (Standard)
• 4 Ebenen
• 5 Ebenen
Beispiel Wert:3 Ebenen
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration"
Technischer Name:twt-nav-main-max-depth
Maximale Anzahl an Kategorieebenen, die in der Navigation gerendert werden (wirkt in den Modi "ThemeWare® Flyout", "ThemeWare® Dropdown" und "ThemeWare® Flyout mit Sidebar").
Wird maximal bis zu den "Hauptnavigations-Ebenen" des Sales-Channels gerendert (Admin → Verkaufskanäle → [Kanal] → Navigation), tiefere Kategorien werden nicht in die Storefront geladen.
Basiskonfiguration 'ThemeWare® Flyout'
Größenmodus
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Container-Max-Width (Full-width Boxed)
• 100% (Full-width)
• Boxed
• Individuelle Breite
Beispiel Wert:Container-Max-Width (Full-width Boxed)
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'"
Technischer Name:twt-nav-main-flyout-sizing-mode
Wähle, ob das Flyout die Containerbreite oder die volle Seitenbreite nutzt.
Individuelle Breite
Feldtyp:
Textfeld
Beispiel Wert:100%
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'"
Technischer Name:twt-nav-main-flyout-width
Lege die Breite für das Flyout fest.
Standard: 100%
Ein Wert ungleich 100% wird als max-width genutzt. Das Flyout erstreckt sich in diesem Fall über die volle Breite wird jedoch nicht größer als der gewählte Wert.
Beispiel: 1080px
Schlagschatten
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• kein Schatten
• Kleiner Schatten
• Normaler Schatten
• Größerer Schatten
• Weicher Schatten (ThemeWare®)
Beispiel Wert:Weicher Schatten (ThemeWare®)
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'"
Technischer Name:twt-nav-main-flyout-box-shadow-type
Schlagschatten der Flyout-Fläche.
Die abgestuften Schatten entsprechen denen der Dropdown-Navigation, sind oben aber zusammengezogen, damit über der Navigationsleiste nichts hervorschaut — das Flyout liegt ja bündig darunter.
Weich (ThemeWare®) ist der bisherige ThemeWare®-Schatten: breit und weich.
Einrückung
Feldtyp:
Textfeld
Beispiel Wert:10
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'"
Technischer Name:twt-nav-main-flyout-categories-margin-left
Lege die Einrückung für Unterkategorien im Flyout (in Pixeln) fest.
Standard: 20
Basiskonfiguration 'ThemeWare® Flyout mit Karten'
Spalten
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Automatisch
• 3 Spalten
• 4 Spalten
• 5 Spalten
• 6 Spalten
Beispiel Wert:Automatisch
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout mit Karten'"
Technischer Name:twt-nav-main-flyout-cards-columns
Lege fest, wie viele Karten nebeneinander dargestellt werden. Der Wert gilt für sehr große Bildschirme, kleinere Bildschirme reduzieren die Anzahl automatisch: auf Desktops maximal 4 Karten, auf Tablets maximal 3 und auf Smartphones immer 2.
Automatisch: 4 Karten ab großen Bildschirmen — im Größenmodus "100% (Full-width)" 6 Karten ab sehr großen Bildschirmen.
Hinweis: Die Einstellung wirkt nur im Modus "ThemeWare® Flyout mit Karten".
Basiskonfiguration 'ThemeWare® Dropdown'
Schlagschatten
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• kein Schatten (Standard)
• Kleiner Schatten (Bootstrap)
• Normaler Schatten (Bootstrap)
• Größerer Schatten (Bootstrap)
Beispiel Wert:Normaler Schatten (Bootstrap)
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Dropdown'"
Technischer Name:twt-nav-main-dropdown-box-shadow-type
Fügt den Submenüs einen Schlagschatten hinzu.
Beta: Die Funktion kann sich in einem kommenden Update nochmal ändern, teste sie aber gerne schon einmal und sende uns dein Feedback.
Farbkonfiguration
Textfarbe (Menüpunkte)
Feldtyp:
Farbauswahl
Beispiel Wert:#333333
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-categories-color
Textfarbe (Menüpunkte) @hover
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-categories-color-hover
Textfarbe (Menüpunkte) @active
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-categories-color-active
Hintergrundfarbe (Menüpunkte)
Feldtyp:
Farbauswahl
Beispiel Wert:#ffffff
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-categories-background-color
Färbt die Fläche eines einzelnen Menüpunkts.
Hinweis: Im Flyout wird diese Einstellung nur angewendet, wenn das Design "Buttons" gesetzt ist. In der Dropdown-Navigation wird sie in den Designs "Buttons (kompakt)" und "Buttons" angewendet.
Hintergrundfarbe (Menüpunkte) @hover
Feldtyp:
Farbauswahl
Beispiel Wert:#e3e8ec
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-categories-background-color-hover
Färbt die Fläche eines Menüpunkts beim Überfahren mit der Maus.
Hinweis: Im Flyout wird diese Einstellung nur angewendet, wenn das Design "Buttons" gesetzt ist. In der Dropdown-Navigation wird sie in den Designs "Buttons (kompakt)" und "Buttons" angewendet.
Hintergrundfarbe (Menüpunkte) @active
Feldtyp:
Farbauswahl
Beispiel Wert:#e3e8ec
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-categories-background-color-active
Färbt die Fläche des Menüpunkts der aktiven Kategorie. Beim Überfahren mit der Maus greift die Hover-Farbe.
Hinweis: Im Flyout wird diese Einstellung nur angewendet, wenn das Design "Buttons" gesetzt ist. In der Dropdown-Navigation wird sie in den Designs "Buttons (kompakt)" und "Buttons" angewendet.
Iconfarbe (Menüpunkte)
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-categories-icon-color
Farbe (Trennlinie)
Feldtyp:
Farbauswahl
Beispiel Wert:#bcc1c7
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-seperator-color
Hinweis: Diese Konfiguration bezieht sich auf die Trennlinie im Design "Liste (Shopware 6)" und auf die Trennlinien im Dropdown-Design "Buttons (kompakt)".
Hintergrundfarbe (Panel)
Feldtyp:
Farbauswahl
Beispiel Wert:#eef2f5
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-background-color
Färbt die Fläche des Untermenüs selbst: beim Flyout das breite Panel, bei der Dropdown-Navigation die Karte.
Glaseffekt [px] (Panel)
Feldtyp:
Nummernfeld
Beispiel Wert:0
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-nav-main-flyout-backdrop-effect-blur
Zeichnet den Inhalt hinter dem Panel weich und erzeugt so einen Glaseffekt im Stil von "Liquid Glass". Empfohlener Wert: 10.
Hinweis: Der Effekt wird nur sichtbar, wenn als Hintergrundfarbe eine halbtransparente Farbe gewählt ist.
Level 1
Schriftart
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Text
• Überschriften
Beispiel Wert:Text
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 1"
Technischer Name:twt-nav-main-flyout-font-family
Schriftgröße
Feldtyp:
Nummernfeld
Beispiel Wert:18
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 1"
Technischer Name:twt-nav-main-flyout-font-size
Strichstärke
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• light
• normal
• bold
Beispiel Wert:normal
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 1"
Technischer Name:twt-nav-main-flyout-font-weight
Textformatierung
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• keine
• Großschreibung
• Kleinschreibung
• Wortanfang in Großbuchstaben
Beispiel Wert:keine
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 1"
Technischer Name:twt-nav-main-flyout-text-transform
Level 2
Schriftart
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Text
• Überschriften
Beispiel Wert:Text
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 2"
Technischer Name:twt-nav-main-flyout-level1-font-family
Schriftgröße
Feldtyp:
Nummernfeld
Beispiel Wert:16
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 2"
Technischer Name:twt-nav-main-flyout-level1-font-size
Strichstärke
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• light
• normal
• bold
Beispiel Wert:normal
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 2"
Technischer Name:twt-nav-main-flyout-level1-font-weight
Textformatierung
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• keine
• Großschreibung
• Kleinschreibung
• Wortanfang in Großbuchstaben
Beispiel Wert:keine
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 2"
Technischer Name:twt-nav-main-flyout-level1-text-transform
Level 3 ...
Schriftart
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Text
• Überschriften
Beispiel Wert:Text
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 3 ..."
Technischer Name:twt-nav-main-flyout-level2-font-family
Schriftgröße
Feldtyp:
Nummernfeld
Beispiel Wert:16
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 3 ..."
Technischer Name:twt-nav-main-flyout-level2-font-size
Strichstärke
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• light
• normal
• bold
Beispiel Wert:normal
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 3 ..."
Technischer Name:twt-nav-main-flyout-level2-font-weight
Textformatierung
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• keine
• Großschreibung
• Kleinschreibung
• Wortanfang in Großbuchstaben
Beispiel Wert:keine
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 3 ..."
Technischer Name:twt-nav-main-flyout-level2-text-transform
Kategorie-Button
Flyout-Bar anzeigen (Kategorie-Link und dem Schließen-Button)
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• nicht anzeigen
• oben anzeigen
• unten anzeigen (derzeit inaktiv)
Beispiel Wert:oben anzeigen
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"
Technischer Name:twt-nav-main-flyout-bar-show
Die "Flyout-Bar" besteht aus einem Kategorie-Link und dem Schließen-Button.
Bedenken hinsichtlich der Barrierefreiheit:
Das Deaktivieren dieser Funktion kann dazu führen, dass Teile deiner Storefront für Menschen mit Einschränkungen nicht zugänglich sind. Dies kann eine Nichteinhaltung der in deiner Gerichtsbarkeit geltenden Barrierefreiheitsgesetze darstellen (z.B. des Europäischen Rechtsakts zur Barrierefreiheit). Mit dem Deaktivieren der "Flyout-Bar" erkennst du dieses Risiko an und übernimmst die volle Verantwortung.
Innenabstand oben/unten
Feldtyp:
Nummernfeld
Beispiel Wert:15
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"
Technischer Name:twt-nav-main-flyout-bar-padding-top-bottom
Innenabstand links/rechts
Feldtyp:
Nummernfeld
Beispiel Wert:15
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"
Technischer Name:twt-nav-main-flyout-bar-padding-left-right
Textfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"
Technischer Name:twt-nav-main-flyout-bar-color
Textfarbe @hover
Feldtyp:
Farbauswahl
Beispiel Wert:#333333
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"
Technischer Name:twt-nav-main-flyout-bar-color-hover
Hintergrundfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:#e3e8ec
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"
Technischer Name:twt-nav-main-flyout-bar-background-color
Schließen-Button
Innenabstand
Feldtyp:
Nummernfeld
Beispiel Wert:15
Pfad zur Einstellung:
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Schließen-Button"
Technischer Name:twt-nav-main-flyout-close-btn-padding