Configuration
Basic configuration
Layout type
Field type: Select
Available values: • Shopware • ThemeWare® • ThemeWare® "Buttons" (Beta)
Example value:
ThemeWare®
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Basic configuration"
Technical name:
twt-filter-panel-layout-type
Shopware: This layout type uses Shopware's default filters and is not modified by ThemeWare®. (HC-Architecture®)
ThemeWare®: This layout type is the classic ThemeWare® style for Shopware 6.
ThemeWare® "Buttons": This layout type is in a testing phase, feel free to give it a try.
Colour configuration
Text colour (Filter button)
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"
Technical name:
twt-filter-panel-toggle-btn-color
Border colour (Filter button)
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"
Technical name:
twt-filter-panel-toggle-btn-border-color
Background colour (Filter button)
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"
Technical name:
twt-filter-panel-toggle-btn-background-color
Text colour (Filter button) @hover
Field type: Color picker
Example value:
#000000
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"
Technical name:
twt-filter-panel-toggle-btn-color-hover
Border colour (Filter button) @hover
Field type: Color picker
Example value:
#666666
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"
Technical name:
twt-filter-panel-toggle-btn-border-color-hover
Background colour (Filter button) @hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"
Technical name:
twt-filter-panel-toggle-btn-background-color-hover
Text colour (Filter button) @expanded
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"
Technical name:
twt-filter-panel-toggle-btn-color-expanded
Border colour (Filter button) @expanded
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"
Technical name:
twt-filter-panel-toggle-btn-border-color-expanded
Background colour (Filter button) @expanded
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Colour configuration"
Technical name:
twt-filter-panel-toggle-btn-background-color-expanded
Filter (in the sidebar)
Panel spacing
Field type: Select
Available values: • normal (default) • compact
Example value:
compact
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (in the sidebar)"
Technical name:
twt-filter-panel-spacing-sidebar
normal: The filters are individual elements with a small gap between them.
compact: The gaps between the filters are removed so that they are displayed as a single block.
Border colour (Dropdown)
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (in the sidebar)"
Technical name:
twt-filter-panel-item-dropdown-border-color-sidebar
Background colour (Dropdown)
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (in the sidebar)"
Technical name:
twt-filter-panel-item-dropdown-background-color-sidebar
Filter (above the content)
Padding top (Filter panel)
Field type: Number field
Example value:
20
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"
Technical name:
twt-filter-panel-content-padding-top
Padding right (Filter panel)
Field type: Number field
Example value:
1
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"
Technical name:
twt-filter-panel-content-padding-right
Padding bottom (Filter panel)
Field type: Number field
Example value:
1
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"
Technical name:
twt-filter-panel-content-padding-bottom
Padding left (Filter panel)
Field type: Number field
Example value:
20
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"
Technical name:
twt-filter-panel-content-padding-left
Border top/bottom (Filter panel)
Field type: Text field
Example value:
1px solid
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"
Technical name:
twt-filter-panel-content-border
Border-top/-bottom colour (Filter panel)
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"
Technical name:
twt-filter-panel-content-border-color
Background colour (Filter panel)
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"
Technical name:
twt-filter-panel-content-background-color
Border colour (Dropdown)
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"
Technical name:
twt-filter-panel-item-dropdown-border-color
Background colour (Dropdown)
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Filter (above the content)"
Technical name:
twt-filter-panel-item-dropdown-background-color
Headline (in the sidebar)
Show filter headline
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Headline (in the sidebar)"
Technical name:
twt-sidebar-filter-headline-show
To edit or translate the headline please use the following snippet: listing.filterTitleText
Margin bottom [px]
Field type: Number field
Example value:
0
Path to the configuration: Tab "Shopping Experiences" => Block "Product filter (Category "Sidebar")" => Section "Headline (in the sidebar)"
Technical name:
twt-sidebar-filter-headline-margin-bottom
Last updated
Was this helpful?