# Configuration

***

### Show top bar

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Header" => Block "Top bar"

**Technical name**:\
`twt-header-top-bar-show`

## Basic headers "Header 1" and "Header 2"

***

### Width

**Field type**:\
Select

**Available values**:\
• default\
• Container-Max-Width (Full-width-boxed)\
• 100% (Full-width)

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Basic headers "Header 1" and "Header 2""

**Technical name**:\
`twt-header-top-bar-width`

{% hint style="info" %}
Select the sizing mode of the "Top bar".

**default**: The width of the "Top bar" is based on the configuration of the width of the header.

**Note**: This configuration does not apply in the basic layout "boxed".
{% endhint %}

## Colour configuration

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#555555`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Colour configuration"

**Technical name**:\
`twt-header-top-bar-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Colour configuration"

**Technical name**:\
`twt-header-top-bar-color-hover`

***

### Text colour (Hotline)

**Field type**:\
Color picker

**Example value**:\
`#555555`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Colour configuration"

**Technical name**:\
`twt-header-top-bar-color-hotline`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Colour configuration"

**Technical name**:\
`twt-header-top-bar-border-color`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Colour configuration"

**Technical name**:\
`twt-header-top-bar-background-color`

## Typography

***

### Font size

**Field type**:\
Number field

**Example value**:\
`14`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Typography"

**Technical name**:\
`twt-header-top-bar-font-size`

***

### Line height

**Field type**:\
Number field

**Example value**:\
`30`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Typography"

**Technical name**:\
`twt-header-top-bar-line-height`

***

### Text alignment

**Field type**:\
Select

**Available values**:\
• align left\
• align right\
• align center\
• space-between\
• space-around

**Example value**:\
`align right`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Typography"

**Technical name**:\
`twt-header-top-bar-justify-content`

{% hint style="info" %}
Select the desired horizontal alignment.

**left**\
Items are positioned at the beginning of the container.

**right**\
Items are positioned at the end of the container.

**center**\
Items are positioned at the center of the container.

**space-between**\
Items are positioned with space between them.

**space-around**\
Items are positioned with space before, between, and after them.
{% endhint %}

***

### Icon size

**Field type**:\
Number field

**Example value**:\
`1`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Typography"

**Technical name**:\
`twt-header-top-bar-icon-font-size`

{% hint style="info" %}
If icon size is '1' the icons won't be displayed.
{% endhint %}

## Hotline

***

### Show hotline

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Hotline"

**Technical name**:\
`twt-header-top-bar-hotline-show`

{% hint style="info" %}
To edit or translate the text please use the following snippet: twt.header.serviceHotlineText
{% endhint %}

***

### Show label from...

**Field type**:\
Select

**Available values**:\
• don't show\
• always show\
• Tablet (landscape) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

**Example value**:\
`always show`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Hotline"

**Technical name**:\
`twt-header-top-bar-hotline-label-show`

{% hint style="info" %}
To edit or translate the label please use the following snippet: twt.header.serviceHotline
{% endhint %}

## Language menu

***

### Show language menu

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Language menu"

**Technical name**:\
`twt-header-top-bar-languages-menu-show`

***

### Show label from...

**Field type**:\
Select

**Available values**:\
• don't show\
• always show\
• Tablet (landscape) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

**Example value**:\
`always show`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Language menu"

**Technical name**:\
`twt-header-top-bar-languages-menu-text-show`

***

### Load flag icons

**Field type**:\
Select

**Available values**:\
• no\
• yes (Country flags)\
• yes (Language flags)

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Language menu"

**Technical name**:\
`twt-languages-menu-additional-flags`

{% hint style="info" %}
Shopware has removed all flag icons except for DE and EN. The other flags are now available via the "Language Pack" extension.

Activate this configuration if you want to load more flag icons.

**Country flags**: The flag depends on the country. With ISO code "de-CH" the flag of Switzerland is displayed.

**Language flags**: The flag depends on the language. With ISO code "de-CH", the flag of Germany is displayed.
{% endhint %}

***

### Load extended flag icons

**Field type**:\
Select

**Available values**:\
• no\
• yes (Country flags)\
• yes (Language flags)

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Language menu"

**Technical name**:\
`twt-languages-menu-additional-flags-extended`

{% hint style="info" %}
Activate this configuration to load even more flag symbols. These are complex flags, such as the flag of the USA.

**Country flags**: The flag depends on the country. With ISO code "de-CH" the flag of Switzerland is displayed.

**Language flags**: The flag depends on the language. With ISO code "de-CH", the flag of Germany is displayed.
{% endhint %}

***

### Shopware Language Pack

**Field type**:\
Select

**Available values**:\
• no\
• yes

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Language menu"

**Technical name**:\
`twt-languages-menu-shopware-language-pack`

{% hint style="info" %}
Activate this configuration if you already use the Shopware language pack to avoid duplicate country flags.
{% endhint %}

## Currencies menu

***

### Show currencies menu

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Currencies menu"

**Technical name**:\
`twt-header-top-bar-currencies-menu-show`

***

### Show label from...

**Field type**:\
Select

**Available values**:\
• don't show\
• always show\
• Tablet (landscape) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

**Example value**:\
`always show`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Currencies menu"

**Technical name**:\
`twt-header-top-bar-currencies-menu-text-show`

## Service menu

***

### Show service menu

**Field type**:\
Select

**Available values**:\
• don't show\
• show as dropdown\
• show as list

**Example value**:\
`show as dropdown`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Service menu"

**Technical name**:\
`twt-header-top-bar-service-menu-show`

{% hint style="info" %}
Shopware has removed the service menu in the header with version 6.5 and provides this only as "Footer Service Navigation". With this configuration, you can display the "Footer Service Navigation" in the top bar again.

The navigation itself must be assigned in the Sales Channel.

To edit or translate the label please use the following snippet: header.indexLinkService
{% endhint %}

***

### Show label from...

**Field type**:\
Select

**Available values**:\
• don't show\
• always show\
• Tablet (landscape) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

**Example value**:\
`always show`

**Path to the configuration**:\
Tab "Header" => Block "Top bar" => Section "Service menu"

**Technical name**:\
`twt-header-top-bar-service-menu-text-show`