Alle Seiten
Bereitgestellt von GitBook
1 von 23

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Konfiguration

Basiskonfiguration


Text anzeigen ab ...

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • Phone (Hochformat) (<576px) • Phone (Querformat) (≥576px) • Tablet (Hochformat) (≥768px) • Tablet (Querformat) (≥992px) • Desktop (≥1200px) • Container-Max-Width (Full-width-boxed)

Beispiel Wert: Tablet (Hochformat) (≥768px)

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-actions-btn-text-show


Position (Icon)

Feldtyp: Auswahlfeld

Verfügbare Werte: • links • oberhalb

Beispiel Wert: links

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-actions-btn-icon-position


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken • runde Ecken

Beispiel Wert: abgerundete Ecken

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-actions-btn-corner-type


Feldtyp: Nummernfeld

Beispiel Wert: 14

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Typografie"

Technischer Name: twt-header-actions-btn-font-size


Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: normal

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Typografie"

Technischer Name: twt-header-actions-btn-font-weight


Feldtyp: Nummernfeld

Beispiel Wert: 35

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Typografie"

Technischer Name: twt-header-actions-btn-line-height


Feldtyp: Nummernfeld

Beispiel Wert: 14

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Typografie"

Technischer Name: twt-header-actions-btn-icon-font-size


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-actions-btn-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-actions-btn-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-actions-btn-icon-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-actions-btn-icon-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #e4e7ea

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-actions-btn-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #e6e6e6

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-actions-btn-border-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-actions-btn-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #f6f6f6

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-actions-btn-background-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Merkzettel-Button"

Technischer Name: twt-header-actions-wishlist-btn-badge-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt ""Mein Konto"-Button"

Technischer Name: twt-header-actions-account-menu-btn-badge-show


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt ""Mein Konto"-Button"

Technischer Name: twt-header-actions-account-menu-btn-badge-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • Phone (Hochformat) (<576px) • Phone (Querformat) (≥576px) • Tablet (Hochformat) (≥768px) • Tablet (Querformat) (≥992px) • Desktop (≥1200px) • Container-Max-Width (Full-width-boxed)

Beispiel Wert: Tablet (Querformat) (≥992px)

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-total-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • Phone (Hochformat) (<576px) • Phone (Querformat) (≥576px) • Tablet (Hochformat) (≥768px) • Tablet (Querformat) (≥992px) • Desktop (≥1200px) • Container-Max-Width (Full-width-boxed)

Beispiel Wert: Phone (Hochformat) (<576px)

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-badge-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • Phone (Hochformat) (<576px) • Phone (Querformat) (≥576px) • Tablet (Hochformat) (≥768px) • Tablet (Querformat) (≥992px) • Desktop (≥1200px) • Container-Max-Width (Full-width-boxed)

Beispiel Wert: Tablet (Hochformat) (≥768px)

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-text-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-separator-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: normal

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-font-weight


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-icon-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-icon-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #e4e7ea

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #e6e6e6

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-border-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #e4e7ea

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-separator-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-background-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button"

Technischer Name: twt-header-actions-cart-btn-badge-background-color

Ecken

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Typografie

Schriftgröße

Strichstärke

Zeilenhöhe

Diese "Zeilenhöhe" wird bei der Header-Darstellungsart "Header 2.1" ignoriert und stattdessen die Zeilenhöhe der "Top-Bar" verwendet.

Icongröße

Farbkonfiguration

Textfarbe

Textfarbe @hover

Iconfarbe

Iconfarbe @hover

Rahmenfarbe

Rahmenfarbe @hover

Hintergrundfarbe

Hintergrundfarbe @hover

Merkzettel-Button

Hintergrundfarbe (Badge)

"Mein Konto"-Button

"Angemeldet"-Badge anzeigen

Zeigt die ThemeWare® "Angemeldet-Badge" an wenn der Kunde eingeloggt ist.

Hintergrundfarbe (Badge)

Warenkorb-Button

Preis anzeigen ab ...

Badge anzeigen ab ...

Text anzeigen ab ...

Separator anzeigen

Strichstärke

Textfarbe

Textfarbe @hover

Iconfarbe

Iconfarbe @hover

Rahmenfarbe

Rahmenfarbe @hover

Rahmenfarbe (Separator)

Hintergrundfarbe

Hintergrundfarbe @hover

Hintergrundfarbe (Badge)

Top-Navigation

Sticky Top-Navigation (Basis-Header "Header 1" und "Header 2")

Konfiguration


Feldtyp: Auswahlfeld

Verfügbare Werte: • deaktiviert (Standard) • aktiviert (Header überlagert die Erlebniswelt)

Beispiel Wert: deaktiviert (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Erlebniswelt-Header"

Technischer Name: twt-shopping-experiences-header-position

Erlebniswelt-Header

Der Header kann auf der 'Startseite' die Erlebniswelt überlagern.

Du kannst diesen Header mit einem Zusatzfeld auch für Kategorien aktivieren.

Der "Erlebniswelt-Header" eignet sich besonders beim Überlagern von Bildern und Slidern.

Wichtig: Die Hintergrundfarbe des Headers und dessen Bestandteile sollte mit "transparent" oder "rgba(0, 0, 0, 0)" konfiguriert werden damit das Element dahinter sichtbar wird.

Top-Navigation Flyout

Konfiguration


Sticky Top-Navigation anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')"

Technischer Name: twt-sticky-nav-main-show

Basiskonfiguration


Fixiert

Feldtyp: Auswahlfeld

Verfügbare Werte: • fixieren beim runter scrollen • fixieren beim hoch scrollen

Beispiel Wert: fixieren beim hoch scrollen

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-sticky-nav-main-type


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-sticky-nav-main-scroll-top


Feldtyp: Auswahlfeld

Verfügbare Werte: • Tablet (Querformat) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

Beispiel Wert: Tablet (Querformat) (≥992px)

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-sticky-nav-main-breakpoint


Feldtyp: Nummernfeld

Beispiel Wert: 50

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-sticky-nav-main-height


Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • rechts ausrichten • zentriert ausrichten • space-between • space-around

Beispiel Wert: zentriert ausrichten

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-sticky-nav-main-justify-content


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-sticky-nav-main-toggle


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-sticky-nav-main-cart-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-sticky-nav-main-search-show


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-sticky-nav-main-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Logo"

Technischer Name: twt-sticky-nav-main-logo-show


Feldtyp: Textfeld

Beispiel Wert: 120

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Logo"

Technischer Name: twt-sticky-nav-main-logo-width


Feldtyp: Textfeld

Beispiel Wert: auto

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Logo"

Technischer Name: twt-sticky-nav-main-logo-height


Feldtyp: Nummernfeld

Beispiel Wert: 20

Pfad zur Einstellung: Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Logo"

Technischer Name: twt-sticky-nav-main-logo-margin-right

Scrolltiefe

Die Eigenschaft Scrolltiefe (scrollTop) legt die Anzahl der Pixel fest, mit denen der Inhalt eines Elements vertikal gescrollt wird.

Anzeigen ab ...

Höhe

Textausrichtung

Wähle die gewünschte horizontale Ausrichtung aus.

links Elemente werden am Anfang des Containers positioniert.

rechts Elemente werden am Ende des Containers positioniert.

zentriert Die Elemente befinden sich in der Mitte des Containers.

space-between Elemente werden gleichmäßig verteilt. Das erste Element an den Start, das letzte an das Ende.

space-around Elemente werden gleichmäßig verteilt. Alle Elemente haben gleiche Abstände um sie herum.

Hamburger-Navigation anzeigen

Warenkorb anzeigen

Suche anzeigen

Farbkonfiguration

Hintergrundfarbe

Logo

Logo anzeigen

Breite

Höhe

Außenabstand rechts

Konfiguration

Basiskonfiguration


Darstellungsart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Verkaufsfördernde Navigation

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-phone-type

Die Darstellungsart "Verkaufsfördernde Navigation" verschiebt die Navigation an den unteren Bildschirmrand für eine bessere Zugänglichkeit auf Smartphones.

Hinweis: Nutze einfach die Darstellungsart "Standard" falls ein Plugin Dritter nicht mit der "Verkaufsfördernde Navigation" harmoniert.


Maximale Breite (Logo) @Phone (<576px)

Feldtyp: Textfeld

Beispiel Wert: 160

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-logo-max-width-mobile


Feldtyp: Textfeld

Beispiel Wert: 50

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-height-mobile


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: ja

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-phone-fixed


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-phone-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-icon-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-icon-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-border-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-background-color-hover


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Clean • Center

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-type


Feldtyp: Textfeld

Beispiel Wert: 70

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-height


Feldtyp: Auswahlfeld

Verfügbare Werte: • Links • Mitte • Rechts

Beispiel Wert: Mitte

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-logo-position


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-background-color


Feldtyp: Textfeld

Beispiel Wert: 0 0 20px

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-box-shadow


Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.1)

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-box-shadow-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • abgerundete Ecken • runde Ecken

Beispiel Wert: runde Ecken

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-corner-type


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein (Standard) • ja

Beispiel Wert: nein (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-home


Feldtyp: Nummernfeld

Beispiel Wert: 100

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-home-order


Feldtyp: Nummernfeld

Beispiel Wert: 200

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-navigation-order


Feldtyp: Nummernfeld

Beispiel Wert: 300

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-search-order


Feldtyp: Nummernfeld

Beispiel Wert: 400

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-cart-order


Feldtyp: Nummernfeld

Beispiel Wert: 500

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-wishlist-order


Feldtyp: Nummernfeld

Beispiel Wert: 600

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-account-order


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: ja

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-cart-btn-highlighting


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basis-Header ('Header 1' und 'Header 2')"

Technischer Name: twt-header-phone-nav-main-toggle-label-show

Höhe (Header) @Phone (<576px)

Nur verfügbar bei der aktiver Darstellungsart "Verkaufsfördernde Navigation".

Fixiert

Farbkonfiguration

Hintergrundfarbe

Aktions-Buttons

Textfarbe

Textfarbe @hover

Iconfarbe

Iconfarbe @hover

Rahmenfarbe

Rahmenfarbe @hover

Hintergrundfarbe

Hintergrundfarbe @hover

Verkaufsfördernde Navigation

Darstellungsart

Höhe (Navigation) @Phone (<576px)

Nur verfügbar bei der aktiver Darstellungsart "Verkaufsfördernde Navigation".

Logo-Position @Phone (<576px)

Hintergrundfarbe (Navigation)

Schlagschatten

Schattenfarbe

Ecken (Aktions-Buttons)

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". (siehe "Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Home-Button anzeigen (Aktions-Button)

Reihenfolge: Home-Button (Aktions-Button)

Reihenfolge: Navigation-Button (Aktions-Button)

Reihenfolge: Suchen-Button (Aktions-Button)

Reihenfolge: Warenkorb-Button (Aktions-Button)

Reihenfolge: Merkzettel-Button (Aktions-Button)

Reihenfolge: Mein-Konto-Button (Aktions-Button)

Warenkorb-Button hervorheben

Nur verfügbar bei der aktiver Darstellungsart "Verkaufsfördernde Navigation".

Basis-Header "Header 1" and "Header 2"

Hamburger-Menü Text anzeigen @Phone (<576px)

Konfiguration

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


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


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


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


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


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


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


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


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


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


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


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-flyout-categories-color


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


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


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


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


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


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


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-flyout-seperator-color


Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-flyout-background-color


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

Flyout

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

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

Hauptnavigations-Ebenen

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

Wähle, ob das Flyout die Containerbreite oder die volle Seitenbreite nutzt.

Individuelle Breite

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

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

Lege die Einrückung für Unterkategorien im Flyout (in Pixeln) fest.

Standard: 20

Basiskonfiguration 'ThemeWare® Flyout mit Karten'

Spalten

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

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)

Textfarbe (Menüpunkte) @hover

Textfarbe (Menüpunkte) @active

Hintergrundfarbe (Menüpunkte)

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

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

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)

Farbe (Trennlinie)

Hinweis: Diese Konfiguration bezieht sich auf die Trennlinie im Design "Liste (Shopware 6)" und auf die Trennlinien im Dropdown-Design "Buttons (kompakt)".

Hintergrundfarbe (Panel)

Färbt die Fläche des Untermenüs selbst: beim Flyout das breite Panel, bei der Dropdown-Navigation die Karte.

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.

Level 1

Schriftart

Schriftgröße

Strichstärke

Textformatierung

Level 2

Schriftart

Schriftgröße

Strichstärke

Textformatierung

Level 3 ...

Schriftart

Schriftgröße

Strichstärke

Textformatierung

Kategorie-Button

Flyout-Bar anzeigen (Kategorie-Link und dem Schließen-Button)

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

Innenabstand links/rechts

Textfarbe

Textfarbe @hover

Hintergrundfarbe

Schließen-Button

Innenabstand

Konfiguration


Top-Navigation

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • Liste anzeigen • Hamburger-Menü anzeigen

Beispiel Wert: Liste anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation"

Technischer Name: twt-nav-main-show

Basiskonfiguration


Home-Link anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-home-link-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • Text (Standard) • Icon

Beispiel Wert: Text (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-home-link


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (ThemeWare®-Stil) • anzeigen (Standard)

Beispiel Wert: anzeigen (ThemeWare®-Stil)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-arrows-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • farbig hinterlegen (inkl. Home-Link) • farbig hinterlegen (exkl. Home-Link) • unterstreichen (mittig nach links und rechts) • unterstreichen (von links nach rechts) • unterstreichen (von rechts nach links) • unterstreichen

Beispiel Wert: farbig hinterlegen (inkl. Home-Link)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-hover-type


Feldtyp: Nummernfeld

Beispiel Wert: 60

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-height


Feldtyp: Nummernfeld

Beispiel Wert: 16

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-padding


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-padding-bottom


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-margin-left


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-margin-right


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basis-Header ('Header 1' und 'Header 2')"

Technischer Name: twt-nav-main-width


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

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


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border-bottom-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border-bottom-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #cccccc

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border


Feldtyp: Auswahlfeld

Verfügbare Werte: • Text • Überschriften

Beispiel Wert: Text

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-family


Feldtyp: Nummernfeld

Beispiel Wert: 18

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

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


Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: bold

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-weight


Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: bold

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-weight-active


Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • rechts ausrichten • zentriert ausrichten • space-between • space-around

Beispiel Wert: links ausrichten

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-justify-content


Feldtyp: Auswahlfeld

Verfügbare Werte: • keine • Großschreibung • Kleinschreibung • Wortanfang in Großbuchstaben

Beispiel Wert: keine

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-text-transform


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color-active


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color-active


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color-active


Feldtyp: Farbauswahl

Beispiel Wert: rgba(255, 255, 255, 0)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-link-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-background-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-background-color-active


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-color


Feldtyp: Farbauswahl

Beispiel Wert: #feecee

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-color-active


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-icon-color


Feldtyp: Farbauswahl

Beispiel Wert: #feecee

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-icon-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-icon-color-active


Feldtyp: Farbauswahl

Beispiel Wert: rgba(255, 255, 255, 0)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-background-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-background-color-active

Home-Link

Pfeile anzeigen

Zeigt einen Pfeil nach unten neben dem Menüpunkt, wenn Unterkategorien vorhanden sind.

Hover-Effekt

Bei einer links ausgerichteten Top-Navigation empfehlen wir den Hover-Effekt "farbig hinterlegen (exkl. Home-Link)" statt "farbig hinterlegen (inkl. Home-Link)".

Höhe

Innenabstand (Menüpunkte)

Gebe den gewünschten Abstand für die Menüpunkte ein.

Innenabstand unten

Gebe den gewünschten Abstand nach unten für die Top-Navigation ein.

Außenabstand links @Tablet (≥992px)

Hinweis: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.

Außenabstand rechts @Tablet (≥992px)

Hinweis: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.

Basis-Header "Header 1" and "Header 2"

Breite

Wähle den Größenmodus der "Top-Navigation" aus.

Standard: Die Breite der "Top-Navigation" orientiert sich an der Konfiguration der Breite des Headers.

Hinweis: Diese Konfiguration gilt nicht im Grundlayout "boxed".

Farbkonfiguration

Hintergrundfarbe (Navigation)

Rahmenfarbe

Hinweis: Diese Konfiguration gilt nur für den Hover-Effekt "Standard".

Rahmenfarbe (unterstreichen) @hover

Hinweis: Diese Konfiguration gilt nur für den Hover-Effekt "unterstreichen".

Rahmenfarbe (Trennstrich)

Typografie

Schriftart

Schriftgröße

Strichstärke

Strichstärke @active

Textausrichtung

Wähle die gewünschte horizontale Ausrichtung aus.

links Elemente werden am Anfang des Containers positioniert.

rechts Elemente werden am Ende des Containers positioniert.

zentriert Die Elemente befinden sich in der Mitte des Containers.

space-between Elemente werden gleichmäßig verteilt. Das erste Element an den Start, das letzte an das Ende.

space-around Elemente werden gleichmäßig verteilt. Alle Elemente haben gleiche Abstände um sie herum.

Textformatierung

Menüpunkt (Home-Link)

Farbe (Home-Link)

Farbe (Home-Link) @hover

Farbe (Home-Link) @active

Menüpunkt

Textfarbe

Textfarbe @hover

Textfarbe @active

Iconfarbe

Iconfarbe @hover

Iconfarbe @active

Hintergrundfarbe

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe @hover

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe @active

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Menüpunkt (hervorgehoben)

Textfarbe (hervorgehoben)

Textfarbe (hervorgehoben) @hover

Textfarbe (hervorgehoben) @active

Iconfarbe (hervorgehoben)

Iconfarbe (hervorgehoben) @hover

Iconfarbe (hervorgehoben) @active

Hintergrundfarbe (hervorgehoben)

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe (hervorgehoben) @hover

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe (hervorgehoben) @active

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Logo

Mobiler Header

Aktions-Buttons

Suche

Minimaler Header (im Checkout)

Erlebniswelt-Header

Top-Bar

Mehr Informationen zu Flaggen in der Sprachauswahl findest du in folgendem Artikel:

Flaggensymbole

Layout

Header 1.1

Top-Bar – Logo + Suche + Aktions-Buttons – Navigation

ThemeWare® Header 1.1

Header 1.2

Top-Bar – Suche + Logo + Aktions-Buttons – Navigation

ThemeWare® Header 1.2

Header 2.1

Top-Bar + Aktions-Buttons – Logo – Navigation

ThemeWare® Header 2.1

Full-Width Sticky-Header

Logo + Navigation + Aktions-Buttons

Header

  1. ThemeWare® USP-Bar

  2. ThemeWare® Ankündigungsbanner

  3. Shop-Logo

Suche

  • Aktions-Buttons (Merkzettel-Button, "Mein Konto"-Button, Warenkorb-Button)

  • Top-Bar (Sprachauswahl, Währungsauswahl, Service-/Hilfe-Menü)

  • Top-Navigation

  • ThemeWare® Header
    Full-Width StickyThemeWare® "Full-Width Sticky-Header"

    Konfiguration

    Basiskonfiguration


    Logoart

    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Bild-Logo (Standard) • Text-Logo

    Beispiel Wert: Bild-Logo (Standard)

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-logo-type

    Bild-Logo


    Breite

    Feldtyp: Textfeld

    Beispiel Wert: 220

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Logoart 'Bild-Logo'"

    Technischer Name: twt-header-logo-width


    Feldtyp: Textfeld

    Beispiel Wert: auto

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Logoart 'Bild-Logo'"

    Technischer Name: twt-header-logo-height


    Feldtyp: Nummernfeld

    Beispiel Wert: 0

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Logoart 'Bild-Logo'"

    Technischer Name: twt-header-logo-margin-top


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • kein Effekt • Deckkraft verringern

    Beispiel Wert: Deckkraft verringern

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Logoart 'Bild-Logo'"

    Technischer Name: twt-header-logo-hover-type


    Feldtyp: Textfeld

    Beispiel Wert: ThemeWare

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Logoart 'Text-Logo'"

    Technischer Name: twt-textlogo-content


    Feldtyp: Farbauswahl

    Beispiel Wert: #333333

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Logoart 'Text-Logo'"

    Technischer Name: twt-textlogo-fill


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Text • Überschriften

    Beispiel Wert: Text

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Logoart 'Text-Logo'"

    Technischer Name: twt-textlogo-font-family


    Feldtyp: Nummernfeld

    Beispiel Wert: 24

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Logoart 'Text-Logo'"

    Technischer Name: twt-textlogo-font-size


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • light • normal • bold

    Beispiel Wert: bold

    Pfad zur Einstellung: Tab "Header" => Bereich "Logo" => Abschnitt "Logoart 'Text-Logo'"

    Technischer Name: twt-textlogo-font-weight

    Trage hier die gewüschte maximale Breite des Logos in Pixeln ein.

    Tipp: Dieser Wert sollte nicht höher als die tatsächliche Bildbreite sein.

    Höhe

    Außenabstand oben @Desktop (≥992px)

    Hover-Effekt

    Text-Logo

    Logo-Text

    Textfarbe

    Schriftart

    Schriftgröße

    Strichstärke

    Konfiguration

    Basiskonfiguration


    Darstellungsart

    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Header 1.1 (Top-Bar – Logo + Suche + Aktions-Buttons – Navigation) • Header 1.2 (Top-Bar – Suche + Logo + Aktions-Buttons – Navigation) • Header 2.1 (Top-Bar + Aktions-Buttons – Logo – Navigation) • Full-Width Sticky-Header (Logo + Navigation + Aktions-Buttons)

    Beispiel Wert: Header 1.1 (Top-Bar – Logo + Suche + Aktions-Buttons – Navigation)

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-type

    Für den Header stehen Dir verschiedene Layouts zur Verfügung. Neben den "Basis-Headern" für eine maximale Kompatibilität mit Plugins Dritter ("Header 1" und "Header 2") bietet Dir ThemeWare® einen kompakten aber stärker modifizierten "Custom-Header", den "Full-Width Sticky-Header".

    Wichtig: Bitte prüfe die Darstellungsart der Suche und die Position der USP-Bar weil diese abhängig vom gewählten Header sind.


    Außenabstand oben @Desktop (≥992px)

    Feldtyp: Nummernfeld

    Beispiel Wert: 0

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-margin-top


    Feldtyp: Nummernfeld

    Beispiel Wert: 10

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-padding-top


    Feldtyp: Nummernfeld

    Beispiel Wert: 20

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-padding-bottom


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

    Beispiel Wert: Container-Max-Width (Full-width-boxed)

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Basis-Header ('Header 1' und 'Header 2')"

    Technischer Name: twt-header-width


    Feldtyp: Nummernfeld

    Beispiel Wert: 40

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Basis-Header ('Header 1' und 'Header 2')"

    Technischer Name: twt-header-height


    Feldtyp: Nummernfeld

    Beispiel Wert: 1200

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Custom-Header: ('Full-width Sticky-Header')"

    Technischer Name: twt-custom-header-nav-max-width


    Feldtyp: Farbauswahl

    Beispiel Wert: #ffffff

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-background-color-desktop


    Feldtyp: Farbauswahl

    Beispiel Wert: rgba(255, 255, 255, 0)

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-actions-background-color


    Feldtyp: Medienauswahl

    Beispiel Wert: ``

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

    Technischer Name: twt-header-background-image


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • anzeigen

    Beispiel Wert: anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

    Technischer Name: twt-header-background-image-show


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Ursprüngliche Abmessungen (auto) • Hintergrund vollständig abdecken (cover) • Hintergrund vollständig abdecken (contain)

    Beispiel Wert: Ursprüngliche Abmessungen (auto)

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

    Technischer Name: twt-header-background-image-size


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Links, Oben • Links, Mitte • Links, Unten • Rechts, Oben • Rechts, Mitte • Rechts, Unten • Mitte, Oben • Mitte, Mitte • Mitte, Unten

    Beispiel Wert: Links, Oben

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

    Technischer Name: twt-header-background-image-position


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Keine Wiederholung (no-repeat) • Horizontal und vertikal (repeat) • Horizontal (repeat-x) • Vertikal (repeat-y)

    Beispiel Wert: Horizontal und vertikal (repeat)

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

    Technischer Name: twt-header-background-image-repeat


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Hintergrundbild scrollt mit der Seite (scroll) • Hintergrundbild bleibt fixier (fixed)

    Beispiel Wert: Hintergrundbild bleibt fixier (fixed)

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

    Technischer Name: twt-header-background-image-attachment


    Feldtyp: Nummernfeld

    Beispiel Wert: 14

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

    Technischer Name: twt-header-dropdown-font-size


    Feldtyp: Farbauswahl

    Beispiel Wert: #111111

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

    Technischer Name: twt-header-dropdown-color


    Feldtyp: Farbauswahl

    Beispiel Wert: $sw-color-brand-primary

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

    Technischer Name: twt-header-dropdown-color-hover


    Feldtyp: Farbauswahl

    Beispiel Wert: #e0e0e0

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

    Technischer Name: twt-header-dropdown-border-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #ffffff

    Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

    Technischer Name: twt-header-dropdown-background-color

    Konfiguration


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • anzeigen

    Beispiel Wert: anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche"

    Technischer Name: twt-header-search-show


    Feldtyp: Auswahlfeld

    Innenabstand oben

    Innenabstand unten

    Basis-Header "Header 1" and "Header 2"

    Breite

    Wähle den Größenmodus des Headers aus.

    Höhe

    Custom-Header "Full-Width Sticky-Header"

    Maximale Breite

    Farbkonfiguration

    Hintergrundfarbe @Phone (Querformat) (≥576px)

    Hintergrundfarbe (Aktions-Buttons) @Desktop

    Hintergrundbild

    Hintergrundbild

    Hintergrundbild anzeigen

    Abmessungen

    auto Das auto Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.

    cover Die Größe des Bildes wird so angepasst, dass das Seitenverhältnis beibehalten wird und der gesamte Inhaltsrahmen des Elements ausgefüllt wird.

    contain Das Bild wird so skaliert, dass sein Seitenverhältnis beibehalten wird und es in den Inhaltsrahmen des Elements passt.

    Position

    Wiederholung

    Fixierung

    Scroll: Das Hintergrundbild scrollt zusammen mit Text und Bildern.

    Fixed: Fixiert das Hintergrundbild an einer festen Position im Browserfenster und erweckt beim Scrollen den Anschein, die folgenden Inhalte würden über das Hintergrundbild geschoben.

    Dropdowns

    Schriftgröße (Dropdown)

    Textfarbe (Dropdowns)

    Textfarbe (Dropdowns) @hover

    Rahmenfarbe (Dropdowns)

    Hintergrundfarbe (Dropdowns)

    Verfügbare Werte: • Eingabefeld (Standard) • Flyout-Suche • Vollbildsuche • Global-Suche @Desktop (nur verfügbar mit "Header 1.1")

    Beispiel Wert: Eingabefeld (Standard)

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-search-type


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht abgerundet (Standard) • runde Ecken • individuelle Rundung

    Beispiel Wert: nicht abgerundet (Standard)

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-search-input-corner-type


    Feldtyp: Nummernfeld

    Beispiel Wert: 10

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-search-input-border-radius


    Feldtyp: Farbauswahl

    Beispiel Wert: #333333

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-search-input-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #e4e7ea

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-search-input-border-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #ffffff

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-search-input-background-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #ffffff

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-search-btn-icon-color


    Feldtyp: Farbauswahl

    Beispiel Wert: $sw-color-brand-primary

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-search-btn-border-color


    Feldtyp: Farbauswahl

    Beispiel Wert: $sw-color-brand-primary

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-search-btn-background-color


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • links ausrichten • zentriert ausrichten • rechts ausrichten

    Beispiel Wert: links ausrichten

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Typografie"

    Technischer Name: twt-header-search-text-align


    Feldtyp: Textfeld

    Beispiel Wert: 500

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Eingabefeld'"

    Technischer Name: twt-header-search-max-width


    Feldtyp: Textfeld

    Beispiel Wert: 100%

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Eingabefeld'"

    Technischer Name: twt-header-search-width-desktop


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Container-max-width (Full-width-boxed) • 100% (Full-width)

    Beispiel Wert: Container-max-width (Full-width-boxed)

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

    Technischer Name: twt-header-search-flyout-container-width


    Feldtyp: Textfeld

    Beispiel Wert: 500

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

    Technischer Name: twt-header-search-flyout-max-width


    Feldtyp: Textfeld

    Beispiel Wert: 100%

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

    Technischer Name: twt-header-search-flyout-max-width-desktop


    Feldtyp: Nummernfeld

    Beispiel Wert: 15

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

    Technischer Name: twt-header-search-flyout-padding


    Feldtyp: Farbauswahl

    Beispiel Wert: #eef2f5

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

    Technischer Name: twt-header-phone-search-flyout-background-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #eef2f5

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

    Technischer Name: twt-header-search-flyout-background-color


    Feldtyp: Farbauswahl

    Beispiel Wert: rgba(0, 0, 0, 0.9)

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Vollbildsuche'"

    Technischer Name: twt-header-search-fullscreen-backdrop-color


    Feldtyp: Nummernfeld

    Beispiel Wert: 0

    Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Vollbildsuche'"

    Technischer Name: twt-header-search-fullscreen-backdrop-effect-blur

    Suche anzeigen

    Basiskonfiguration

    Darstellungsart

    Eingabefeld (Standard) Verfügbar in "Header 1.1" und "Header 1.2".

    Flyout-Suche / Vollbildsuche Verfügbar in allen Headern.

    Muss für "Header 2.1" und "Full-Width Sticky-Header" ausgewählt werden.

    Global-Suche Verfügbar in "Header 1.1" im Desktop-Viewport. Nutzt die Farbe: "Layout" > "Hintergrundfarbe (Aktions-Buttons)".

    Ecken

    abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

    runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

    Abgerundete Ecken (individuelle Rundung)

    Hinweis: Diese Konfiguration bezieht sich auf Ecken-Konfiguration "individuelle Rundung".

    Farbkonfiguration

    Textfarbe (Input)

    Rahmenfarbe (Input)

    Hintergrundfarbe (Input)

    Iconfabe (Button)

    Rahmenfarbe (Button)

    Hintergrundfarbe (Button)

    Typografie

    Textausrichtung

    Darstellungsart 'Eingabefeld'

    Maximale Breite

    Gebe die maximale Breite des Eingabefeldes in Pixeln (z.B. 500 oder 500px) an.

    Maximale Breite @Desktop (≥1200px)

    Gebe die maximale Breite des Eingabefeldes, ab dem Desktop-Viewport (≥1200px), in Pixeln (z.B. 500 oder 500px) oder mit 100% an.

    Darstellungsart 'Flyout-Suche'

    Breite

    Maximale Breite @Phone (Querformat) (≥576px)

    Gebe die maximale Breite des Eingabefeldes in Pixeln (z.B. 500 oder 500px) an.

    Maximale Breite @Desktop (≥1200px)

    Gebe die maximale Breite des Eingabefeldes, ab dem Desktop-Viewport (≥1200px), in Pixeln (z.B. 500 oder 500px) oder mit 100% an.

    Innenabstand

    Die Option "Flyout-Suche" muss unter "Suche" > "Darstellungsart" ausgewählt sein.

    Hintergrundfarbe @Phone (<576px)

    Hintergrundfarbe

    Die Option "Flyout-Suche" muss unter "Suche" > "Darstellungsart" ausgewählt sein.

    Darstellungsart 'Vollbildsuche'

    Overlay-Farbe

    Wähle die gewünschte Hintergrundfarbe vom Overlay (backdrop) aus.

    Die Option "Vollbildsuche" muss als "Darstellungsart" ausgewählt sein.

    Glaseffekt [px] (Overlay)

    Gib die gewünschte Stärke für den Unschärfe-Effekt vom Overlay (backdrop) ein.

    Konfiguration


    Top-Bar anzeigen

    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • anzeigen

    Beispiel Wert: anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar"

    Technischer Name: twt-header-top-bar-show

    Basis-Header "Header 1" and "Header 2"


    Breite

    Feldtyp: Auswahlfeld

    Verfügbare Werte: • Standard • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

    Beispiel Wert: Standard

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Basis-Header ('Header 1' und 'Header 2')"

    Technischer Name: twt-header-top-bar-width


    Feldtyp: Farbauswahl

    Beispiel Wert: #555555

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-top-bar-color


    Feldtyp: Farbauswahl

    Beispiel Wert: $sw-color-brand-primary

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-top-bar-color-hover


    Feldtyp: Farbauswahl

    Beispiel Wert: #555555

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-top-bar-color-hotline


    Feldtyp: Farbauswahl

    Beispiel Wert: #ffffff

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-top-bar-border-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #ffffff

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-top-bar-background-color


    Feldtyp: Nummernfeld

    Beispiel Wert: 14

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Typografie"

    Technischer Name: twt-header-top-bar-font-size


    Feldtyp: Nummernfeld

    Beispiel Wert: 30

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Typografie"

    Technischer Name: twt-header-top-bar-line-height


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • links ausrichten • rechts ausrichten • zentriert ausrichten • space-between • space-around

    Beispiel Wert: rechts ausrichten

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Typografie"

    Technischer Name: twt-header-top-bar-justify-content


    Feldtyp: Nummernfeld

    Beispiel Wert: 1

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Typografie"

    Technischer Name: twt-header-top-bar-icon-font-size


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • anzeigen

    Beispiel Wert: nicht anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Hotline"

    Technischer Name: twt-header-top-bar-hotline-show


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • immer anzeigen • Tablet (Querformat) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

    Beispiel Wert: immer anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Hotline"

    Technischer Name: twt-header-top-bar-hotline-label-show


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • anzeigen

    Beispiel Wert: anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Sprachauswahl"

    Technischer Name: twt-header-top-bar-languages-menu-show


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • immer anzeigen • Tablet (Querformat) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

    Beispiel Wert: immer anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Sprachauswahl"

    Technischer Name: twt-header-top-bar-languages-menu-text-show


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nein • ja (Länderflaggen) • ja (Sprachflaggen)

    Beispiel Wert: nein

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Sprachauswahl"

    Technischer Name: twt-languages-menu-additional-flags


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nein • ja (Länderflaggen) • ja (Sprachflaggen)

    Beispiel Wert: nein

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Sprachauswahl"

    Technischer Name: twt-languages-menu-additional-flags-extended


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nein • ja

    Beispiel Wert: nein

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Sprachauswahl"

    Technischer Name: twt-languages-menu-shopware-language-pack


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • anzeigen

    Beispiel Wert: anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Währungsauswahl"

    Technischer Name: twt-header-top-bar-currencies-menu-show


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • immer anzeigen • Tablet (Querformat) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

    Beispiel Wert: immer anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Währungsauswahl"

    Technischer Name: twt-header-top-bar-currencies-menu-text-show


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • anzeigen als Dropdown • anzeigen als Liste

    Beispiel Wert: anzeigen als Dropdown

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Service-Menü [Pro-Edition]"

    Technischer Name: twt-header-top-bar-service-menu-show


    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nicht anzeigen • immer anzeigen • Tablet (Querformat) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

    Beispiel Wert: immer anzeigen

    Pfad zur Einstellung: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Service-Menü [Pro-Edition]"

    Technischer Name: twt-header-top-bar-service-menu-text-show

    Wähle den Größenmodus der "Top-Bar" aus.

    Standard: Die Breite der "Top-Bar" orientiert sich an der Konfiguration der Breite des Headers.

    Hinweis: Diese Konfiguration gilt nicht im Grundlayout "boxed".

    Farbkonfiguration

    Textfarbe

    Textfarbe @hover

    Textfarbe (Hotline)

    Rahmenfarbe

    Hintergrundfarbe

    Typografie

    Schriftgröße

    Zeilenhöhe

    Textausrichtung

    Wähle die gewünschte horizontale Ausrichtung aus.

    links Elemente werden am Anfang des Containers positioniert.

    rechts Elemente werden am Ende des Containers positioniert.

    zentriert Die Elemente befinden sich in der Mitte des Containers.

    space-between Elemente werden gleichmäßig verteilt. Das erste Element an den Start, das letzte an das Ende.

    space-around Elemente werden gleichmäßig verteilt. Alle Elemente haben gleiche Abstände um sie herum.

    Hinweis: Beim Header 2.1 wird die Ausrichtung nicht berücksichtigt. Die Top-Bar steht dort immer links, weil die Aktions-Buttons die rechte Seite der Zeile belegen.

    Icongröße

    Wenn die Icongröße '1' ist, werden die Icons ausgeblendet.

    Hotline

    Hotline anzeigen

    Um den Text zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.header.serviceHotlineText

    Hinweis: Fehlt die Hotline trotz Aktivierung, übernimmt vermutlich eine Erweiterung die Top-Bar (z.B. Shopware Commercial ab Version 7.13). Stelle dann Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Header" => "Top-Bar" auf "ThemeWare® (Plugin-kompatibel)".

    Label anzeigen ab ...

    Um das Label zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.header.serviceHotline

    Sprachauswahl

    Sprachauswahl anzeigen

    Label anzeigen ab ...

    Flaggensymbole laden

    Shopware hat bis auf DE und EN alle Flaggensymbole entfernt. Die anderen Flaggen sind nun über die Erweiterung "Sprachpaket" verfügbar.

    Aktiviere diese Konfiguration, wenn du weitere Flaggensymbole laden möchtest.

    Länderflaggen: Die Flagge richtet sich nach dem Land. Beim ISO-Code "de-CH" wird die Flagge der Schweiz angezeigt.

    Sprachflaggen: Die Flagge richtet sich nach der Sprache. Beim ISO-Code "de-CH" wird die Flagge Deutschlands angezeigt.

    Erweiterte Flaggensymbole laden

    Aktiviere dies Konfiguration um noch mehr Flaggensymbole zu laden. Dabei handelt es sich um aufwendige Flaggen wie beispielsweise die Flagge der USA.

    Länderflaggen: Die Flagge richtet sich nach dem Land. Beim ISO-Code "de-CH" wird die Flagge der Schweiz angezeigt.

    Sprachflaggen: Die Flagge richtet sich nach der Sprache. Beim ISO-Code "de-CH" wird die Flagge Deutschlands angezeigt.

    Shopware Sprachpaket

    Aktiviere diese Konfiguration wenn du bereits das Shopware Sprachpaket nutzt um doppelte Länderflaggen zu vermeiden.

    Währungsauswahl

    Währungsauswahl anzeigen

    Label anzeigen ab ...

    Service-Menü

    Service-Menü anzeigen

    Mit dieser Konfiguration kannst du die "Footer-Service-Navigation" in der Top-Bar anzeigen lassen.

    Die Navigation selber muss im Verkaufskanal zugewiesen werden.

    Um das Label zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: header.indexLinkService

    Hinweis: Fehlt das Service-Menü trotz Aktivierung, übernimmt vermutlich eine Erweiterung die Top-Bar (z.B. Shopware Commercial ab Version 7.13). Stelle dann Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Header" => "Top-Bar" auf "ThemeWare® (Plugin-kompatibel)".

    Label anzeigen ab ...

    Konfiguration

    Basiskonfiguration


    Fixiert

    Feldtyp: Auswahlfeld

    Verfügbare Werte: • nein • ja

    Beispiel Wert: nein

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-minimal-fixed


    Höhe

    Feldtyp: Textfeld

    Beispiel Wert: 90

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Basiskonfiguration"

    Technischer Name: twt-header-minimal-height


    Feldtyp: Farbauswahl

    Beispiel Wert: #555555

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #555555

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-link-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #222222

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-link-color-hover


    Feldtyp: Farbauswahl

    Beispiel Wert: #eeeeee

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-border-bottom-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #fafafa

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-background-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #444444

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-home-btn-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #666666

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-home-btn-color-hover


    Feldtyp: Farbauswahl

    Beispiel Wert: #e9e9e9

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-home-btn-border-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #d4d4d4

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-home-btn-border-color-hover


    Feldtyp: Farbauswahl

    Beispiel Wert: #ffffff

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-home-btn-background-color


    Feldtyp: Farbauswahl

    Beispiel Wert: #f1f1f1

    Pfad zur Einstellung: Tab "Header" => Bereich "Minimaler Header (im Checkout)" => Abschnitt "Farbkonfiguration"

    Technischer Name: twt-header-minimal-home-btn-background-color-hover

    Farbkonfiguration

    Textfarbe

    Linkfarbe

    Linkfarbe @hover

    Rahmenfarbe unten

    Hintergrundfarbe

    Textfarbe (Home-Button)

    Textfarbe (Home-Button) @hover

    Rahmenfarbe (Home-Button)

    Rahmenfarbe (Home-Button) @hover

    Hintergrundfarbe (Home-Button)

    Hintergrundfarbe (Home-Button) @hover