> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/content/erlebniswelten/bloecke/kategorie/kategorie-listing.md).

# Kategorie Listing

Ab Theme Version 4.3.0 steht Dir zur Bearbeitung der Erlebniswelten das Kategorie Listing Element zur Verfügung - exklusiv für die Pro Version des Themes auf Shopware Self-managed Systemen.

Mit dem Kategorie Listing Element kannst Du die Unterkategorien als Kacheln in Deiner Kategorieseite auflisten. Für die Anzeige eines Kategorie-Listings stehen Dir in der Block-Kategorie „Kategorie“ bereits fünf vorkonfigurierte Blöcke mit dem Kategorie Listing Element zur Verfügung.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FIzZrFcLePIIboRI5UTcB%2Fdocs-de-shopping-experiences-elements-category-listing.webp?alt=media&amp;token=071d7750-2272-464b-a555-72dfb33e1fa4" alt=""><figcaption></figcaption></figure>

## Element-Einstellungen

Es gibt zahlreiche Einstellungen zum Konfigurieren des Elementlayouts.&#x20;

### Inhalt

Inhaltseinstellungen des Kategorie Listing Elements.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FGc7IQutrv0RAxD5Due0G%2Fdocs-de-config-shopping-experiences-elements-category-listing-content-settings.png?alt=media&amp;token=52be85fe-aa8f-425d-b0fb-3182622a62f0" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Individueller Einstiegspunkt (optional)</strong></summary>

Wähle einen individuellen Einstiegspunkt für das Element. Das ist besonders sinnvoll, wenn Du eine bestimmte Kategorie-Struktur zum Beispiel auf der Startseite darstellen möchtest. Es ist auch möglich, mehrere Einstiegspunkte zu wählen. Diese werden dann zusammen gefasst und als größere Kategorie-Auswahl angezeigt.

{% hint style="warning" %}
**Hinweis:** Der gewählte Einstiegspunkt muss innerhalb einer Navigation (Haupt-Navigation, Footer-Navigation oder Service-Navigation) liegen. Du kannst die verwendete Einstiegspunkt-Kategorie aber über die Einstellung in der Kategorie aus der Navigation ausblenden, damit diese nicht in deinen Menüs sondern nur als Kategorie-Listing angezeigt wird.
{% endhint %}

</details>

<details>

<summary>Individuelle Kategorien (optional)</summary>

Anstelle eines Einstiegspunktes, der auf deinen existierenden Kategorie-Baum zurückgreift, kannst Du die anzuzeigenden Kategorien auch frei zusammenstellen.

</details>

<details>

<summary><strong>CSS-Klassen</strong></summary>

Füge benutzerdefinierte CSS-Klassen für benutzerdefiniertes Styling hinzu. Mehrere Klassen können mit einem Leerzeichen getrennt hinzugefügt werden. Keine Punkte vor den Klassennamen.

</details>

### Grundeinstellungen

Die Grundeinstellungen legen das Erscheinungsbild und den Stil jeder einzelnen Kategorie fest.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FUZkL2hxT56ohtOkkVzuA%2Fdocs-de-config-shopping-experiences-elements-category-listing-basic-settings.png?alt=media&amp;token=d2c8bf21-8bc8-40d5-8060-f154131cc253" alt=""><figcaption></figcaption></figure>

<details>

<summary>Layout</summary>

Wähle zwischen verschiedenen Layout-Typen für das Kategorie Listing `Bild + Text` | `Bild` | `Text`

</details>

<details>

<summary>Abstand</summary>

Bestimmt den inneren Abstand zwischen den einzelnen Kategorie-Kacheln.

</details>

<details>

<summary><strong>Kategorien pro Zeile</strong></summary>

Definiere die Anzahl an Kategorien pro Zeile für jeden Viewport.

</details>

<details>

<summary><strong>Slider (je Viewport)</strong></summary>

Insbesondere auf mobilen Geräten kann die Auflistung der Kategorien sehr viel vertikalen Raum einnehmen. Um das zu vermeiden kannst Du pro Viewport bestimmen, ob das Kategorie-Listing als Slider angezeigt wird. Die Anzahl der Kategorien pro Zeile gibt dann die Anzahl gleichzeitig sichtbarer Kacheln im Slider an.\
\
**Tipp:** Es können auch Kommazahlen für die **Kategorien pro Zeile** eingetragen werden, sodass der Slider die nächste Kacheln teilweise anzeigt. Das suggeriert dem Kunden, dass es hier noch mehr Kategorien zu entdecken gibt.

</details>

<details>

<summary>Ausgeblendete Kategorien anzeigen</summary>

Bestimmt ob Kategorien, die in der Navigation ausgeblendet sind, im Kategorie-Listing angezeigt werden.

</details>

#### Styling

<details>

<summary>Hintergrund</summary>

Hintergrundfarbe der Kategorie Listing Kachel.

</details>

<details>

<summary>Rahmen</summary>

Rahmen zur Umrandung der Kategorie Listing Kachel.

</details>

<details>

<summary>Innenabstände (px)</summary>

Fügt einen inneren Abstand zur Kategorie Kachel hinzu. Die hinterlegte Hintergrundfarbe wird um das Kategoriebild herum sichtbar sein.

</details>

<details>

<summary>Abgerundete Ecken</summary>

Fügt einen Randradius für die Kanten der Kategorie Listing Kachel hinzu. Beachte, dass das Bild ebenfalls einen individuellen Randradius haben kann.

</details>

<details>

<summary>Mouse-Over Effekt | Mouse-Out Effekt</summary>

Durch verschiedene Mouse-Over und Mouse-Out Effekte lässt sich die Sichtbarkeit des Inhalts auf der Kategorie Kachel steuern. So kann der Inhalt beispielsweise erst sichtbar werden, wenn sich die Maus darüber befindet - oder verschwindet, wenn die Maus über das Element bewegt wird, sodass das Kategoriebild komplett sichtbar wird.

</details>

### Text Einstellungen

Die Texteinstellungen geben das Aussehen und den Stil des Textes über oder neben dem Bild an. Diese Registerkarte ist nur verfügbar, wenn die Option Inhalt > Layout auf `Bild + Text` oder `Text` eingestellt ist.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fia0OAQi9Hmh7WWDHuq2c%2Fdocs-de-config-shopping-experiences-elements-category-listing-text-settings.webp?alt=media&amp;token=390b5072-31e1-4290-b5b8-0db94f84bea7" alt=""><figcaption></figcaption></figure>

#### Typografie

<details>

<summary>Schriftart</summary>

Wähle zwischen der allgemeinen Text-Schriftfamilie oder der Überschriften-Schriftfamilie.

</details>

<details>

<summary>Text Ausrichtung</summary>

Definiert die horizontale Ausrichtung des Textes – hauptsächlich sichtbar, wenn eine Minimale Breite (px, %) für das Textelement festlegen.

</details>

<details>

<summary>Schriftgröße</summary>

Die Schriftgröße des Textelements. Die Schriftgröße wird mit der Größe des Viewports skaliert und kann auf kleineren Bildschirmen kleiner erscheinen.

</details>

<details>

<summary>Schriftgewicht</summary>

Definiert die Schriftstärke des Textes. Achte darauf,  Schriftstile zu verwenden, die in der verwendete Schriftart vorhanden sind.&#x20;

*Werden Schriftschnitte abgerufen, welche die Schrift nicht ausliefert, wenden Browser das* [*Näherungsverfahren*](https://developer.mozilla.org/de/docs/Web/CSS/font-weight#n%C3%A4herungsverfahren) *an.*

</details>

#### Text Element

<details>

<summary>Farbe</summary>

Die Farbe des Textes auf dem Text Element.

</details>

<details>

<summary>Hintergrund</summary>

Die Hintergrundfarbe des Text Elements.&#x20;

*Beachten auch das Alphakanalfeld in der Farbauswahl, um teilweise transparente Hintergründe zu erstellen.*

</details>

<details>

<summary>Hintergrund weichzeichnen (px)</summary>

Mit der Hintergrundunschärfe kann alles hinter dem Text Element mit dem eingegebenen Wert in Pixeln unscharf gemacht werden. Der Effekt ist nur sichtbar, wenn über die Farbauswahl eine transparente oder teilweise transparente Hintergrundfarbe ausgewählt wurde.\
\
Beispiel:&#x20;

<img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fynqoz0fDHXgvzQkVuqTR%2Fdocs-en-config-shopping-experiences-elements-category-listing-text-settings-background-blur-example.webp?alt=media&amp;token=46a86542-6ad6-4b34-8cde-319c136789d8" alt="" data-size="original">

</details>

<details>

<summary>Position</summary>

Definiert, ob sich das Textelement auf oder neben dem Bild befindet.&#x20;

*Diese Option ist nur verfügbar, wenn der Layouttyp auf `Bild + Text` eingestellt ist.*

</details>

<details>

<summary>Horizontale Ausrichtung</summary>

Die **horizontale Ausrichtung** bestimmt zusammen mit der **vertikalen Ausrichtung** die grundlegende Platzierung des Inhalts auf dem Bild.

</details>

<details>

<summary>Vertikale Ausrichtung</summary>

Die **vertikale Ausrichtung** bestimmt zusammen mit der **horizontalen Ausrichtung** die grundlegende Platzierung des Inhalts auf dem Bild.

</details>

<details>

<summary>Minimale Breite (px, %)</summary>

Die minimale Breite bestimmt, wie breit das Textelement mindestens sein muss.

*Diese Einstellung erzeugt in Verbindung mit der Maximale Breite (px, %) eine dynamische Breite zwischen minimaler und maximaler Breite.*

</details>

<details>

<summary>Maximale Breite (px, %)</summary>

Die maximale Breite bestimmt, wie breit das Textelement höchstens sein darf.

*Diese Einstellung erzeugt in Verbindung mit der Maximale Breite (px, %) eine dynamische Breite zwischen minimaler und maximaler Breite.*

</details>

#### Erweiterte Einstellungen

<details>

<summary>Innenabstände (px)</summary>

Bestimmt die Innenabstände im Text-Element Container und fällt vor allem dann auf, wenn für diesen Container eine Hintergrundfarbe eingestellt wurde.

</details>

<details>

<summary>Außenabstände (px, %)</summary>

Sorgt dafür, dass der Text-Element Container nicht am Bildrand klebt und bestimmt zudem die genaue Positionierung abhängig von der vertikalen und horizontalen Ausrichtung.

</details>

<details>

<summary>Abgerundete Ecken</summary>

Legt einen Rahmenradius für den Text-Element Container fest.&#x20;

*Beachte, dass dies nur sichtbar ist, wenn eine Hintergrundfarbe definiert wurde*.

</details>

<details>

<summary>Text Mouse-Over</summary>

Definiert eine kleine Hover-Animation für das Textelement. Wähle zwischen `Keine` | `Zeige Pfeil` | `Pfeilanimation`.

</details>

### Bild Einstellungen

Die Bildeinstellungen geben das Aussehen und den Stil des Kategoriebilds an. Diese Registerkarte ist nur verfügbar, wenn die Option Inhalt > Layout auf `Bild + Text` oder `Bild` eingestellt ist.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FPLSFCBXhlI37pmSE8odE%2Fdocs-de-config-shopping-experiences-elements-category-listing-image-settings.webp?alt=media&amp;token=8ca4830d-a9f3-4b2b-bb0b-ca853d9a4f97" alt=""><figcaption></figcaption></figure>

<details>

<summary>Anzeigemodus</summary>

Mit dem **Anzeigemodus** entscheidest Du, wie das Bild dargestellt werden soll:

* **Füllen/Zugeschnitten:** Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
* **Beinhalten/Feste Höhe:** Das Bild wird gestreckt und auf die Größe der Box angepasst. Es wird hierbei nicht beschnitten.

</details>

<details>

<summary>Minimale Höhe</summary>

Gibt die Mindesthöhe des Elements an.

</details>

### Bild-Ausrichtung

<details>

<summary>Horizontale Bildausrichtung</summary>

Gibt die horizontale Ausrichtung des Bildes innerhalb der Box des Elements an.

</details>

<details>

<summary>Vertikale Bildausrichtung</summary>

Gibt die vertikale Ausrichtung des Bildes innerhalb der Box des Elements an.

</details>

### Erweiterte Einstellungen

<details>

<summary>Hintergrundbild mit Farbe überlagern</summary>

Durch die Option **Hintergrundbild mit Farbe überlagern** dämpfst Du das Kategoriebild nach belieben mit einer Teiltransparenten Farbe ab und machst so den Text auf dem Bild lesbarer.

Zusätzlich kannst Du dieses Overlay als Farbverlauf zu transparent einstellen und, sofern aktiviert, einen Winkel für diesen Farbverlauf wählen.\
\
Beispiel:\
![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2F6qi19dxXEoVfb86IrySi%2Fdocs-en-config-shopping-experiences-elements-category-listing-image-settings-gradient-overlay-example.webp?alt=media\&token=8a5c8d01-6743-44e8-a2d4-a2f8ac7af233)

</details>

<details>

<summary>Abgerundete Ecken</summary>

Definiere einen individuellen Randradius für das Bild.&#x20;

*Beachte, dass das gesamte Element ebenfalls einen Randradius haben kann.*

</details>

<details>

<summary>Bild Mouse-Over</summary>

Bietet Dir die Möglichkeit, einen kleinen Hover-Effekt auf das Element anzuwenden.

</details>

## Alternatives Anzeigebild

Kategorien vom Typ `Link` haben in Shopware kein eigenes Kategorie Anzeigebild. Ebenso kannst Du über dieses Zusatzfeld ein alternatives Bild für das Kategorie-Listing implementieren, sollte das generelle Anzeigebild der Kategorie nicht geeignet sein.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2F0r3XHkKgIzKLY6nlKAOA%2Fdocs-de-config-catalogues-categories-category-type-link.png?alt=media&amp;token=8788cd69-9274-4840-bf49-a6bcea5df22c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FckwUcPZZSmDY9dXawK48%2Fdocs-de-config-custom-fields-catagues-categories-category-listing-media.png?alt=media&amp;token=925566f4-c706-49cb-bd40-b499850b9c6a" alt=""><figcaption></figcaption></figure>

Über die Medienauswahl **Kategorie Listing Anzeigebild** kannst Du ein alternatives Bild oder Video für das Kategorie Listing definieren.