# 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ü"

**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ü"

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doku.themeware.design/handbuch/header/top-bar/konfiguration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.