# 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`

{% hint style="info" %}
**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.
{% endhint %}

## 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`

{% hint style="info" %}
**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.
{% endhint %}

***

### 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`

{% hint style="info" %}
To edit or translate the headline please use the following snippet: listing.filterTitleText
{% endhint %}

***

### 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`