Design
Offcanvas-Navigation
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Shopware (Standard)
• Liste (Clean)
• Buttons (kompakt)
• Buttons
Beispiel Wert:Shopware (Standard)
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Design"
Technischer Name:twt-offcanvas-nav-design
Wähle das Design der Menüpunkte in der Offcanvas-Navigation aus.
Shopware (Standard): Kein ThemeWare®-Design - Menüpunkte, Linien und Panel bleiben genau so, wie Shopware sie ausliefert. Konfigurierbar sind dort nur die Textfarben und die Linienfarbe.
Liste (Clean): Reiner Text auf der Fläche des Panels, ohne Flächen und ohne Trennlinien.
Buttons (kompakt): Jeder Menüpunkt ist eine Fläche über die volle Breite des Panels, getrennt durch Linien.
Buttons: Die Menüpunkte werden zu eingerückten Flächen mit abgerundeten Ecken.
Hinweis: Die Farben der Menüpunkte werden im Bereich "Farbkonfiguration" gesetzt.
Basiskonfiguration
Darstellungsart (Kategorie-Buttons)
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Shopware (Standard)
• ThemeWare®
Beispiel Wert:ThemeWare®
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Basiskonfiguration"
Technischer Name:twt-offcanvas-nav-category-btn-layout-type
Wähle, wie der Bereich über den Menüpunkten aufgebaut ist.
Shopware (Standard): Shopwares Anordnung - "Zeige alle Kategorien" und "Zurück" als eigene Textzeilen, "Zur Kategorie X" als erster Eintrag der Liste.
ThemeWare®: "Zeige alle Kategorien" über dem Kategorienamen, darunter "Zurück" und "Zur Kategorie X" nebeneinander als Button-Paar. Die beiden Bereiche weiter unten konfigurieren diese Buttons.
Hinweis: "Shopware (Standard)" ist zugleich der Ausweg, wenn eine andere Erweiterung dieselben Templates überschreibt und sich beide in die Quere kommen - unser Markup tritt dann vollständig zur Seite.
Block: 'layout_navigation_offcanvas_navigation_categories', 'layout_navigation_offcanvas_navigation_category_back_link' und 'layout_navigation_offcanvas_navigation_home_link'.
Außenabstand links/rechts [px]
Feldtyp:
Nummernfeld
Beispiel Wert:10
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Basiskonfiguration"
Technischer Name:twt-offcanvas-nav-margin-left-right
Wähle, wie weit die Menüpunkte vom Rand des Panels eingerückt werden. Der Kopfbereich mit "Zurück" und "Hauptmenü" folgt derselben Kante.
Hinweis: Die Menüpunkte nehmen diesen Abstand nur im Design "Buttons" auf - in den übrigen Designs laufen sie von Kante zu Kante.
Farbkonfiguration
Textfarbe
"Zurück" wechselt je nach Aufbau die Farbrolle. Es folgt dieser Textfarbe nur dort, wo es ein reiner Link ist — sobald es wie ein Menüpunkt aussieht, gelten die Farben aus "Farbkonfiguration (Menüpunkte)":
| "Zurück" ist … | Farben aus | Fläche |
|---|---|---|
| ein Eintrag der Liste (Darstellungsart "Shopware (Standard)") | Farbkonfiguration (Menüpunkte) | erst ab Design "Buttons (kompakt)" |
| ein Link neben "Kategorie anzeigen" (Darstellungsart "ThemeWare®", Designs "Shopware (Standard)" bis "Buttons (kompakt)") | Farbkonfiguration | keine |
| ein Button (Darstellungsart "ThemeWare®", Design "Buttons") | Farbkonfiguration (Menüpunkte) | ja |
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-text-color
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-offcanvas-nav-link-color
Gilt für jeden klickbaren Text ohne Fläche: die Überschrift auf Unterebenen sowie die Sprach-, Währungs- und Service-Auswahl.
Hinweis: "Zurück" folgt dieser Farbe nur als reiner Link. Wo es wie ein Menüpunkt aussieht, gilt "Farbkonfiguration (Menüpunkte)".
Hinweis: Die Einträge in den aufgeklappten Sprach-, Währungs- und Service-Dropdowns folgen der Einstellung "Färbung" weiter unten.
Textfarbe @hover
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-offcanvas-nav-link-color-hover
Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.
Hintergrundfarbe (Panel)
Feldtyp:
Farbauswahl
Beispiel Wert:#eef2f5
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-offcanvas-nav-panel-background-color
Färbt die Fläche hinter den Menüpunkten und den Kategorie-Buttons. Halte sie von diesen Flächen unterscheidbar - dieselbe Paarung wie im Flyout, wo ein getöntes Panel weiße Menüpunkte trägt.
Hinweis: Diese Einstellung wird im Design "Shopware (Standard)" nicht angewendet - dort bleibt das Panel, das Shopware ausliefert.
Glaseffekt [px] (Panel)
Feldtyp:
Nummernfeld
Beispiel Wert:0
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration"
Technischer Name:twt-offcanvas-nav-panel-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, und er wird im Design "Shopware (Standard)" nicht angewendet - dort bleibt das Panel, das Shopware ausliefert.
Farbkonfiguration (Menüpunkte)
Textfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-text-color
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-color
Färbt die Menüpunkte.
Hinweis: "Zurück" folgt dieser Farbe, wo es wie ein Menüpunkt aussieht. Als reiner Link gilt die "Textfarbe" aus "Farbkonfiguration".
Textfarbe @hover
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-color-hover
Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.
Textfarbe @active
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-color-active
Färbt den Menüpunkt der aktuell geöffneten Kategorie.
Hinweis: Der Button "Kategorie anzeigen" wird im gleichnamigen Abschnitt gesetzt - ausser wenn er ein Listeneintrag ist, dann gilt diese Farbe.
Hintergrundfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:#ffffff
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-background-color
Färbt die Fläche eines einzelnen Menüpunkts.
Hinweis: Diese Einstellung wird in den Designs "Buttons (kompakt)" und "Buttons" angewendet. Das Design "Shopware (Standard)" behält die weiße Zeilenfläche, die Shopware ausliefert.
Hintergrundfarbe @hover
Feldtyp:
Farbauswahl
Beispiel Wert:#e3e8ec
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-background-color-hover
Färbt die Fläche eines Menüpunkts beim Überfahren mit der Maus.
Hinweis: Diese Einstellung wird in den Designs "Buttons (kompakt)" und "Buttons" angewendet, und nur auf Geräten mit Maus.
Hintergrundfarbe @active
Feldtyp:
Farbauswahl
Beispiel Wert:#e3e8ec
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-background-color-active
Färbt die Fläche des Menüpunkts der aktiven Kategorie. Beim Überfahren mit der Maus greift die Hover-Farbe.
Hinweis: Diese Einstellung wird in den Designs "Buttons (kompakt)" und "Buttons" angewendet.
Farbe (Trennlinie)
Feldtyp:
Farbauswahl
Beispiel Wert:#bcc1c7
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-seperator-color
Hinweis: Diese Einstellung wird in den Designs "Shopware (Standard)" und "Buttons (kompakt)" angewendet.
Typografie (Menüpunkte)
Schriftart
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Text
• Überschriften
Beispiel Wert:Text
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Typografie (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-font-family
Schriftgröße
Feldtyp:
Nummernfeld
Beispiel Wert:16
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Typografie (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-font-size
Strichstärke
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• light
• normal
• bold
Beispiel Wert:normal
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Typografie (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-font-weight
Textformatierung
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• keine
• Großschreibung
• Kleinschreibung
• Wortanfang in Großbuchstaben
Beispiel Wert:keine
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Typografie (Menüpunkte)"
Technischer Name:twt-offcanvas-nav-text-transform
Typografie (Überschrift)
Schriftgröße (Überschrift)
Feldtyp:
Nummernfeld
Beispiel Wert:18
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Typografie (Überschrift)"
Technischer Name:twt-offcanvas-nav-headline-font-size
Größe des Kategorienamens über den Buttons - auf der Wurzelebene "Kategorien", auf Unterebenen der Name der geöffneten Kategorie.
Button "Zeige alle Kategorien"
Darstellungsart
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Button
• Outline-Button
• Link
Beispiel Wert:Button
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Zeige alle Kategorien""
Technischer Name:twt-offcanvas-nav-all-btn-style
Wähle, wie der Button "Zeige alle Kategorien" oberhalb der Überschrift dargestellt wird.
Button: Eine gefüllte Fläche.
Outline-Button: Nur ein Rahmen, die Fläche bleibt frei. Der Rahmen nimmt die unten eingestellte Hintergrundfarbe; beim Überfahren füllt er sich mit der Hover-Farbe, so wie Bootstrap seine Outline-Buttons aufbaut. Für diese Darstellungsart ist eine kräftigere Hintergrundfarbe sinnvoll - der helle Standardwert ist als Rahmen kaum zu sehen.
Link: Nur Text und Icon, ohne Fläche. Ruhig über der Liste, die Hintergrundfarben bleiben dann wirkungslos.
Textfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-text-color
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Zeige alle Kategorien""
Technischer Name:twt-offcanvas-nav-all-btn-color
Gilt für den Button "Zeige alle Kategorien" oberhalb der Überschrift.
Hinweis: "Zurück" ist kein Kategorie-Button - es folgt den Menüpunkten, in den Listen-Designs als Link und im Design "Buttons" als Button.
Textfarbe @hover
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Zeige alle Kategorien""
Technischer Name:twt-offcanvas-nav-all-btn-color-hover
Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.
Hintergrundfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:#ffffff
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Zeige alle Kategorien""
Technischer Name:twt-offcanvas-nav-all-btn-background-color
Färbt die Fläche vom Button "Zeige alle Kategorien".
Hinweis: Der Standardwert ist auf das weiße Panel vom Design "Shopware (Standard)" abgestimmt. Die übrigen Designs bringen ein getöntes Panel mit, dort braucht der Button einen dunkleren Ton, um sich abzuheben.
Hintergrundfarbe @hover
Feldtyp:
Farbauswahl
Beispiel Wert:#e3e8ec
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Zeige alle Kategorien""
Technischer Name:twt-offcanvas-nav-all-btn-background-color-hover
Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.
Button "Kategorie anzeigen"
Darstellungsart
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Button
• Outline-Button
Beispiel Wert:Button
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Kategorie anzeigen""
Technischer Name:twt-offcanvas-nav-current-btn-style
Wähle, wie der Button "Kategorie anzeigen" neben "Zurück" dargestellt wird.
Button: Eine gefüllte Fläche.
Outline-Button: Nur ein Rahmen, die Fläche bleibt frei. Der Rahmen nimmt die unten eingestellte Hintergrundfarbe; beim Überfahren füllt er sich mit der Hover-Farbe, so wie Bootstrap seine Outline-Buttons aufbaut.
Hinweis: Dieser Button führt in die geöffnete Kategorie - er ist die Hauptaktion des Panels und darf auffallen.
Hinweis: Bei der Darstellungsart "Shopware (Standard)" ist er ein Listeneintrag - die Einstellungen dieses Abschnitts bleiben dann wirkungslos.
Textfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:#ffffff
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Kategorie anzeigen""
Technischer Name:twt-offcanvas-nav-current-btn-color
Gilt für den Button "Kategorie anzeigen" neben "Zurück".
Hinweis: In der Darstellungsart "Outline-Button" wird diese Farbe erst beim Überfahren genutzt - im Ruhezustand trägt der Text die Hintergrundfarbe, weil es keine Fläche gibt, auf der er sitzen könnte.
Textfarbe @hover
Feldtyp:
Farbauswahl
Beispiel Wert:#ffffff
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Kategorie anzeigen""
Technischer Name:twt-offcanvas-nav-current-btn-color-hover
Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.
Hintergrundfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Kategorie anzeigen""
Technischer Name:twt-offcanvas-nav-current-btn-background-color
Färbt die Fläche vom Button "Kategorie anzeigen". Der Standardwert ist die Theme-Farbe, damit die Hauptaktion des Panels auffällt.
Hintergrundfarbe @hover
Feldtyp:
Farbauswahl
Beispiel Wert:mix(black, $sw-color-brand-primary, 15%)
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Button "Kategorie anzeigen""
Technischer Name:twt-offcanvas-nav-current-btn-background-color-hover
Der Standardwert mischt 15 Prozent Schwarz in die Theme-Farbe - genau so dunkelt Bootstrap seine Buttons beim Überfahren ab. Er wandert damit mit, wenn die Theme-Farbe wechselt.
Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.
Währungsauswahl
Label anzeigen
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• nicht anzeigen
• anzeigen
Beispiel Wert:nicht anzeigen
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Währungsauswahl"
Technischer Name:twt-offcanvas-nav-currencies-menu-text-show
Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.
Sprachauswahl
Label anzeigen
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• nicht anzeigen
• anzeigen
Beispiel Wert:nicht anzeigen
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Sprachauswahl"
Technischer Name:twt-offcanvas-nav-languages-menu-text-show
Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.
Service-Menü Pro
Service-Menü anzeigen
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• nicht anzeigen
• anzeigen
Beispiel Wert:nicht anzeigen
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Service-Menü Pro"
Technischer Name:twt-offcanvas-nav-service-menu-show
Mit dieser Konfiguration kannst du die "Footer-Service-Navigation" in der Offcanvas-Navigation anzeigen lassen.
Die Navigation selber muss im Verkaufskanal zugewiesen werden.
Um das Label zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: header.indexLinkService
Icon anzeigen
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• nicht anzeigen
• anzeigen
Beispiel Wert:anzeigen
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Service-Menü Pro"
Technischer Name:twt-offcanvas-nav-service-menu-icon-show
Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.
Label anzeigen
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• nicht anzeigen
• anzeigen
Beispiel Wert:nicht anzeigen
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Service-Menü Pro"
Technischer Name:twt-offcanvas-nav-service-menu-text-show
Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.
Dropdowns
Färbung
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• Standard
• Headerfarben
• individuelle Farben (folgt...)
Beispiel Wert:Standard
Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Dropdowns"
Technischer Name:twt-offcanvas-nav-dropdown-coloration