<!-- Quelle: https://service.themeware.design/doku/handbuch/erlebniswelten/produkt-filter-kategorie-sidebar/konfiguration
     Alle Seiten dieser Sammlung: https://service.themeware.design/doku/llms.txt -->

# Konfiguration

## Basiskonfiguration

***

### Darstellungsart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Shopware\
• ThemeWare®\
• ThemeWare® "Buttons" (Beta)

**Beispiel Wert**:\
`ThemeWare®`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-filter-panel-layout-type`

{% hint style="info" %}
**Shopware**: Diese Darstellungsart verwendet die Standard-Filter von Shopware und wird nicht von ThemeWare® modifiziert. (HC-Architecture®)

**ThemeWare®**: Diese Darstellungsart ist der klassische Stil von ThemeWare® für Shopware 6.

**ThemeWare® "Buttons"**: Diese Darstellungsart befindet sich in der Testphase, probiere Sie gerne einmal aus.
{% endhint %}


## Farbkonfiguration

***

### Textfarbe (Filter-Button)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-filter-panel-toggle-btn-color`


***

### Rahmenfarbe (Filter-Button)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eeeeee`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-filter-panel-toggle-btn-border-color`


***

### Hintergrundfarbe (Filter-Button)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-filter-panel-toggle-btn-background-color`


***

### Textfarbe (Filter-Button) @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#000000`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-filter-panel-toggle-btn-color-hover`


***

### Rahmenfarbe (Filter-Button) @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#666666`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-filter-panel-toggle-btn-border-color-hover`


***

### Hintergrundfarbe (Filter-Button) @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-filter-panel-toggle-btn-background-color-hover`


***

### Textfarbe (Filter-Button) @expanded

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-filter-panel-toggle-btn-color-expanded`


***

### Rahmenfarbe (Filter-Button) @expanded

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-filter-panel-toggle-btn-border-color-expanded`


***

### Hintergrundfarbe (Filter-Button) @expanded

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-filter-panel-toggle-btn-background-color-expanded`


## Filter (in der Sidebar)

***

### Abstandsmodus

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• normal (Standard)\
• kompakt

**Beispiel Wert**:\
`kompakt`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (in der Sidebar)"

**Technischer Name**:\
`twt-filter-panel-spacing-sidebar`

{% hint style="info" %}
**normal**: Die Filter sind einzelne Elemente mit einem kleinen Abstand zueinander.

**kompakt**: Die Abstände zwischen den Filtern werden entfernt, sodass diese als ein Block dargestellt werden.
{% endhint %}


***

### Rahmenfarbe (Dropdown)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eeeeee`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (in der Sidebar)"

**Technischer Name**:\
`twt-filter-panel-item-dropdown-border-color-sidebar`


***

### Hintergrundfarbe (Dropdown)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (in der Sidebar)"

**Technischer Name**:\
`twt-filter-panel-item-dropdown-background-color-sidebar`


## Filter (über dem Inhalt)

***

### Innenabstand oben (Filter)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`20`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (über dem Inhalt)"

**Technischer Name**:\
`twt-filter-panel-content-padding-top`


***

### Innenabstand rechts (Filter)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`1`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (über dem Inhalt)"

**Technischer Name**:\
`twt-filter-panel-content-padding-right`


***

### Innenabstand unten (Filter)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`1`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (über dem Inhalt)"

**Technischer Name**:\
`twt-filter-panel-content-padding-bottom`


***

### Innenabstand links (Filter)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`20`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (über dem Inhalt)"

**Technischer Name**:\
`twt-filter-panel-content-padding-left`


***

### Rahmen oben/unten (Filter)

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`1px solid`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (über dem Inhalt)"

**Technischer Name**:\
`twt-filter-panel-content-border`


***

### Rahmenfarbe oben/unten (Filter)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eeeeee`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (über dem Inhalt)"

**Technischer Name**:\
`twt-filter-panel-content-border-color`


***

### Hintergrundfarbe (Filter)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eeeeee`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (über dem Inhalt)"

**Technischer Name**:\
`twt-filter-panel-content-background-color`


***

### Rahmenfarbe (Dropdown)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eeeeee`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (über dem Inhalt)"

**Technischer Name**:\
`twt-filter-panel-item-dropdown-border-color`


***

### Hintergrundfarbe (Dropdown)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Filter (über dem Inhalt)"

**Technischer Name**:\
`twt-filter-panel-item-dropdown-background-color`


## Headline (in der Sidebar)

***

### Filter-Überschrift anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen

**Beispiel Wert**:\
`nicht anzeigen`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Headline (in der Sidebar)"

**Technischer Name**:\
`twt-sidebar-filter-headline-show`

{% hint style="info" %}
Um die Überschrift zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: listing.filterTitleText
{% endhint %}


***

### Außenabstand unten [px]

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`0`

**Pfad zur Einstellung**:\
Tab "Erlebniswelten" => Bereich "Produkt-Filter (Kategorie "Sidebar")" => Abschnitt "Headline (in der Sidebar)"

**Technischer Name**:\
`twt-sidebar-filter-headline-margin-bottom`