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

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".

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

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.

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

If icon size is '1' the icons won't be displayed.

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

To edit or translate the text please use the following snippet: twt.header.serviceHotlineText

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

To edit or translate the label please use the following snippet: twt.header.serviceHotline

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

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.

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

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.

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

Activate this configuration if you already use the Shopware language pack to avoid duplicate country flags.

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

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

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

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

PreviousTop bar NextSearch

Last updated 8 months ago

Was this helpful?