> 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/top-bar/konfiguration.md).

# 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' and 'Header 2')"

**Technischer Name**:\
`twt-header-top-bar-width`

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

## Farbkonfiguration

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#555555`

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

**Technischer Name**:\
`twt-header-top-bar-color`

***

### Textfarbe @hover

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

***

### Textfarbe (Hotline)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#555555`

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

**Technischer Name**:\
`twt-header-top-bar-color-hotline`

***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

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

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

**Technischer Name**:\
`twt-header-top-bar-border-color`

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

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

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

**Technischer Name**:\
`twt-header-top-bar-background-color`

## Typografie

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`14`

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

**Technischer Name**:\
`twt-header-top-bar-font-size`

***

### Zeilenhöhe

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`30`

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

**Technischer Name**:\
`twt-header-top-bar-line-height`

***

### Textausrichtung

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

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

***

### Icongröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`1`

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

**Technischer Name**:\
`twt-header-top-bar-icon-font-size`

{% hint style="info" %}
Wenn die Icongröße '1' ist, werden die Icons ausgeblendet.
{% endhint %}

## Hotline

***

### Hotline anzeigen

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

{% hint style="info" %}
Um den Text zu bearbeiten oder übersetzten, nutze bitte den Textbaustein: twt.header.serviceHotlineText
{% endhint %}

***

### Label anzeigen ab ...

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

{% hint style="info" %}
Um das Label zu bearbeiten oder übersetzten, nutze bitte den Textbaustein: twt.header.serviceHotline
{% endhint %}

## Sprachauswahl

***

### Sprachauswahl anzeigen

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

***

### Label anzeigen ab ...

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

***

### Flaggensymbole laden

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

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

***

### Erweiterte Flaggensymbole laden

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

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

***

### Shopware Sprachpaket

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

{% hint style="info" %}
Aktiviere diese Konfiguration wenn du bereits das Shopware Sprachpaket nutzt um doppelte Länderflaggen zu vermeiden.
{% endhint %}

## Währungsauswahl

***

### Währungsauswahl anzeigen

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

***

### Label anzeigen ab ...

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

## Service-Menü

***

### Service-Menü anzeigen

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

{% hint style="info" %}
Shopware hat das Service-Menü mit Version 6.5 im Header entfernt und sieht dies nur noch als "Footer-Service-Navigation" vor. Mit dieser Konfiguration, kannst du die "Footer-Service-Navigation" wieder in der Top-Bar anzeigen lassen.

Die Navigation selber muss im Verkaufskanal zugewiesen werden.

Um das Label zu bearbeiten oder übersetzten, nutze bitte den Textbaustei: header.indexLinkService
{% endhint %}

***

### Label anzeigen ab ...

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