> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/kategorieseite/verschachtelte-unterkategorien.md).

# Verschachtelte Unterkategorien

Das CMS-Element "**Verschachtelte Unterkategorien**" stellt die Unterkategorien der aktuellen Kategorie in Kacheln dar und blendet darunter zusätzlich deren direkte Unter-Unterkategorien als Liste ein. So entsteht aus einer Kategorie-Ebene eine zweistufige Navigation. Name und Bild stammen aus den entsprechenden Informationen in der Kategorie-Verwaltung von Shopware.

<figure><img src="/files/naEeEj8zheJ5YTlCWZ82" alt=""><figcaption><p>ThemeWare® CMS-Element "Verschachtelte Unterkategorien"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Dieses CMS-Element wurde für CMS-Seiten vom Typ "Kategorieseite" und für Landingpages entwickelt. Die Unterkategorien werden automatisch aus der aktuellen Kategorie geladen.
{% endhint %}

{% hint style="success" %}
**Beta**: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein [Feedback](https://service.themeware.design/verbesserungsvorschlag).
{% endhint %}

{% hint style="warning" %}
**Wichtig**: Dieses CMS-Element ist ein Add-on und muss separat freigeschaltet werden. [Warum Add-ons?](/zusatzfunktionen/add-ons.md#warum-add-ons)
{% endhint %}

***

## Element konfigurieren

Die ThemeWare® "Verschachtelte Unterkategorien" kannst du wie folgt konfigurieren:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Fahre mit der Maus über das entsprechende CMS-Element
3. Klicke auf das ![](/files/5URCkVnh55QbNfBAp6e7) "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element-Einstellungen"
5. Nehme die gewünschten Änderungen vor
6. Speichere deine Änderungen

Du hast das CMS-Element nun konfiguriert.

***

## Inhalt

Die dargestellten Texte und Bilder stammen aus der Kategorie-Verwaltung ("Kataloge" => "Kategorien") von Shopware.

Angezeigt werden der "**Name**" und das "**Bild**" (= Anzeigebild) der Unterkategorien sowie deren direkte Unterkategorien. Das Bild wird nicht zwingend benötigt.

Standardmäßig werden die Unterkategorien der aktuellen Kategorie verwendet. Auf der Startseite werden automatisch die obersten Kategorien angezeigt. Im **erweiterten Modus** lässt sich über einen **Kategorie-Einstiegspunkt** manuell festlegen, ab welcher Kategorie die Unterkategorien geladen werden.

***

## Element-Konfiguration

Die Konfiguration ist in mehrere Tabs unterteilt.

### Inhalt

Im Tab "Inhalt" wird ein Hinweis angezeigt, dass die Daten automatisch aus der Kategorie geladen werden. Über den erweiterten Modus kann zusätzlich der **Kategorie-Einstiegspunkt** gesetzt werden.

### Layout

> **Allgemein**
>
> Hier wählst du den **Layout-Typ** und die Ausrichtung der Karten:
>
> * **Karten** (mit Hintergrund und Schatten)
> * **Clean** (ohne Hintergrund) – die Ecken-Rundung wird in diesem Fall auf das Bild angewendet
>
> Über "**Karten ausrichten**" legst du die horizontale Ausrichtung der Kacheln fest.
>
> **Karte**
>
> * **Bild neben Text...**: ab welchem Viewport Bild und Text nebeneinander stehen (Standard: ab Desktop ≥992px). Darunter wird das Bild über dem Text gestapelt.
> * **Maximale Unter-Unterkategorien**: maximale Anzahl an Unter-Unterkategorien pro Karte (Standard: `5`). Wird die Anzahl überschritten, erscheint ein abschließender **"..."**-Link, der zur jeweiligen Kategorie führt.
> * **Eckenradius** (Standard: `6px`)
> * Nur im Layout-Typ "Karten": **Hintergrundfarbe** der Karte, **Schlagschatten** und **Schatten bei Hover**.
>
> **Bild**
>
> * **Objektposition** (Standard: zentriert)
> * **Minimale Höhe (gestapelt)** (Standard: `160px`)
> * **Minimale Höhe (nebeneinander)** (Standard: `320px`)
> * **Bild auf Mobilgeräten anzeigen** (< 576px, Standard: deaktiviert)

### Grid

Im Tab "Grid" kannst du die Anzahl der Spalten in verschiedenen Viewports konfigurieren.

> **Spalten**
>
> Im Abschnitt "Spalten" kannst du die Anzahl der Spalten pro Viewport festlegen:
>
> * **XS** (Standard: 12 = 1 Spalte)
> * **SM** (Standard: 6 = 2 Spalten)
> * **MD** (Standard: 6 = 2 Spalten)
> * **LG** (Standard: 4 = 3 Spalten)
> * **XL** (Standard: 3 = 4 Spalten)
> * **XXL** (Standard: 3 = 4 Spalten)

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" konfigurierst du das **Lazy Loading** der Bilder (Standard: "Eager").

### Erweitert

Du kannst zwar jedes HTML-Element unserer CMS-Elemente über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.

***

## Add-on

{% content-ref url="/pages/EU77ZEupuu1SnRvodv5P" %}
[Verschachtelte Unterkategorien](/zusatzfunktionen/add-ons/verschachtelte-unterkategorien.md)
{% endcontent-ref %}