All pages
Powered by GitBook
1 of 1

Loading...

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

Text colour (Filter button)

Border colour (Filter button)

Background colour (Filter button)

Text colour (Filter button) @hover

Border colour (Filter button) @hover

Background colour (Filter button) @hover

Text colour (Filter button) @expanded

Border colour (Filter button) @expanded

Background colour (Filter button) @expanded

Filter (in the sidebar)

Panel spacing

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)

Background colour (Dropdown)

Filter (above the content)

Padding top (Filter panel)

Padding right (Filter panel)

Padding bottom (Filter panel)

Padding left (Filter panel)

Border top/bottom (Filter panel)

Border-top/-bottom colour (Filter panel)

Background colour (Filter panel)

Border colour (Dropdown)

Background colour (Dropdown)

Headline (in the sidebar)

Show filter headline

To edit or translate the headline please use the following snippet: listing.filterTitleText

Margin bottom [px]