Layout type
Field type:
Select
Available values:
• Shopware default
• ThemeWare®
Example value:Shopware default
Path to the configuration:
Tab "Content" => Block "Offcanvas (Cart & navigation)"
Technical name:twt-offcanvas-layout-type
Select how offcanves elements (e.g. cart od navigation) are displayed.
In the "Shopware" layout type offcanves elements behave as shipped.
In the "ThemeWare®" layout type, the elements are given, for example, an margin around and rounded corners.
Basic configuration
Margin [px]
Field type:
Number field
Example value:10
Path to the configuration:
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Basic configuration"
Technical name:twt-offcanvas-margin
Select the margin around offcanvas elements.
Note: This setting is only applied if the "ThemeWare®" display mode is selected.
Border radius [px]
Field type:
Number field
Example value:3
Path to the configuration:
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Basic configuration"
Technical name:twt-offcanvas-border-radius
Select the border radius of offcanvas elements.
Note: This setting is only applied if the "ThemeWare®" display mode is selected.
Colour configuration
Backdrop colour
Field type:
Color picker
Example value:rgba(0, 0, 0, 0.5)
Path to the configuration:
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Colour configuration"
Technical name:twt-offcanvas-backdrop-color
Select the desired background colour of the backdrop.
Glass effect [px] (overlay)
Field type:
Number field
Example value:0
Path to the configuration:
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Colour configuration"
Technical name:twt-offcanvas-backdrop-effect-blur
Enter the desired strength for the blur effect of the overlay (backdrop).
Button "Close menu"
Layout type
Field type:
Select
Available values:
• Button
• Link
Example value:Button
Path to the configuration:
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Button "Close menu""
Technical name:twt-offcanvas-close-style
Select how the button "Close menu" above the content is displayed.
Button: A filled surface with a separator and a soft shadow below it.
Link: Only text and icon, without a surface, separator or shadow. The background colour has no effect then.
Note: The button belongs to the offcanvas navigation and the offcanvas cart alike. The filter panel brings its own.
Background colour
Field type:
Color picker
Example value:$twt-color-secondary-button
Path to the configuration:
Tab "Content" => Block "Offcanvas (Cart & navigation)" => Section "Button "Close menu""
Technical name:twt-offcanvas-close-background-color
Here you can configure the background colour for the button "Close menu".
Text colour / hover effect:
According to Bootstrap, the text colour is automatically inverted from this colour value.
For the hover effect, this colour value is automatically darkened.
Note: In the layout type "Link" this setting has no effect.