# Filters

### Übersicht

Filter sind ein essenzieller Bestandteil von [Kategorieseiten](https://docs.atloss.de/en/academy/technical-terms/category-page). Sie ermöglichen es dem Besucher die vorgeschlagenen Produkte auf eine von ihm definierte Anzahl an Kriterien zu reduzieren. Dabei gibt es im Shopware Standard über die [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) zwei verschiedene Möglichkeiten deine Filter darzustellen. Standardmäßig über dem [Listing](https://docs.atloss.de/en/theme-configuration/shopping-experiences/listing) oder links daneben innerhalb der [Sidebar](https://docs.atloss.de/en/academy/technical-terms/sidebar). Zusätzlich lassen sich spezifische Filter über ein [Theme Feature](https://docs.atloss.de/en/included-extensions/expanded-sidebar-filters) und die nachstehende Konfiguration standardmäßig immer geöffnet darstellen.

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/3834B3430jr4rwwgRuo4/erlebniswelten-filter.webp" alt=""><figcaption><p>Sidebar-Filter unseres Kunden <a href="https://bsp-shop.ch/">https://bsp-shop.ch/</a></p></figcaption></figure>

### Grundeinstellungen

Gerade bei vielen Filteroptionen ist es für den Besucher häufig übersichtlicher, wenn man Optionen, die keine Ergebnisse liefern, deaktiviert.

{% hint style="info" %}
Shopware bietet dir hierfür eine hauseigene Konfigurationsmöglichkeit. Unter "Einstellungen > Produkte > Filteroptionen ohne Ergebnisse deaktivieren" kannst du dies vornehmen. Sobald diese Option aktiv ist, werden die Filteroptionen ohne Ergebnisse gräulich hinterlegt, sodass sie nicht mehr anklickbar sind.
{% endhint %}

Mit der nachfolgenden Theme Konfigurationsoption hast du die Möglichkeit deaktivierte Filteroptionen aber auch komplett auszublenden. Dies erleichtert dem Besucher sich bei vielen Filteroptionen besser zurecht zu finden. Hierbei werden nur noch möglich kombinierbare Optionen zur Verfügung stehen. Die Filterkombinationen werden dabei immer Ergebnisse liefern.

{% hint style="warning" %}
Voraussetzung für das nachfolgende Konfigurationsfeld ist, dass "Einstellungen > Produkte > Filteroptionen ohne Ergebnisse deaktivieren" aktiviert ist.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/VmduqyRAHJDqGSjlLMXu/erlebniswelten-filter-grundeinstellungen.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Sichtbarkeit von Filteroptionen ohne Ergebnisse</summary>

**Deaktivieren**\
Die Filter werden wie im Shopware Standard deaktivert und gräulich hinterlegt. Der Besucher kann die abgestellten Filteroptionen immer noch sehen.

**Ausblenden** \
Deaktivierte Filteroptionen werden komplett ausgeblendet.

</details>

### Farben

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/Yqjkkm99VZBjjkemGvvY/erlebniswelten-filter-farben.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Button Hintergrund</summary>

Definiere die Hintergrund Farbe der Filter Buttons.

***

Hinweis: Mit dem Wählen einer Farbe werden auf dem Filter automatisch Abstände angewendet. Solltest du keine Farbe hinterlegen wollen, gebe bitte "transparent" ein.

</details>

<details>

<summary>Button Schriftfarbe</summary>

Lege die Schriftfarbe innerhalb der Filter Buttons fest. Standardmäßig wird hier die globale [Textfarbe](https://docs.atloss.de/en/general/typography#textfarbe) über eine [Variable](https://docs.atloss.de/en/academy/technical-terms/variable) eingebunden.

</details>

<details>

<summary>Dropdown Hintergrund</summary>

Definiere die Hintergrund Farbe der Filter Dropdowns.

***

Hinweis: Mit dem Wählen einer Farbe werden auf dem Filteropdown automatisch Abstände angewendet. Solltest du keine Farbe hinterlegen wollen, gebe bitte "transparent" ein.

</details>

<details>

<summary>Dropdown Schriftfarbe</summary>

Lege die Schriftfarbe innerhalb der Filter Dropdowns fest. Standardmäßig wird hier die globale [Textfarbe](https://docs.atloss.de/en/general/typography#textfarbe) über eine [Variable](https://docs.atloss.de/en/academy/technical-terms/variable) eingebunden.

</details>

### Sidebar

In dieser Sektion kannst du u.A. festlegen die standardmäßigen Shopware Filter "Hersteller", "Bewertung" und "Preis" aufgeklappt darzustellen. Selbst angelegte Filter lassen sich über ein [Theme Feature](https://docs.atloss.de/en/included-extensions/expanded-sidebar-filters) geöffnet darstellen.

{% hint style="info" %}
Die Shopware Standard Filter lassen sich über die Listing Element-Einstellungen in der Erlebniswelt der Kategorie weiter anpassen.
{% endhint %}

{% hint style="warning" %}
Die nachfolgenden Einstellungen finden lediglich bei Sidebar-Filtern Anwendung.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/950kPQDtKcTO7W8jsEbd/erlebniswelten-filter-sidebar.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Hersteller-Filter geöffnet darstellen</summary>

**Ja**\
Der Hersteller-Filter wird beim Laden der Seite direkt aufgeklappt.

**Nein** \
Der Hersteller-Filter wird beim Laden der Seite standardmäßig zugeklappt.

</details>

<details>

<summary>Bewertung-Filter geöffnet darstellen</summary>

**Ja**\
Der Bewertung-Filter wird beim Laden der Seite direkt aufgeklappt.

**Nein** \
Der Bewertung-Filter wird beim Laden der Seite standardmäßig zugeklappt.

</details>

<details>

<summary>Preis-Filter geöffnet darstellen</summary>

**Ja**\
Der Preis-Filter wird beim Laden der Seite direkt aufgeklappt.

**Nein** \
Der Preis-Filter wird beim Laden der Seite standardmäßig zugeklappt.

</details>

<details>

<summary>Dropdown Rand</summary>

**Rahmen**\
Um das Dropdown wird ein Rahmen mit der globalen [Rahmenfarbe](https://docs.atloss.de/en/general/theme-colors#rahmen) dargestellt.

**Schatten** \
Das Dropdown hebt sich mit einem Schatten ab. Den Schatten selbst kannst du in der [globalen Konfiguration](https://docs.atloss.de/en/general/layout#schatten) anpassen.

**Keiner** \
Es bildet sich kein Rand um das Dropdown.

</details>