Design
Offcanvas navigation
Field type:
Select
Available values:
• Shopware (default)
• List (Clean)
• Buttons (compact)
• Buttons
Example value:Shopware (default)
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Design"
Technical name:twt-offcanvas-nav-design
Select the design of the menu items in the offcanvas navigation.
Shopware (default): No ThemeWare® design - menu items, lines and panel stay exactly as Shopware ships them. Only the text colours and the line colour are configurable.
List (Clean): Plain text on the panel surface, without surfaces and without separator lines.
Buttons (compact): Every menu item is a surface across the full width of the panel, separated by lines.
Buttons: The menu items become inset surfaces with rounded corners.
Note: The colours of the menu items are set in the "Colour configuration" section.
Basic configuration
Layout type (category buttons)
Field type:
Select
Available values:
• Shopware (default)
• ThemeWare®
Example value:ThemeWare®
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Basic configuration"
Technical name:twt-offcanvas-nav-category-btn-layout-type
Select how the area above the menu items is arranged.
Shopware (default): Shopware's arrangement - "Show all categories" and "Back" as separate text rows, "Show category X" as the first entry of the list.
ThemeWare®: "Show all categories" above the category name, below it "Back" and "Show category X" side by side as a pair of buttons. The two sections below configure these buttons.
Note: "Shopware (default)" is also the way out if another extension overrides the same templates and the two get in each other's way - our markup steps aside completely then.
Block: 'layout_navigation_offcanvas_navigation_categories', 'layout_navigation_offcanvas_navigation_category_back_link' and 'layout_navigation_offcanvas_navigation_home_link'.
Margin left/right [px]
Field type:
Number field
Example value:10
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Basic configuration"
Technical name:twt-offcanvas-nav-margin-left-right
Select how far the menu items are inset from the edge of the panel. The header area with "Back" and "Main menu" follows the same edge.
Note: The menu items only take this margin in the design "Buttons" - in the other designs they run edge to edge.
Colour configuration
Text colour
"Back" changes its colour role depending on the arrangement. It follows this text colour only where it is a plain link — as soon as it looks like a menu item, the colours from "Colour configuration (menu items)" apply:
| "Back" is … | Colours from | Surface |
|---|---|---|
| a list entry (layout type "Shopware (default)") | Colour configuration (menu items) | only from the design "Buttons (compact)" on |
| a link next to "Show category" (layout type "ThemeWare®", designs "Shopware (default)" to "Buttons (compact)") | Colour configuration | none |
| a button (layout type "ThemeWare®", design "Buttons") | Colour configuration (menu items) | yes |
Field type:
Color picker
Example value:$sw-text-color
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration"
Technical name:twt-offcanvas-nav-link-color
Applies to every clickable text without a surface: the headline on sub levels and the language, currency and service selection.
Note: "Back" follows this colour only as a plain link. Where it looks like a menu item, "Colour configuration (menu items)" applies.
Note: The entries inside the opened language, currency and service dropdowns follow the "Coloration" setting further down.
Text colour @hover
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration"
Technical name:twt-offcanvas-nav-link-color-hover
Note: This setting is only applied on devices with a mouse. On touch devices there is no hover state.
Background colour (panel)
Field type:
Color picker
Example value:#eef2f5
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration"
Technical name:twt-offcanvas-nav-panel-background-color
Colours the surface behind the menu items and the category buttons. Keep it distinct from those surfaces - the same pairing as in the flyout, where a tinted panel carries white menu items.
Note: This setting is not applied in the design "Shopware (default)", which keeps the panel Shopware ships.
Glass effect [px] (panel)
Field type:
Number field
Example value:0
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration"
Technical name:twt-offcanvas-nav-panel-effect-blur
Blurs the content behind the panel and thereby creates a glass effect in the style of "Liquid Glass". Recommended value: 10.
Note: The effect only becomes visible if a semi-transparent colour is selected as the background colour, and it is not applied in the design "Shopware (default)", which keeps the panel Shopware ships.
Colour configuration (menu items)
Text colour
Field type:
Color picker
Example value:$sw-text-color
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration (menu items)"
Technical name:twt-offcanvas-nav-color
Colours the menu items.
Note: "Back" follows this colour wherever it looks like a menu item. As a plain link the "Text colour" from "Colour configuration" applies.
Text colour @hover
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration (menu items)"
Technical name:twt-offcanvas-nav-color-hover
Note: This setting is only applied on devices with a mouse. On touch devices there is no hover state.
Text colour @active
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration (menu items)"
Technical name:twt-offcanvas-nav-color-active
Colours the menu item of the category currently open.
Note: The button "Show category" is set in the section of the same name further down - unless it is a list item, then this colour applies.
Background colour
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration (menu items)"
Technical name:twt-offcanvas-nav-background-color
Colours the surface of a single menu item.
Note: This setting is applied in the designs "Buttons (compact)" and "Buttons". The design "Shopware (default)" keeps the white row surface Shopware ships.
Background colour @hover
Field type:
Color picker
Example value:#e3e8ec
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration (menu items)"
Technical name:twt-offcanvas-nav-background-color-hover
Colours the surface of a menu item on hover.
Note: This setting is applied in the designs "Buttons (compact)" and "Buttons", and only on devices with a mouse.
Background colour @active
Field type:
Color picker
Example value:#e3e8ec
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration (menu items)"
Technical name:twt-offcanvas-nav-background-color-active
Colours the surface of the menu item of the active category. Hovering it shows the hover colour.
Note: This setting is applied in the designs "Buttons (compact)" and "Buttons".
Colour (separator)
Field type:
Color picker
Example value:#bcc1c7
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Colour configuration (menu items)"
Technical name:twt-offcanvas-nav-seperator-color
Note: This setting is applied in the designs "Shopware (default)" and "Buttons (compact)".
Typography (menu items)
Font family
Field type:
Select
Available values:
• Text
• Headlines
Example value:Text
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Typography (menu items)"
Technical name:twt-offcanvas-nav-font-family
Font size
Field type:
Number field
Example value:16
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Typography (menu items)"
Technical name:twt-offcanvas-nav-font-size
Font weight
Field type:
Select
Available values:
• light
• normal
• bold
Example value:normal
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Typography (menu items)"
Technical name:twt-offcanvas-nav-font-weight
Text formatting
Field type:
Select
Available values:
• none
• uppercase
• lowercase
• capitalize
Example value:none
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Typography (menu items)"
Technical name:twt-offcanvas-nav-text-transform
Typography (headline)
Font size (headline)
Field type:
Number field
Example value:18
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Typography (headline)"
Technical name:twt-offcanvas-nav-headline-font-size
Size of the category name above the buttons - on the root level "Categories", on sub levels the name of the open category.
Button "Show all categories"
Layout type
Field type:
Select
Available values:
• Button
• Outline button
• Link
Example value:Button
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show all categories""
Technical name:twt-offcanvas-nav-all-btn-style
Select how the button "Show all categories" above the headline is displayed.
Button: A filled surface.
Outline button: Only a border, the surface stays clear. The border takes the background colour set below; on hover it fills with the hover colour, the same way Bootstrap builds its outline buttons. For this layout type a stronger background colour makes sense - the light default is barely visible as a border.
Link: Only text and icon, without a surface. Quiet above the list, and the background colours have no effect.
Text colour
Field type:
Color picker
Example value:$sw-text-color
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show all categories""
Technical name:twt-offcanvas-nav-all-btn-color
Applies to the button "Show all categories" above the headline.
Note: "Back" is not a category button - it follows the menu items, as a link in the list designs and as a button in the design "Buttons".
Text colour @hover
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show all categories""
Technical name:twt-offcanvas-nav-all-btn-color-hover
Note: This setting is only applied on devices with a mouse. On touch devices there is no hover state.
Background colour
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show all categories""
Technical name:twt-offcanvas-nav-all-btn-background-color
Colours the surface of the button "Show all categories".
Note: The default is set for the white panel of the design "Shopware (default)". The other designs bring a tinted panel, where the button needs a darker tone to stand out.
Background colour @hover
Field type:
Color picker
Example value:#e3e8ec
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show all categories""
Technical name:twt-offcanvas-nav-all-btn-background-color-hover
Note: This setting is only applied on devices with a mouse. On touch devices there is no hover state.
Button "Show category"
Layout type
Field type:
Select
Available values:
• Button
• Outline button
Example value:Button
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show category""
Technical name:twt-offcanvas-nav-current-btn-style
Select how the button "Show category" next to "Back" is displayed.
Button: A filled surface.
Outline button: Only a border, the surface stays clear. The border takes the background colour set below; on hover it fills with the hover colour, the same way Bootstrap builds its outline buttons.
Note: This button leads into the category that is open - it is the main action of the panel and may stand out.
Note: With the layout type "Shopware (default)" it is a list entry - the settings in this section then have no effect.
Text colour
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show category""
Technical name:twt-offcanvas-nav-current-btn-color
Applies to the button "Show category" next to "Back".
Note: In the layout type "Outline button" this colour is only used on hover - at rest the text carries the background colour, because there is no surface to sit on.
Text colour @hover
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show category""
Technical name:twt-offcanvas-nav-current-btn-color-hover
Note: This setting is only applied on devices with a mouse. On touch devices there is no hover state.
Background colour
Field type:
Color picker
Example value:$sw-color-brand-primary
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show category""
Technical name:twt-offcanvas-nav-current-btn-background-color
Colours the surface of the button "Show category". The default is the theme colour, so the main action of the panel stands out.
Background colour @hover
Field type:
Color picker
Example value:mix(black, $sw-color-brand-primary, 15%)
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Button "Show category""
Technical name:twt-offcanvas-nav-current-btn-background-color-hover
The default mixes 15 percent black into the theme colour - exactly how Bootstrap darkens its buttons on hover. It follows along when the theme colour changes.
Note: This setting is only applied on devices with a mouse. On touch devices there is no hover state.
Currencies menu
Show label
Field type:
Select
Available values:
• don't show
• show
Example value:don't show
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Currencies menu"
Technical name:twt-offcanvas-nav-currencies-menu-text-show
Note: Below 320px window width only the icon is displayed.
Language menu
Show label
Field type:
Select
Available values:
• don't show
• show
Example value:don't show
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Language menu"
Technical name:twt-offcanvas-nav-languages-menu-text-show
Note: Below 320px window width only the icon is displayed.
Service menu Pro
Show service menu
Field type:
Select
Available values:
• don't show
• show
Example value:don't show
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Service menu Pro"
Technical name:twt-offcanvas-nav-service-menu-show
With this configuration you can display the "Footer Service Navigation" in the offcanvas navigation.
The navigation itself must be assigned in the Sales Channel.
To edit or translate the label please use the following snippet: header.indexLinkService
Show icon
Field type:
Select
Available values:
• don't show
• show
Example value:show
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Service menu Pro"
Technical name:twt-offcanvas-nav-service-menu-icon-show
Note: Below 320px window width only the icon is displayed.
Show label
Field type:
Select
Available values:
• don't show
• show
Example value:don't show
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Service menu Pro"
Technical name:twt-offcanvas-nav-service-menu-text-show
Note: Below 320px window width only the icon is displayed.
Dropdowns
Coloration
Field type:
Select
Available values:
• default
• Header colours
• individual colours (coming soon...)
Example value:default
Path to the configuration:
Tab "Content" => Block "Offcanvas navigation" => Section "Dropdowns"
Technical name:twt-offcanvas-nav-dropdown-coloration