> For the complete documentation index, see [llms.txt](https://coolbax.gitbook.io/coolbax-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coolbax.gitbook.io/coolbax-docs/theme/theme-einstellungen/produkt-kategorie.md).

# Produkt Kategorie

## Produkt Listing

Hier bestimmen Sie allgemein die Farben, Rahmen + Rahmenfarbe und Schriftfarbe des Produkt Listing.

<figure><img src="/files/fXoApOdrWc7IrUyRMgM7" alt=""><figcaption></figcaption></figure>

* **1) Rahmen + Rahmenfarbe:** Hier haben Sie die Möglichkeit einen Rahmen um das gesamte Listing (mit Sortierung) zu legen
* **2) Hintergrundfarbe:** Bestimmen Sie eine Hintergrundfarbe, welche das gesamte Listing einschließt. Die Farben für die [Produktboxen](#farben-produkt-box-and-produktbild) und die [Sortierfunktion](#pagination-und-sortierung) werden an anderer Stelle festgelegt.

<figure><img src="/files/MvS6HyneKtwrvEBWRzHP" alt=""><figcaption><p>Beispiel für die Farbeinstellungen im Produkt Listing</p></figcaption></figure>

## Produkt Box

In diesem Abschnitt legen Sie die grundlegende Darstellung der Produkte im Listing fest. Hierzu zählt unter anderem das Layout, die Einstellungen für Badges, Kurzbeschreibung, Aktion Buttons sowie die Farbeinstellungen.

### Produkt Layout

#### Produkt Layout

Hier stellen Sie ein, wie viele Produkte in einer Zeile dargestellt werden sollen. Insgesamt 3 Optionen stehen Ihnen zu Auswahl:

{% hint style="info" %}
Sie haben die Möglichkeit, für jede Kategorie ein extra Layout zu bestimmen. Weiter Informationen finden Sie im Abschnitt: [Kategorie Einstellungen](/coolbax-docs/theme/kategorie-einstellungen.md#produkt-layout)
{% endhint %}

* **3 Boxen:** Hier werden die drei Produkte in einer Spalte dargestellt. Hierbei wird die Nutzung der Sidebar vorausgesetzt. **Wird die Sidebar nicht genutzt, erscheinen 4 Produkte nebeneinander.**&#x20;

<figure><img src="/files/XiyYyUKKjZPWxEl1Z0WJ" alt=""><figcaption><p>Ein Beispiel der Einstellung: 3 Boxen (mit Sidebar)</p></figcaption></figure>

<figure><img src="/files/fMcdXnMMTsoIMtN4PMzh" alt=""><figcaption><p>Ein Beispiel der Einstellung: 4 Boxen (ohne Sidebar)</p></figcaption></figure>

* **2 Boxen:** Bei dieser Darstellung werden zwei Produkte nebeneinander dargestellt. Hierbei hat die Nutzung der Sidebar keinen Einfluss auf die Darstellung.

<figure><img src="/files/dRUpKqbQtrfo4HLu0wSV" alt=""><figcaption><p>Ein Beispiel der Einstellung: 2 Boxen</p></figcaption></figure>

* **Liste:** Bei dieser Option wird In einer Zeile ein Produkt ausgegeben. Die Produktbox erstreckt sich über die gesamte Zeile.

<figure><img src="/files/qHYkCWl4tqEHsPd7hYna" alt=""><figcaption><p>Ein Beispiel der Einstellung: 2 Boxen</p></figcaption></figure>

{% hint style="info" %}
In den [Kategorie Einstellungen](broken://pages/1rqRW0N8QZoG662HHFSE) haben Sie die Möglichkeit die Darstellung des Inhalt zu verändern.
{% endhint %}

#### Ausrichtung des Inhalts

Hier können Sie einstellen, wie der Inhalt in den Produktboxen positioniert werden soll. Hierbei wird folgende Inhalte ausgerichtet:

{% hint style="warning" %}
Die Ausrichtung des Inhaltes greift nur bei dem [Produkt Layout](#produkt-layout-1) 3 Boxen
{% endhint %}

* Produktname
* Kurzbeschreibung
* Preis & Pseudopreis
* Angabe des Grundpreis (wenn vorhanden)
* Lieferbarkeit (wenn Ausgabe aktiv)&#x20;
* Produktnummer (wenn Ausgabe aktiv)&#x20;
* Herstellername  (wenn Ausgabe aktiv)&#x20;
* Varianten Merkmale (wenn Ausgabe aktiv)&#x20;

{% hint style="info" %}
Die Ausgabe der Lieferbarkeit, Produktnummer, Varianten Merkmale und/oder Herstellername aktivieren Sie unter: [Produktbox > Einstellungen](#einstellungen)
{% endhint %}

<div><figure><img src="/files/YaAj3Ggw1hbbjgGHmsvQ" alt=""><figcaption><p>Ausrichtung: Links</p></figcaption></figure> <figure><img src="/files/elD9niPgCEYZyXIChmcV" alt=""><figcaption><p>Ausrichtung: Mitte</p></figcaption></figure> <figure><img src="/files/AWeEQBxyx6WTmCKYFddy" alt=""><figcaption><p>Ausrichtung: Rechts</p></figcaption></figure></div>

#### Außenabstand und Innenabstand

Mit den Abständen können Sie die Entfernung zwischen den Produktboxen bzw. dem Rand der Produktbox und des Inhalts bestimmen. Beide sind unabhängig einstellbar und werden in Pixel angegeben.

<figure><img src="/files/BIvYQNoqYkJYvyOzdJ76" alt=""><figcaption></figcaption></figure>

* **1) Außenabstand:** Hiermit definieren Sie den linken und rechten Außenabstand zu dem nächsten Objekt.
* **2) Innenabstand:** Mit dieser Einstellung definieren Sie den Abstand zwischen Rand der Produktbox und den Inhalt. Sie ändern den oberen, unteren, linken und rechten Abstand.

#### Hover Effekt

Sie können optisch die Produktboxen hervorheben, über die sich der Nutzer mit dem Cursor befindet. Hierbei habe Sie die Auswahl zwischen: Rahmen, Schatten oder Rahmen und Schatten.

<div><figure><img src="/files/etdUAviuCRqvSjDHF5Wi" alt=""><figcaption><p>Hover Effekt: Rahmen</p></figcaption></figure> <figure><img src="/files/tmA1i1Ty51GaLjNIXFk8" alt=""><figcaption><p>Hover Effekt: Schatten</p></figcaption></figure> <figure><img src="/files/HgCeGGMQkSbNMeAsMEyh" alt=""><figcaption><p>Hover Effekt: Rahmen &#x26; Schatten</p></figcaption></figure></div>

### Einstellungen

Hier haben Sie die Möglichkeit den Inhalt einer Produktbox zu erweitern zudem können Sie entscheiden ob und wo Bewertungen angezeigt werden sollen. Diese Inhalte können Sie zusätzlich ausgeben:

* **1) Lieferstatus ausgeben** (bzw. Erscheinungsdatum ausgeben)
* **2) Grundpreis anzeigen**
* **3) Produktnummer anzeigen**
* **4) Hersteller anzeigen**
* **5) Varianten Merkmale anzeigen**
* **6) Varianten günstigster Preis anzeigen**
* **7) Bewertung anzeigen**
* **7) Bewertung Position** (über bzw. unter Produktbeschreibung)

<div><figure><img src="/files/DaJEGaJxCZwF71yvUqtH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/3AffUqty4YZxCXL6ObGJ" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
Für die Ausgabe des Lieferstatus, der Produktnummer und des Hersteller muss in den Kategorie Einstellungen: [Layout > Kategorie Listing > Layout-Typ](broken://pages/1rqRW0N8QZoG662HHFSE) der Wert der Wert Standard ausgewählt sein.
{% endhint %}

### Einstellungen Badges

#### Position

Für die Positionierung stehen Ihnen jeweils 2 Optionen für den linken und 2 Optionen für den rechten Bereich der Produktbox zur Verfügung.&#x20;

<div><figure><img src="/files/YT2gozvTYSsIYCveXdY8" alt=""><figcaption><p>Einstellung: <em>Links</em></p></figcaption></figure> <figure><img src="/files/Nj5ugwtVkn9e6B1ypAQE" alt=""><figcaption><p>Einstellung: <em>Links freistehend</em></p></figcaption></figure></div>

<div><figure><img src="/files/2zvKVnn6Yhw3LsV71vYq" alt=""><figcaption><p>Einstellung: <em>Rechts</em></p></figcaption></figure> <figure><img src="/files/LCi1YHVTdvjMunXLS1na" alt=""><figcaption><p>Einstellung: <em>Rechts freistehend</em></p></figcaption></figure></div>

#### Sale bzw. Discount Badge&#x20;

Hier haben Sie Einfluss auf die Badges im Listing. Vor allem auf das Sale bzw. Discount Badge können Sie Einfluss nehmen. Als Option stehen Ihnen drei Darstellungsmöglichkeiten zur Verfügung.

<div><figure><img src="/files/d6ikXJ7O1TFzRgAh8KrK" alt=""><figcaption><p>Shopware Standard</p></figcaption></figure> <figure><img src="/files/bb7zErrvusa4Xy1JaN9n" alt=""><figcaption><p>Prozentuale Ersparnis anzeigen (-10%)</p></figcaption></figure> <figure><img src="/files/a9WFhFjeSfUA0QtTHqnA" alt=""><figcaption><p>Absolute Ersparnis anzeigen (-10 €)</p></figcaption></figure></div>

Sollten Sie sich für das prozentuale bzw. absolute Ergebnis entscheiden, können Sie das Ergebnis runden lassen um so eine optisch bessere Anzeige zu erhalten. In den angegebenen Beispielen wären es 33 % bzw. 150 €.

#### Badge Versandkostenfrei

Zusätzlich haben Sie die Möglichkeit ein neues Badge bei Artikeln, welche Sie als Versandkostenfrei markiert haben, erscheinen zu lassen. Aktivieren Sie hierzu die Einstellung: *Badge Versandkostenfrei anzeigen*

<figure><img src="/files/SIgNpXtSGf7gqVzdKpeu" alt=""><figcaption><p>Badge Versandkostenfrei</p></figcaption></figure>

{% hint style="info" %}
Die Farbeinstellungen für alle Badges tätigen Sie unter: [Typografie & Farben](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#badges-and-hinweise)
{% endhint %}

### Produktname

#### Farben und Typografie

Für den Produktnamen haben Sie die Möglichkeit die Schriftart, die Schriftgröße und Schriftstärke, Schriftfarbe und Schriftfarbe bei Mouse Hover separat zu den anderen Texten in der Produktbox zu ändern und den Produktnamen somit hervorzuheben.&#x20;

Zusätzlich haben Sie die Möglichkeit per Text Transform den gesamten Produktnamen mit Groß- oder Kleinbuchstaben ausgeben zu lassen.

#### Anzahl der Zeilen

Mittels Anzahl der Zeilen können Sie den Platz für den Produktnamen definieren. Haben Sie z. B. lange Artikelnamen können zusätzliche Zeilen Abhilfe schaffen. Die zusätzlich Höhe wird für alle Produktboxen verwendet, egal ob das Produkt diese benötigt oder nicht. Sie haben die Möglichkeit bis zu 4 Zeilen auszugeben.

Sollten Sie die zusätzlichen Zeilen nicht für den Produktnamen benötigen, können Sie diese verwenden um einen größeren Abstand zwischen Produktnamen und Kurzbeschreibung zu bekommen.

<figure><img src="/files/E8dhcSRwUB2S8Pis1SxO" alt=""><figcaption><p>Beispiel mit Produktnamen über zwei Zeilen</p></figcaption></figure>

### Kurzbeschreibung

Standardmäßig ermittelt Shopware die Kurzbeschreibung aus der Langbeschreibung. Hier werden die ersten Sätze der Langbeschreibung herangezogen und nach eine bestimmte Zeichenanzahl abgeschnitten. Sie haben allerdings auch die Möglichkeit zwei andere Quellen zu nutzen:

#### Kurzbeschreibung&#x20;

* **aus der Meta-Beschreibung anzeigen:** Hier wird der Text verwendet, welchen Sie in den Einstellungen eines Produktes im Tap: [SEO > Meta-Beschreibung](/coolbax-docs/theme/produkt-einstellungen.md) hinterlegen.
* **aus dem Zusatzfeld anzeigen:** Eine weitere Möglichkeit ist das mitgelieferte Zusatzfeld. Sie finden dieses in den Einstellungen für ein Produkte im Tap: [Spezifikationen > Kurzbeschreibung](broken://pages/NeCDJ2YjIn4KWWuZYxqt)

{% hint style="warning" %}
Achten Sie darauf, dass der Inhalt der Kurzbeschreibung eventuell auch für die [Detail Einstellungen: Allgemein > Kurzbeschreibung](/coolbax-docs/theme/theme-einstellungen/produkt-detail.md#kurzbeschreibung) genutzt wird
{% endhint %}

#### Typografie

Für die Kurzbeschreibung im Listing haben Sie die Möglichkeit die Schriftgröße und die Schriftstärke zu verändern

### Grundpreise

Die Grundpreise werden standardmäßig etwas kleiner als die restlichen Texte in der Produktbox angezeigt. Sie haben hier die Möglichkeit die Schriftgröße, Schriftstärke und Schriftfarbe für diese spezielle Information zu ändern.

### Produktpreise

Um den Produktpreis speziell hervorzuheben, können Sie hier ebenfalls die Schriftgröße und Schriftstärke anpassen.

{% hint style="info" %}
Die Schriftfarbe können Sie unter: [Typografie & Farben > E-Commerce](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#e-commerce) ändern
{% endhint %}

### Aktion Buttons

Die Aktion Buttons können auf drei Anzeigemöglichkeiten dargestellt werden. Zu den Aktion Buttons gehören: In den [Warenkorb bzw. Detail](#auswahl-der-button-einblendung), Schnellansicht (wenn aktiv) und der Merkzettel [(wenn aktiv)](/coolbax-docs/theme/system-einstellungen.md#merkzettel-aktivieren).&#x20;

#### Hover-Effekt

* **Shopware Standard:** Hier werden die Buttons dauerhaft dargestellt. Sie sind zu jederzeit für den Benutzer sichtbar.

<figure><img src="/files/c3eoxpCImnMVTSWBZCap" alt="" width="363"><figcaption></figcaption></figure>

* **Aktion Buttons per Overlay einblenden (senkrecht oder waagerecht):** Bei diesen Varianten werden die Buttons ausgeblendet und fahren erst ein, wenn der Benutzer mit dem Cursor über die Produktbox geht. Die Buttons werden je nach Auswahl senkreckt oder waagerecht eingeblendet. Sie verschwinden, wenn der Cursor sich nicht mehr auf der Produktbox befindet.

<div><figure><img src="/files/Or2Z79IAQkf59o494nuZ" alt=""><figcaption><p>Aktion Buttons per Overlay senkrecht einblenden</p></figcaption></figure> <figure><img src="/files/kyGgWhc3KqfWbehJSdbJ" alt=""><figcaption><p>Aktion Buttons per Overlay waagerecht einblenden</p></figcaption></figure></div>

#### Auswahl der Button-Einblendung

* **Detail-Button immer anzeigen:** Sie möchten, dass ihre Kunden immer den Button zur Detailseite sehen. Der Warenkorb Button soll nicht erscheinen, dann schalten Sie diese Option auf aktive.
* **Detail-Button bei Varianten anzeigen:** Sie möchten bei Variantenartikel immer den Button zur Detailseite anzeigen, dann schalten Sie diese Option auf aktiv.

{% hint style="warning" %}
Wichtig bei beiden Optionen ist, dass die Grundeinstellung von [Shopware: *Einstellungen > Shop > Produkte > Kaufen-Buttons in Produktlistings anzeigen*](/coolbax-docs/theme/system-einstellungen.md#kaufen-buttons-im-listing-and-slider), deaktiviert ist
{% endhint %}

* **Schnellansicht-Button anzeigen:** Dieser Button ermöglicht dem Kunden bereits auf der Detailseite alles wichtige über das Produkt zu sehen. in einem engeschwebten Fenster werden die wichtigsten Daten angezeigt. Sie können das Fenster in den [Kategorie Einstellungen > Quickview (Schnellansicht)](#quickview-schnellansicht) konfigurieren

### Aktion Buttons im Produkt Slider

#### Kaufen-Button / Detail-Button anzeigen

Mit dieser Einstellung können Sie den Kauf bzw. Detail-Button in den Slider ausblenden.

<div><figure><img src="/files/qQgpP5XTR6zid03ekZoX" alt=""><figcaption><p>Beispiel mit Button</p></figcaption></figure> <figure><img src="/files/zMRPeKDP5Id5HifkjZDb" alt=""><figcaption><p>Beispiel ohne Button</p></figcaption></figure></div>

{% hint style="info" %}
Diese Einstellung gilt für alle Slider im gesamten Shop! Hierunter sind unter anderem auch die Slider auf den Detailseiten betroffen
{% endhint %}

{% hint style="warning" %}
Die System Einstellung: [Kaufen-Button / Detail-Button anzeigen](/coolbax-docs/theme/system-einstellungen.md#kaufen-buttons-in-produktlisting) muss aktiviert sein!
{% endhint %}

#### Schnellansicht-Button anzeigen

Damit die Schnellansicht im Slider angezeigt wird, muss die Einstellung aktiviert werden.&#x20;

{% hint style="info" %}
Diese Einstellung gilt für alle Slider im gesamten Shop! Hierunter sind unter anderem auch die Slider auf den Detailseiten betroffen.
{% endhint %}

Die Einstellung für das geöffnete Fenster der Schellansicht machen Sie bei: [Quickview (Schnellansicht)](#quickview-schnellansicht)

#### Merkzettel-Button anzeigen

Sollten Sie den Merkzettel-Button in den Slidern anzeigen, muss diese Funktion + die Einstellung in den System Einstellung: [Shop > Warenkorb > Merkzettel](/coolbax-docs/theme/system-einstellungen.md) gesetzt sein

### Farben Produkt Box & Produktbild

Sie haben hier die Möglichkeit farbliche Akzente für die Produktboxen zu setzen. Hierbei sind die Einstellungen zum einen für die gesamte Produktbox und speziell für das Produktbild möglich.

<figure><img src="/files/UfggF204zonwvKTdVpqR" alt=""><figcaption></figcaption></figure>

#### Farben Produkt Box

* **1) Rahmen anzeigen und Rahmenfarbe:** Mit dieser Einstellung setzen Sie einen Rahmen um die Produktbox und definieren die Rahmenfarbe.
* **2) Hintergrundfarbe:** Hiermit können Sie der gesamte Produktbox eine Hintergrundfarbe hinterlegen.
* **3) Schriftfarbe:** Diese Einstellung ändert die Schriftfarbe für alle Texte in der Produktbox.

{% hint style="info" %}
Die Schriftfarbe für die Preise können Sie unter: [Typografie & Farben > E-Commerce](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#e-commerce) ändern!
{% endhint %}

#### Farben Produktbilder

* **4) Rahmen anzeigen und Rahmenfarbe:** Mit dieser Einstellung setzen Sie einen Rahmen um den Bildbereich und definieren die Rahmenfarbe.
* **5) Hintergrundfarbe:** Hiermit können Sie eine Hintergrundfarbe für den Bildbereich festlegen.

<figure><img src="/files/xFnqfTqXqNgN1W8rcq95" alt=""><figcaption></figcaption></figure>

## Produktbild Wechsel / Zoom

Fügen Sie einen Eyecatcher beim überfahren der Produktbox mit dem Cursor hinzu. Mit Hilfe dieser Funktion können Sie ihr Produktbild animieren. Hierfür stehen Ihnen zwei Optionen zur Verfügung: Bildzoom und Bildwechsel.

<div><figure><img src="/files/Dmr3FTSU0AhVoa7ezwyf" alt=""><figcaption><p>Beispiel für Bildzoom</p></figcaption></figure> <figure><img src="/files/ekggoI7dLS8f5RqhingU" alt=""><figcaption><p>Beispiel für Bildwechsel</p></figcaption></figure></div>

### Bildzoom

Für den Bildzoom aktivieren Sie die Funktion und wählen unter: *Effekt* die Option: *Bildzoom* aus.

#### Zoom Faktor

Für die Option: *Bildzoom* bekommen Sie die Möglichkeit zu bestimmen, um wie viel Prozent das Produktbild vergrößert werden soll.&#x20;

{% hint style="info" %}
Bleiben Sie im positiven Bereich (z.B 1.2), wird das Bild vergrößert. Verwenden Sie einen negativen Wert (z.B. -1.2) verkleinert sich das Bild um die Prozentzahl
{% endhint %}

### Bildwechsel

Wie beim Bildzoom muss die Funktion aktiv geschalten werden. Wählen Sie danach unter: *Effekte* die Option: *Bildwechsel.*

#### Dauer des Übergangs

Hier bestimmen Sie, wie lange die Animation von Anfang bis Ende dauern soll. Sie können von Sofort bis 1 Sekunde auswählen

#### **Geschwindigkeitskurve**

Mit der Geschwindigkeitskurve bestimmen Sie, wie der Ablauf der Animation erfolgen soll. Die Unterschiede sind sehr dezent:

* **ease:** Animation startet etwas langsamer > beschleunigt > klingt danach langsam ab
* **linear:** Konstante Geschwindigkeit über die gesamte Animation
* **ease-in:** Startet langsam und beschleunigt gegen Ende der Animation
* **ease-out:** Startet schnell und bremst gegen Ende der Animation langsam aus
* **ease-in-out:**  Startet langsam > beschleunigt in der Mitte > und bremst gegen Ende der Animation (ähnlich wie ease, aber dramatischer)

## Sidebar Navigation

### Einstellungen

#### Nur gewählte Kategorie + Unterkategorien im linken Kategoriebaum anzeigen

Standardmäßig werden in Shopware alle Haupt- und Unterkategorien in der Sidebar ausgegeben. Mit dieser Einstellung wird nur die gewählte Hautkategorie mit deren Unterkategorien ausgegeben

<div><figure><img src="/files/QdNruF49pVSQVW9jLxN5" alt=""><figcaption><p>Alle Haupt und Unterkategorien werden dargestellt</p></figcaption></figure> <figure><img src="/files/5NGc5a5DoFHHIC5gFcbJ" alt=""><figcaption><p>Gewählte Haupt mit Unterkategorien werden dargestellt</p></figcaption></figure></div>

### Typographie

Hier haben Sie die Möglichkeit, die Navigationspunkte auf die unterschiedlichste Weise hervorzuheben

* **Schriftart:** Wählen Sie zwischen ihrer eigestellten Schriftart Text oder Überschrift. Die Schriftarten definieren Sie unter: [Typografie & Farben > Typografie](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#typografie). Diese Einstellung wird auf die Haupt- sowie die Unterkategorien angewendet.
* **Schriftgröße:** Wählen Sie die Größe der Schrift aus. Die Angaben erfolgen in Pixel. Die Einstellung übernehmen die Unterkategorien. Die Hauptkategorie wird automatisch 2 Pixel größer dargestellt.
* **Schriftstärke (inaktiv & aktiv):** Definieren Sie die Schriftstärke (dünn, normal oder fett) für aktive und deaktivierte Navigationspunkte. Beide können separat gewählt werden.
* **Text Transform:** Sie können diese Navigationspunkte nur in Großbuchstaben bzw. nur in Kleinbuchstaben anzeigen lassen. Diese Einstellung wird auf die Haupt- sowie die Unterkategorien angewendet.

### Farben

Die Sidebar können Sie ebenfalls farblich hervorheben. Ob Sie die Funktion: [Nur gewählte Kategorie + Unterkategorien in Sidebar anzeigen](#nur-gewaehlte-kategorie-+-unterkategorien-in-sidebar-anzeigen) aktiviert haben oder nicht ist hiervon unabhängig.

<figure><img src="/files/9EOIJhGcWpKDgkkKQJls" alt=""><figcaption></figcaption></figure>

* **1) Rahmen anzeigen und Rahmenfarbe:** Mit dieser Einstellung setzen Sie einen Rahmen um die Produktbox und definieren die Rahmenfarbe.&#x20;
  * Die Linie zwischen Hauptkategorie und Unterkategorien wird nicht eingefärbt. Hier greift die Einstellung von: [Typografie & Farben > Theme-Farben > Rahmen](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#theme-farben)
* **2) Hintergrundfarbe:** Hiermit können Sie eine Hintergrundfarbe für die Sidebar festlegen.
* **3) Schriftfarbe:** Diese Einstellung ändert die Schriftfarbe für alle Texte in der Sidebar.
* **4) Schrift- und Hintergrundfarbe bei hover:** Geht der Cursor über einen Link, kann sich die Farbe des Hintergrundes und der Schrift ändern.
* **5) Schrift- und Hintergrundfarbe bei aktiv:** Befindet sich der Nutzer auf der Seite wird der Hintergrund und die Schrift in der Farbe ausgeben, welche hier hinterlegt wird. Zusätzlich wird die Schrift fett ausgegeben.
* **6) Trennlinie:** Definieren Sie die Farbe der Trennline zwischen der Hauptkategorie und den aufgelisteten Unterkategorien.

<div align="center"><figure><img src="/files/YiX9qvbx5Jn2YCYpDRye" alt=""><figcaption><p>Beispiel Desktop Navigation</p></figcaption></figure> <figure><img src="/files/JgKc3J3Gah6l7Cug2joG" alt="" width="287"><figcaption><p>Beispiel Mobile Navigation</p></figcaption></figure></div>

## Filter

### Einstellungen

Standardmäßig sind die Filter bei Shopware geschlossen. Der Nutzer muss aktive draufklicken um, die Filtereigenschaften zu sehen. Mit der nachfolgenden Funktion können Sie das ändern

<div><figure><img src="/files/THPgpK8sdtnfYDah0Weg" alt=""><figcaption><p>Shopware Standard</p></figcaption></figure> <figure><img src="/files/UCgqgYhOKsXYWF7zrZ4c" alt=""><figcaption><p>Beispiel: Filter immer offen</p></figcaption></figure> <figure><img src="/files/QCDXY4sq4FNvgwp8b36J" alt=""><figcaption><p>Beispiel: Die ersten x Filter öffnen</p></figcaption></figure></div>

#### Filter immer offen

Genau das Gegenteil vom Shopware Standard macht diese Funktion. Wenn aktiv, werden alle Filter mit ihren Filtereigenschaften ausgeklappt und sichtbar dargestellt.

#### Die ersten x Filter öffnen

Hier können Sie ein Anzahl festlegen, wie viel Filter bereits ausgeklappt angezeigt werden sollen. Es werden immer die erste (x=Anzahl) Filter geöffnet.&#x20;

#### Seitlicher Innenabstand

Sie können den Innenabstand von rechts und links bestimmen. Hierbei wird die Überschrift sowie die Auswahloptionen nach Innen gerückt. Der Innenabstand kann von 0 - 20 Pixel geändert werden&#x20;

Die Trennlinien der einzelnen Filter zeigen Ihnen die Breiten der Container an.&#x20;

<figure><img src="/files/oVEsrJoOUFFNgTi69lyF" alt=""><figcaption></figcaption></figure>

### Typographie

Die Einstellungen der Typografie wirken sich auf die Überschrift sowie die Auswahloptionen aus.

* **Schriftgröße:** Wählen Sie die Größe der Schrift aus. Die Angaben erfolgen in Pixel.&#x20;
* **Schriftstärke:** Definieren Sie die Schriftstärke (dünn, normal oder fett).
* **Text Transform:** Sie können die Texte in den Filtern nur in Großbuchstaben bzw. nur in Kleinbuchstaben anzeigen lassen.

### Farben

<figure><img src="/files/P20caW2Jxbr9SZPIPFER" alt=""><figcaption></figcaption></figure>

* **1) Rahmen + Rahmenfarbe:** Hier ist der Rahmen um den gesamten Container der Filter gemeint
* **2) Hintergrundfarbe:** Bestimmen Sie die Hintergrundfarbe des Containers der Filter
* **3) Schriftfarbe:** Legen Sie die Schriftfarbe für alle Texte im Containers fest.
* **4) Trennlinien:** Bestimmen Sie die Farbe der Linie, welche am Ende jedes Filters eingeblendet wird.

<figure><img src="/files/mVuG66kHeD42phFkdVCD" alt=""><figcaption></figcaption></figure>

## Pagination und Sortierung

<figure><img src="/files/OPj9Jm5sO7X6OtM37CNR" alt=""><figcaption><p>Beispiel: Paginierung mit Sortierung</p></figcaption></figure>

Die Paginierung und die Sortierung befindet sich über der Auflistung der Produktboxen. Sie kann farblich angepasst werden. Hierbei ist es Möglich die Hintergrundfarbe, die Schriftfarbe und einen Rahmen mit Rahmenfarbe zu ändern.

### Einstellung

<figure><img src="/files/Tepgq06dy8XcE5rjVJcK" alt=""><figcaption></figcaption></figure>

* **1) Rahmen + Rahmenfarbe:** Hier ist der Rahmen um den gesamten Container der Paginierung und Sortierung gemeint
* **2) Hintergrundfarbe:** Bestimmen Sie die Hintergrundfarbe des Containers der Paginierung und Sortierung

<figure><img src="/files/sX0ULXQgN2GR8dNEpwOO" alt=""><figcaption><p>Beispiel für alle Einstellungsmöglichkeiten aus dem Bereich: Pagination und Sortierung > Einstellung</p></figcaption></figure>

### Farben Buttons

<figure><img src="/files/ZyTwA1CdczU5NtPOSu4R" alt=""><figcaption></figcaption></figure>

* **1) Hintergrundfarbe:** Bestimmen Sie die Hintergrundfarbe des Containers der Paginierung und Sortierung
* **2) Schriftfarbe:** Diese Einstellung ändert die Schriftfarbe für alle Texte in der Sidebar.
* **3) Schrift- und Hintergrundfarbe bei hover:** Geht der Cursor über eine Button der Paginierung , kann sich die Farbe des Hintergrundes und der Schrift ändern.
* **4) Schrift- und Hintergrundfarbe bei aktiv:** Ist der Button aktive wird der Hintergrund und die Schrift in der Farbe ausgeben, welche hier hinterlegt wird.&#x20;
* **5) Schrift- und Hintergrundfarbe bei disabled:** Hierrunter sind alle Buttons gemeint, welche inaktiv gesetzt sind. Hintergrund- und Schriftfarbe können frei gewählt werden.

<figure><img src="/files/SPL8kSkMI4fwEt6zVNHg" alt=""><figcaption><p>Beispiel für alle Einstellungsmöglichkeiten der Paginierung</p></figcaption></figure>

## Sidebar Kontakt Box

Die Sidebar Kontakt Box ist ein Feature welches einerseits global in jeder Sidebar angezeigt werden kann oder Sie bestimmen selber über die Erlebniswelten, wo die Sidebar Kontakt Box angezeigt werden soll. Hierfür gibt es eine eigenes [Blockelement für die Erlebniswelten](/coolbax-docs/theme/erlebniswelten.md#kontakt-box).

<figure><img src="/files/wS9z5au8609J1ZdodxPr" alt=""><figcaption></figcaption></figure>

In den Einstellungen für dieses Features legen Sie fest:

* Auf welche Viewports die Funktion dargestellt werden soll
* Wie die Headline lauten soll
* Angabe der allgemeinen Kontaktdaten (die Angaben sind freiwillig) wie: Anschrift, Öffnungszeiten, Telefonnummer, Mobil, Fax, E-Mail. Sie können als globale Einstellung für das Blockelement in den Erlebniswelten genutzt werden
* Möglichkeit Google Maps Link auszugeben

{% hint style="info" %}
Wie Sie einen Google Maps Link erzeugen finden Sie auf der Seite: [Theme Einstellungen](/coolbax-docs/theme/theme-einstellungen.md)
{% endhint %}

## Quickview (Schnellansicht)

Das Quickview oder auch Schnellansicht genannt, erzeugt ein Fenster mit den wichtigsten Informationen zu dem gewählten Produkt. Man kann es ebenfalls als Vorschaufenster für die Detailseite ansehen.

<figure><img src="/files/yNHJXj5E5pM2oeS0xykP" alt=""><figcaption><p>Beispiel für Quickview (Schnellansicht)</p></figcaption></figure>

In den Einstellungen für dieses Features legen Sie fest:

* Auf welche Viewports die Funktion dargestellt werden soll
* Option auswählen [Quickview im Slidern anzeigen](#quickview-im-slidern-anzeigen)
* Bestimmung des [Button Style](#button-style) für das Listing und in der Schnellansicht
* Hintergrundfarbe und Schriftfarbe für das Fenster der Schnellansicht
* Möglichkeit zur Anzeige der Produktnummer und Produktbeschreibung

<div><figure><img src="/files/6RXY3qdQsogyRcE0YwYc" alt=""><figcaption></figcaption></figure> <figure><img src="/files/YBxPevMP2rSrtmXVwFTT" alt=""><figcaption></figcaption></figure> <figure><img src="/files/T1YmkzyeRoykeeRJv9WJ" alt=""><figcaption></figcaption></figure></div>

### Button Style

Sie haben die Möglichkeit das Aussehen des Button im Produkt Listing und im Quickview unterschiedlich zu gestalten. Hierfür stehen Ihnen 15 vordefinierte Buttons zur Auswahl. Welche Auswahlmöglichkeiten Sie haben, finden Sie unter: [Theme Einstellungen > Button Style auswählen](/coolbax-docs/theme/theme-einstellungen.md#button-style-auswaehlen).

* Button Style in Produkt Listings: Hier definieren Sie das Aussehen des Button unter dem Warenkorb Button in der Produkt Box
* Button Style in Quickview: Hier definieren Sie das Aussehen des Detail Buttons in dem Quickview Fenster
