Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Top bar – Logo + Search + Action buttons – Navigation
Top bar – Search + Logo + Action buttons – Navigation
Top bar + Action buttons – Logo – Navigation
Logo + Navigation + Action buttons
ThemeWare® USP Bar
ThemeWare® Announcement Banner
Shop logo
Search
Action buttons (Wishlist, "My Account", Shopping cart)
Top bar (Language selection, Currency selection, Service menu)
Top navigation
Field type: Select
Available values: • disabled (default) • enabled (Header overlays the Shopping Experience)
Example value:
disabled (default)
Path to the configuration: Tab "Header" => Block "Shopping Experiences Header"
Technical name:
twt-shopping-experiences-header-position
The header can overlay the Shopping Experience on the 'home page'.
You can also activate this header for categories with a custom field.
The "Shopping Experiences Header" is especially suitable for overlaying images and sliders.
Important: The background colour of the header and it's elements should be configured with "transparent" or "rgba(0, 0, 0, 0)" so that the element below is visible.
You can find more information on flags in the language selection in the following article:
Field type: Select
Available values: • Header 1.1 (Top bar – Logo + Search + Action buttons – Navigation) • Header 1.2 (Top bar – Search + Logo + Action buttons – Navigation) • Header 2.1 (Top bar + Action buttons – Logo – Navigation) • Full-width sticky header (Logo + Navigation + Action buttons)
Example value:
Header 1.1 (Top bar – Logo + Search + Action buttons – Navigation)
Path to the configuration: Tab "Header" => Block "Layout" => Section "Basic configuration"
Technical name:
twt-header-type
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Layout" => Section "Basic configuration"
Technical name:
twt-header-margin-top
Field type: Number field
Example value:
10
Path to the configuration: Tab "Header" => Block "Layout" => Section "Basic configuration"
Technical name:
twt-header-padding-top
Field type: Number field
Example value:
20
Path to the configuration: Tab "Header" => Block "Layout" => Section "Basic configuration"
Technical name:
twt-header-padding-bottom
Field type: Select
Available values: • Container-Max-Width (Full-width-boxed) • 100% (Full-width)
Example value:
Container-Max-Width (Full-width-boxed)
Path to the configuration: Tab "Header" => Block "Layout" => Section "Basic headers ('Header 1' and 'Header 2')"
Technical name:
twt-header-width
Field type: Number field
Example value:
40
Path to the configuration: Tab "Header" => Block "Layout" => Section "Basic headers ('Header 1' and 'Header 2')"
Technical name:
twt-header-height
Field type: Number field
Example value:
1200
Path to the configuration: Tab "Header" => Block "Layout" => Section "Custom header ('Full-width sticky header')"
Technical name:
twt-custom-header-nav-max-width
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Layout" => Section "Colour configuration"
Technical name:
twt-header-background-color-desktop
Field type: Color picker
Example value:
rgba(255, 255, 255, 0)
Path to the configuration: Tab "Header" => Block "Layout" => Section "Colour configuration"
Technical name:
twt-header-actions-background-color
Field type: Media selection
Example value: ``
Path to the configuration: Tab "Header" => Block "Layout" => Section "Background-image"
Technical name:
twt-header-background-image
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Header" => Block "Layout" => Section "Background-image"
Technical name:
twt-header-background-image-show
Field type: Select
Available values: • Initial size (auto) • Cover background completely (cover) • Cover background completely (contain)
Example value:
Initial size (auto)
Path to the configuration: Tab "Header" => Block "Layout" => Section "Background-image"
Technical name:
twt-header-background-image-size
Field type: Select
Available values: • left, top • left, center • left, bottom • right, top • right, center • right, bottom • center, top • center, center • center, bottom
Example value:
left, top
Path to the configuration: Tab "Header" => Block "Layout" => Section "Background-image"
Technical name:
twt-header-background-image-position
Field type: Select
Available values: • No repeat (no-repeat) • Horizontal and vertical (repeat) • Horizontal (repeat-x) • Vertical (repeat-y)
Example value:
Horizontal and vertical (repeat)
Path to the configuration: Tab "Header" => Block "Layout" => Section "Background-image"
Technical name:
twt-header-background-image-repeat
Field type: Select
Available values: • Background image scrolls with the page (scroll) • Background image stays fixed (fixed)
Example value:
Background image stays fixed (fixed)
Path to the configuration: Tab "Header" => Block "Layout" => Section "Background-image"
Technical name:
twt-header-background-image-attachment
Field type: Number field
Example value:
14
Path to the configuration: Tab "Header" => Block "Layout" => Section "Dropdowns"
Technical name:
twt-header-dropdown-font-size
Field type: Color picker
Example value:
#111111
Path to the configuration: Tab "Header" => Block "Layout" => Section "Dropdowns"
Technical name:
twt-header-dropdown-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Layout" => Section "Dropdowns"
Technical name:
twt-header-dropdown-color-hover
Field type: Color picker
Example value:
#e0e0e0
Path to the configuration: Tab "Header" => Block "Layout" => Section "Dropdowns"
Technical name:
twt-header-dropdown-border-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Layout" => Section "Dropdowns"
Technical name:
twt-header-dropdown-background-color
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Basic configuration"
Technical name:
twt-header-minimal-fixed
Field type: Text field
Example value:
90
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Basic configuration"
Technical name:
twt-header-minimal-height
Field type: Color picker
Example value:
#555555
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-color
Field type: Color picker
Example value:
#555555
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-link-color
Field type: Color picker
Example value:
#222222
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-link-color-hover
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-border-bottom-color
Field type: Color picker
Example value:
#fafafa
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-background-color
Field type: Color picker
Example value:
#444444
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-home-btn-color
Field type: Color picker
Example value:
#666666
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-home-btn-color-hover
Field type: Color picker
Example value:
#e9e9e9
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-home-btn-border-color
Field type: Color picker
Example value:
#d4d4d4
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-home-btn-border-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-home-btn-background-color
Field type: Color picker
Example value:
#f1f1f1
Path to the configuration: Tab "Header" => Block "Minimal header (in the Checkout)" => Section "Colour configuration"
Technical name:
twt-header-minimal-home-btn-background-color-hover
Field type: Select
Available values: • Image logo (default) • Text logo
Example value:
Image logo (default)
Path to the configuration: Tab "Header" => Block "Logo" => Section "Basic configuration"
Technical name:
twt-header-logo-type
Field type: Text field
Example value:
220
Path to the configuration: Tab "Header" => Block "Logo" => Section "Logo type 'Image logo'"
Technical name:
twt-header-logo-width
Field type: Text field
Example value:
auto
Path to the configuration: Tab "Header" => Block "Logo" => Section "Logo type 'Image logo'"
Technical name:
twt-header-logo-height
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Logo" => Section "Logo type 'Image logo'"
Technical name:
twt-header-logo-margin-top
Field type: Select
Available values: • no effect • reduce opacity
Example value:
reduce opacity
Path to the configuration: Tab "Header" => Block "Logo" => Section "Logo type 'Image logo'"
Technical name:
twt-header-logo-hover-type
Field type: Text field
Example value:
ThemeWare
Path to the configuration: Tab "Header" => Block "Logo" => Section "Logo type 'Text logo'"
Technical name:
twt-textlogo-content
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Logo" => Section "Logo type 'Text logo'"
Technical name:
twt-textlogo-fill
Field type: Select
Available values: • Text • Headlines
Example value:
Text
Path to the configuration: Tab "Header" => Block "Logo" => Section "Logo type 'Text logo'"
Technical name:
twt-textlogo-font-family
Field type: Number field
Example value:
24
Path to the configuration: Tab "Header" => Block "Logo" => Section "Logo type 'Text logo'"
Technical name:
twt-textlogo-font-size
Field type: Select
Available values: • light • normal • bold
Example value:
bold
Path to the configuration: Tab "Header" => Block "Logo" => Section "Logo type 'Text logo'"
Technical name:
twt-textlogo-font-weight
Various layouts are available for the header. In addition to the "Basic headers" for maximum compatibility with third-party plugins ("Header 1" and "Header 2"), ThemeWare® offers you a compact but more modified "Custom header", the "Full-width sticky header".
Important: Please check the layout type of the search and the position of the USP bar because these depend on the selected header.
Select the sizing mode of the header.
auto The auto keyword scales the background image in the appropriate direction to maintain the initial aspect ratio.
cover The image is sized to maintain its aspect ratio while filling the element's entire content box.
contain The image is sized to maintain its aspect ratio while fitting within the element's content box.
Scroll: The background image scrolls with the page.
Fixed: The background image stays fixed relative to the viewport.
Enter the desired maximum width of the logo in pixels.
Tip: This value should not be higher than the actual width of the image.
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')"
Technical name:
twt-sticky-nav-main-show
Field type: Select
Available values: • fixed when scroll down • fixed when scroll up
Example value:
fixed when scroll up
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Basic configuration"
Technical name:
twt-sticky-nav-main-type
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Basic configuration"
Technical name:
twt-sticky-nav-main-scroll-top
Field type: Select
Available values: • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)
Example value:
Tablet (landscape) (≥992px)
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Basic configuration"
Technical name:
twt-sticky-nav-main-breakpoint
Field type: Number field
Example value:
50
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Basic configuration"
Technical name:
twt-sticky-nav-main-height
Field type: Select
Available values: • align left • align right • align center • space-between • space-around
Example value:
align center
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Basic configuration"
Technical name:
twt-sticky-nav-main-justify-content
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Basic configuration"
Technical name:
twt-sticky-nav-main-toggle
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Basic configuration"
Technical name:
twt-sticky-nav-main-cart-show
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Basic configuration"
Technical name:
twt-sticky-nav-main-search-show
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Colour configuration"
Technical name:
twt-sticky-nav-main-background-color
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Logo"
Technical name:
twt-sticky-nav-main-logo-show
Field type: Text field
Example value:
120
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Logo"
Technical name:
twt-sticky-nav-main-logo-width
Field type: Text field
Example value:
auto
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Logo"
Technical name:
twt-sticky-nav-main-logo-height
Field type: Number field
Example value:
20
Path to the configuration: Tab "Header" => Block "Sticky top navigation (Basic headers: 'Header 1' and 'Header 2')" => Section "Logo"
Technical name:
twt-sticky-nav-main-logo-margin-right
The scrollTop property sets the number of pixels an element's content is scrolled vertically.
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.
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Header" => Block "Search"
Technical name:
twt-header-search-show
Field type: Select
Available values: • Input (default) • Flyout search • Fullscreen search • Global Search @Desktop (only available with "Header 1.1")
Example value:
Input (default)
Path to the configuration: Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:
twt-header-search-type
Field type: Select
Available values: • not rounded (default) • round corners • individual radius
Example value:
not rounded (default)
Path to the configuration: Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:
twt-header-search-input-corner-type
Field type: Number field
Example value:
10
Path to the configuration: Tab "Header" => Block "Search" => Section "Basic configuration"
Technical name:
twt-header-search-input-border-radius
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-input-color
Field type: Color picker
Example value:
#e4e7ea
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-input-border-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-input-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-btn-icon-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-btn-border-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Search" => Section "Colour configuration"
Technical name:
twt-header-search-btn-background-color
Field type: Select
Available values: • align left • align center • align right
Example value:
align left
Path to the configuration: Tab "Header" => Block "Search" => Section "Typography"
Technical name:
twt-header-search-text-align
Field type: Text field
Example value:
500
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Input'"
Technical name:
twt-header-search-max-width
Field type: Text field
Example value:
100%
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Input'"
Technical name:
twt-header-search-width-desktop
Field type: Select
Available values: • Container-max-width (Full-width-boxed) • 100% (Full-width)
Example value:
Container-max-width (Full-width-boxed)
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-container-width
Field type: Text field
Example value:
500
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-max-width
Field type: Text field
Example value:
100%
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-max-width-desktop
Field type: Number field
Example value:
15
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-padding
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-phone-search-flyout-background-color
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"
Technical name:
twt-header-search-flyout-background-color
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.9)
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Fullscreen search'"
Technical name:
twt-header-search-fullscreen-backdrop-color
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Search" => Section "Layout type 'Fullscreen search'"
Technical name:
twt-header-search-fullscreen-backdrop-effect-blur
Input (default) Available in "Header 1.1" and "Header 1.2".
Flyout search / Fullscreen search Available in all headers.
Must be selected for "Header 2.1" and "Full-width sticky header".
Global Search Available in "Header 1.1" in the desktop viewport. Use the color: "Layout" > "Background colour (Action buttons)".
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Note: This configuration relates to the corner type "individual radius".
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
Option "Flyout search" in "Search" > "Layout type" must be selected.
Option "Flyout search" in "Search" > "Layout type" must be selected.
Select the desired background colour of the backdrop.
The option "Fullscreen search" must be selected as the "Layout type".
Enter the desired value for the blur effect of the backdrop.
Field type: Select
Available values: • default • Sales Promoting Navigation
Example value:
default
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Basic configuration"
Technical name:
twt-header-phone-type
The layout type "Sales Promoting Navigation" moves the navigation to the bottom of the screen for better accessibility on smartphones.
Note: Please use the layout type "default" if a third party plugin does not support the "Sales Promoting Navigation".
Field type: Text field
Example value:
160
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Basic configuration"
Technical name:
twt-header-logo-max-width-mobile
Field type: Text field
Example value:
50
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Basic configuration"
Technical name:
twt-header-height-mobile
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Basic configuration"
Technical name:
twt-header-phone-fixed
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Colour configuration"
Technical name:
twt-header-phone-background-color
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Action buttons"
Technical name:
twt-header-phone-btn-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Action buttons"
Technical name:
twt-header-phone-btn-color-hover
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Action buttons"
Technical name:
twt-header-phone-btn-icon-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Action buttons"
Technical name:
twt-header-phone-btn-icon-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Action buttons"
Technical name:
twt-header-phone-btn-border-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Action buttons"
Technical name:
twt-header-phone-btn-border-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Action buttons"
Technical name:
twt-header-phone-btn-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Action buttons"
Technical name:
twt-header-phone-btn-background-color-hover
Field type: Select
Available values: • default • Clean • Center
Example value:
default
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-nav-type
Field type: Text field
Example value:
70
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-nav-height
Field type: Select
Available values: • left • center • right
Example value:
center
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-logo-position
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-nav-background-color
Field type: Text field
Example value:
0 0 20px
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-nav-box-shadow
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.1)
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-nav-box-shadow-color
Field type: Select
Available values: • default • rounded corners • round corners
Example value:
round corners
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-btn-corner-type
Field type: Select
Available values: • no (default) • yes
Example value:
no (default)
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-btn-home
Field type: Number field
Example value:
100
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-btn-home-order
Field type: Number field
Example value:
200
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-btn-navigation-order
Field type: Number field
Example value:
300
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-btn-search-order
Field type: Number field
Example value:
400
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-btn-cart-order
Field type: Number field
Example value:
500
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-btn-wishlist-order
Field type: Number field
Example value:
600
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-btn-account-order
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"
Technical name:
twt-header-phone-cart-btn-highlighting
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Header" => Block "Mobile header" => Section "Basic headers ('Header 1' and 'Header 2')"
Technical name:
twt-header-phone-nav-main-toggle-label-show
Field type: Select
Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-Max-Width (Full-width-boxed)
Example value:
Tablet (portrait) (≥768px)
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Basic configuration"
Technical name:
twt-header-actions-btn-text-show
Field type: Select
Available values: • left • above
Example value:
left
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Basic configuration"
Technical name:
twt-header-actions-btn-icon-position
Field type: Select
Available values: • not rounded • rounded corners • round corners
Example value:
rounded corners
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Basic configuration"
Technical name:
twt-header-actions-btn-corner-type
Field type: Number field
Example value:
14
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Typography"
Technical name:
twt-header-actions-btn-font-size
Field type: Select
Available values: • light • normal • bold
Example value:
normal
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Typography"
Technical name:
twt-header-actions-btn-font-weight
Field type: Number field
Example value:
35
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Typography"
Technical name:
twt-header-actions-btn-line-height
Field type: Number field
Example value:
14
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Typography"
Technical name:
twt-header-actions-btn-icon-font-size
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Colour configuration"
Technical name:
twt-header-actions-btn-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Colour configuration"
Technical name:
twt-header-actions-btn-color-hover
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Colour configuration"
Technical name:
twt-header-actions-btn-icon-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Colour configuration"
Technical name:
twt-header-actions-btn-icon-color-hover
Field type: Color picker
Example value:
#e4e7ea
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Colour configuration"
Technical name:
twt-header-actions-btn-border-color
Field type: Color picker
Example value:
#e6e6e6
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Colour configuration"
Technical name:
twt-header-actions-btn-border-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Colour configuration"
Technical name:
twt-header-actions-btn-background-color
Field type: Color picker
Example value:
#f6f6f6
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Colour configuration"
Technical name:
twt-header-actions-btn-background-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Wishlist button"
Technical name:
twt-header-actions-wishlist-btn-badge-background-color
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Account button"
Technical name:
twt-header-actions-account-menu-btn-badge-show
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Account button"
Technical name:
twt-header-actions-account-menu-btn-badge-background-color
Field type: Select
Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-Max-Width (Full-width-boxed)
Example value:
Tablet (landscape) (≥992px)
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-total-show
Field type: Select
Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-Max-Width (Full-width-boxed)
Example value:
Phone (portrait) (<576px)
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-badge-show
Field type: Select
Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-Max-Width (Full-width-boxed)
Example value:
Tablet (portrait) (≥768px)
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-text-show
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-separator-show
Field type: Select
Available values: • light • normal • bold
Example value:
normal
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-font-weight
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-color-hover
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-icon-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-icon-color-hover
Field type: Color picker
Example value:
#e4e7ea
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-border-color
Field type: Color picker
Example value:
#e6e6e6
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-border-color-hover
Field type: Color picker
Example value:
#e4e7ea
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-separator-border-color
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-background-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Action buttons" => Section "Cart button"
Technical name:
twt-header-actions-cart-btn-badge-background-color
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 [Pro Edition]"
Technical name:
twt-header-top-bar-service-menu-show
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 [Pro Edition]"
Technical name:
twt-header-top-bar-service-menu-text-show
Only available with the active layout type "Sales Promoting Navigation".
Only available with the active layout type "Sales Promoting Navigation".
rounded corners Uses the configuration "Border radius". (see "Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Only available with the active layout type "Sales Promoting Navigation".
rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
This "line height" is ignored with the header type "Header 2.1" and the line height of the "Top bar" is used instead.
Shows the ThemeWare® "Logged-in badge" when the customer is logged in.
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".
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.
If icon size is '1' the icons won't be displayed.
To edit or translate the text please use the following snippet: twt.header.serviceHotlineText
To edit or translate the label please use the following snippet: twt.header.serviceHotline
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.
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.
Activate this configuration if you already use the Shopware language pack to avoid duplicate country flags.
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
Field type: Select
Available values: • Shopware default • ThemeWare® Flyout • ThemeWare® Dropdown* • ThemeWare® Flyout with cards • ThemeWare® Flyout with sidebar • ThemeWare® Flyout with teasers
Example value:
ThemeWare® Flyout
Path to the configuration: Tab "Header" => Block "Top navigation flyout"
Technical name:
twt-nav-main-flyout
Choose how the submenus of the top navigation are displayed.
Each category can also override this globally via the category custom field "Top navigation flyout".
Field type: Text field
Example value:
100%
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"
Technical name:
twt-nav-main-flyout-width
Field type: Select
Available values: • Shopware 6 • ThemeWare® • Shopware 5
Example value:
ThemeWare®
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"
Technical name:
twt-nav-main-flyout-style
Field type: Select
Available values: • no animation (default) • back in up • fade in • swing in down
Example value:
fade in
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"
Technical name:
twt-nav-main-flyout-animation
Field type: Text field
Example value:
10
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"
Technical name:
twt-nav-main-flyout-categories-margin-left
Field type: Select
Available values: • 1 level • 2 levels • 3 levels (default) • 4 levels • 5 levels
Example value:
3 levels
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"
Technical name:
twt-nav-main-max-depth
Field type: Select
Available values: • Container-Max-Width (Full-width Boxed) • 100% (Full-width) • Boxed • Custom width
Example value:
Container-Max-Width (Full-width Boxed)
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"
Technical name:
twt-nav-main-flyout-sizing-mode
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"
Technical name:
twt-nav-main-flyout-categories-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"
Technical name:
twt-nav-main-flyout-categories-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"
Technical name:
twt-nav-main-flyout-categories-color-active
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"
Technical name:
twt-nav-main-flyout-categories-icon-color
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"
Technical name:
twt-nav-main-flyout-background-color
Field type: Color picker
Example value:
#bcc1c7
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"
Technical name:
twt-nav-main-flyout-seperator-color
Field type: Select
Available values: • Text • Headlines
Example value:
Text
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 1"
Technical name:
twt-nav-main-flyout-font-family
Field type: Number field
Example value:
18
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 1"
Technical name:
twt-nav-main-flyout-font-size
Field type: Select
Available values: • light • normal • bold
Example value:
normal
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 1"
Technical name:
twt-nav-main-flyout-font-weight
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 1"
Technical name:
twt-nav-main-flyout-text-transform
Field type: Select
Available values: • Text • Headlines
Example value:
Text
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 2"
Technical name:
twt-nav-main-flyout-level1-font-family
Field type: Number field
Example value:
16
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 2"
Technical name:
twt-nav-main-flyout-level1-font-size
Field type: Select
Available values: • light • normal • bold
Example value:
normal
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 2"
Technical name:
twt-nav-main-flyout-level1-font-weight
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 2"
Technical name:
twt-nav-main-flyout-level1-text-transform
Field type: Select
Available values: • Text • Headlines
Example value:
Text
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."
Technical name:
twt-nav-main-flyout-level2-font-family
Field type: Number field
Example value:
16
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."
Technical name:
twt-nav-main-flyout-level2-font-size
Field type: Select
Available values: • light • normal • bold
Example value:
normal
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."
Technical name:
twt-nav-main-flyout-level2-font-weight
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."
Technical name:
twt-nav-main-flyout-level2-text-transform
Field type: Select
Available values: • don't show • show top • show bottom
Example value:
show bottom
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"
Technical name:
twt-nav-main-flyout-bar-show
Field type: Number field
Example value:
15
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"
Technical name:
twt-nav-main-flyout-bar-padding-top-bottom
Field type: Number field
Example value:
15
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"
Technical name:
twt-nav-main-flyout-bar-padding-left-right
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"
Technical name:
twt-nav-main-flyout-bar-color
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"
Technical name:
twt-nav-main-flyout-bar-color-hover
Field type: Color picker
Example value:
#e3e8ec
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"
Technical name:
twt-nav-main-flyout-bar-background-color
Field type: Number field
Example value:
15
Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Close button"
Technical name:
twt-nav-main-flyout-close-btn-padding
*) Note: Currently not available in the "Full-width sticky header".
Set the width for the flyout (in pixels).
Default: 100%
A value not equal to 100% is automatically converted to pixels and used as a max-width. In this case, the flyout extends over the full width but will not be larger than the selected value.
Example: 1080px
The Shopware 5 layout is not recommended if the number of subcategories varies significantly.
Set the indentation for subcategories in the flyout (in pixels).
Default: 20
Maximum number of category levels rendered in the navigation (applies to the "ThemeWare® Flyout", "ThemeWare® Dropdown" and "ThemeWare® Flyout with sidebar" modes).
Will only render up to the sales channel's "Navigation levels" setting (Admin → Sales Channels → [Channel] → Navigation), as deeper categories are not loaded into the storefront.
Choose whether the flyout matches the container or spans full width.
Note: This configuration refers to the separator line in the "Shopware 6" layout type.
Field type: Select
Available values: • don't show • show list • show hamburger menu
Example value:
show list
Path to the configuration: Tab "Header" => Block "Top navigation"
Technical name:
twt-nav-main-show
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-home-link-show
Field type: Select
Available values: • Text (default) • Icon
Example value:
Text (default)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-home-link
Field type: Select
Available values: • don't show • show (ThemeWare® style) • show (default)
Example value:
show (ThemeWare® style)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-arrows-show
Field type: Select
Available values: • defatult • coloured background (incl. home link) • coloured background (excl. home link) • underline (center to left and right) • underline (from left to right) • underline (from right to left) • underline
Example value:
coloured background (incl. home link)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-hover-type
Field type: Number field
Example value:
60
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-height
Field type: Number field
Example value:
16
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-padding
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-padding-bottom
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-margin-left
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-margin-right
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 navigation" => Section "Basic headers ('Header 1' and 'Header 2')"
Technical name:
twt-nav-main-width
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Colour configuration"
Technical name:
twt-nav-main-background-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Colour configuration"
Technical name:
twt-nav-main-border-bottom-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Colour configuration"
Technical name:
twt-nav-main-border-bottom-color-hover
Field type: Color picker
Example value:
#cccccc
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Colour configuration"
Technical name:
twt-nav-main-border
Field type: Select
Available values: • Text • Headlines
Example value:
Text
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-font-family
Field type: Number field
Example value:
18
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-font-size
Field type: Select
Available values: • light • normal • bold
Example value:
bold
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-font-weight
Field type: Select
Available values: • light • normal • bold
Example value:
bold
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-font-weight-active
Field type: Select
Available values: • align left • align right • align center • space-between • space-around
Example value:
align left
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-justify-content
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-text-transform
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (Home link)"
Technical name:
twt-nav-main-home-link-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (Home link)"
Technical name:
twt-nav-main-home-link-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (Home link)"
Technical name:
twt-nav-main-home-link-color-active
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-color-active
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-icon-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-icon-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-icon-color-active
Field type: Color picker
Example value:
rgba(255, 255, 255, 0)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-link-background-color
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-background-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-background-color-active
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-color
Field type: Color picker
Example value:
#feecee
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-color-hover
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-color-active
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-icon-color
Field type: Color picker
Example value:
#feecee
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-icon-color-hover
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-icon-color-active
Field type: Color picker
Example value:
rgba(255, 255, 255, 0)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-background-color
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-background-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-background-color-active
Shows a arrow facing downwards next to the menu item if there are subcategories.
For a left-aligned top navigation, we recommend the hover effect "coloured background (excl. home link)" instead of "coloured background (incl. home link)".
Enter the desired spacing for the menu items.
Enter the desired bottom spacing for the top navigation.
Note: This configuration is only available for the basic layout "boxed".
Note: This configuration is only available for the basic layout "boxed".
Select the sizing mode of the "Top navigation".
default: The width of the "Top navigation" is based on the configuration of the width of the header.
Note: This configuration does not apply in the basic layout "boxed".
Note: This configuration only applies to the hover effect "default".
Note: This configuration only applies to the hover effect "underline".
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.
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".