Alle Seiten
Bereitgestellt von GitBook
1 von 1

Loading...

Konfiguration

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.

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


Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-offcanvas-nav-margin-left-right


"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

Feldtyp: Farbauswahl

Beispiel Wert: $sw-text-color

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-offcanvas-nav-link-color


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


Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-offcanvas-nav-panel-background-color


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-offcanvas-nav-panel-effect-blur


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


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


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


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration (Menüpunkte)"

Technischer Name: twt-offcanvas-nav-background-color


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


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


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Farbkonfiguration (Menüpunkte)"

Technischer Name: twt-offcanvas-nav-seperator-color


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


Feldtyp: Nummernfeld

Beispiel Wert: 16

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Typografie (Menüpunkte)"

Technischer Name: twt-offcanvas-nav-font-size


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


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


Feldtyp: Nummernfeld

Beispiel Wert: 18

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Typografie (Überschrift)"

Technischer Name: twt-offcanvas-nav-headline-font-size


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


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


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


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


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


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


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


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


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


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


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


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


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Service-Menü [Pro-Edition]"

Technischer Name: twt-offcanvas-nav-service-menu-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Service-Menü [Pro-Edition]"

Technischer Name: twt-offcanvas-nav-service-menu-icon-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Offcanvas-Navigation" => Abschnitt "Service-Menü [Pro-Edition]"

Technischer Name: twt-offcanvas-nav-service-menu-text-show


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

Hinweis: Die Farben der Menüpunkte werden im Bereich "Farbkonfiguration" gesetzt.

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

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]

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

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

Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.

Hintergrundfarbe (Panel)

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)

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

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

Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.

Textfarbe @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

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

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

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)

Hinweis: Diese Einstellung wird in den Designs "Shopware (Standard)" und "Buttons (kompakt)" angewendet.

Typografie (Menüpunkte)

Schriftart

Schriftgröße

Strichstärke

Textformatierung

Typografie (Überschrift)

Schriftgröße (Überschrift)

Größe des Kategorienamens über den Buttons - auf der Wurzelebene "Kategorien", auf Unterebenen der Name der geöffneten Kategorie.

Button "Zeige alle Kategorien"

Darstellungsart

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

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

Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.

Hintergrundfarbe

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

Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.

Button "Kategorie anzeigen"

Darstellungsart

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

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

Hinweis: Diese Einstellung wird nur auf Geräten mit Maus angewendet. Auf Touch-Geräten gibt es keinen Hover-Zustand.

Hintergrundfarbe

Färbt die Fläche vom Button "Kategorie anzeigen". Der Standardwert ist die Theme-Farbe, damit die Hauptaktion des Panels auffällt.

Hintergrundfarbe @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

Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.

Sprachauswahl

Label anzeigen

Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.

Service-Menü [Pro-Edition]

Service-Menü anzeigen

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

Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.

Label anzeigen

Hinweis: Unterhalb von 320px Fensterbreite wird nur das Icon angezeigt.

Dropdowns

Färbung

keine

ein Button (Darstellungsart "ThemeWare®", Design "Buttons")

Farbkonfiguration (Menüpunkte)

ja