> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/handbuch/header/mobiler-header/konfiguration.md).

# 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`

{% hint style="info" %}
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.
{% endhint %}

***

### 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`

***

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

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`50`

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

**Technischer Name**:\
`twt-header-height-mobile`

{% hint style="info" %}
Nur verfügbar bei der aktiver Darstellungsart "Verkaufsfördernde Navigation".
{% endhint %}

***

### Fixiert

**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`

## Farbkonfiguration

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

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

**Technischer Name**:\
`twt-header-phone-background-color`

## Aktions-Buttons

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

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

**Technischer Name**:\
`twt-header-phone-btn-color`

***

### Textfarbe @hover

**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`

***

### Iconfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

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

**Technischer Name**:\
`twt-header-phone-btn-icon-color`

***

### Iconfarbe @hover

**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`

***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

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

**Technischer Name**:\
`twt-header-phone-btn-border-color`

***

### Rahmenfarbe @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-hover`

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

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

**Technischer Name**:\
`twt-header-phone-btn-background-color`

***

### Hintergrundfarbe @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-hover`

## Verkaufsfördernde Navigation

***

### Darstellungsart

**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`

***

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

**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`

{% hint style="info" %}
Nur verfügbar bei der aktiver Darstellungsart "Verkaufsfördernde Navigation".
{% endhint %}

***

### Logo-Position @Phone (<576px)

**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`

***

### Hintergrundfarbe (Navigation)

**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`

***

### Schlagschatten

**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`

***

### Schattenfarbe

**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`

***

### Ecken (Aktions-Buttons)

**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`

{% hint style="info" %}
**abgerundete Ecken**\
Verwendet die Konfiguration "Abgerundete Ecken". (siehe "Layout" > "Layout" > "Abgerundete Ecken")

**runde Ecken**\
Verwendet einen vordefinierten Radius für runde Ecken.
{% endhint %}

***

### Home-Button anzeigen (Aktions-Button)

**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`

***

### Reihenfolge: Home-Button (Aktions-Button)

**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`

***

### Reihenfolge: Navigation-Button (Aktions-Button)

**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`

***

### Reihenfolge: Suchen-Button (Aktions-Button)

**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`

***

### Reihenfolge: Warenkorb-Button (Aktions-Button)

**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`

***

### Reihenfolge: Merkzettel-Button (Aktions-Button)

**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`

***

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

**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`

***

### Warenkorb-Button hervorheben

**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`

{% hint style="info" %}
Nur verfügbar bei der aktiver Darstellungsart "Verkaufsfördernde Navigation".
{% endhint %}

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

***

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

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen

**Beispiel Wert**:\
`anzeigen`

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

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