> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/additional-features/cms-extensions/cms-elements/listing-page/nested-subcategories.md).

# Nested subcategories

The "**Nested subcategories**" CMS element displays the subcategories of the current category as tiles and, below each one, additionally lists their direct sub-subcategories. This turns a single category level into a two-tier navigation. Name and image come from the corresponding information in Shopware's category management.

<figure><img src="/files/W4T0xdcQWpykyz017dJD" alt=""><figcaption><p>ThemeWare® CMS element "Nested subcategories"</p></figcaption></figure>

{% hint style="info" %}
**Note**: This CMS element was developed for CMS pages of the type "category page" and for landing pages. The subcategories are loaded automatically from the current category.
{% endhint %}

{% hint style="success" %}
**Beta**: This feature is currently in beta and may change in a future release. – We'd love to hear your [feedback](https://service.themeware.design/en/feature-request).
{% endhint %}

{% hint style="warning" %}
**Important**: This CMS element is an add-on and must be unlocked separately. [Why add-ons?](/additional-features/add-ons.md#why-add-ons)
{% endhint %}

***

## Configure element

You can configure the ThemeWare® "Nested subcategories" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

***

## Content

The displayed texts and images come from Shopware's category management ("Catalogues" => "Categories").

Shown are the "**Name**" and the "**Image**" (= display image) of the subcategories as well as their direct subcategories. The image is not mandatory.

By default, the subcategories of the current category are used. On the homepage, the top-level categories are shown automatically. In **advanced mode**, a **category entrypoint** lets you manually define which category the subcategories are loaded from.

***

## Element configuration

The configuration is split into several tabs.

### Content

The "Content" tab shows a note that the data is loaded automatically from the category. The **category entrypoint** can additionally be set via advanced mode.

### Layout

> **General**
>
> Here you choose the **layout type** and the alignment of the tiles:
>
> * **Cards** (with background and shadow)
> * **Clean** (no background) – in this case the border radius is applied to the image
>
> Via "**Column (tiles) alignment**" you define the horizontal alignment of the tiles.
>
> **Card**
>
> * **Image side-by-side...**: from which viewport image and text sit next to each other (default: from desktop ≥992px). Below that, the image is stacked above the text.
> * **Maximum number of sub-subcategories**: maximum number of sub-subcategories per card (default: `5`). If exceeded, a trailing **"..."** link is displayed that links to the respective category.
> * **Border radius** (default: `6px`)
> * Only in the "Cards" layout type: card **background colour**, **shadow** and **shadow on hover**.
>
> **Image**
>
> * **Object position** (default: centered)
> * **Minimum height (stacked)** (default: `160px`)
> * **Minimum height (side-by-side)** (default: `320px`)
> * **Show image on mobile devices** (< 576px, default: disabled)

### Grid

In the "Grid" tab you can configure the number of columns in different viewports.

> **Columns**
>
> In the "Columns" section you can set the number of columns per viewport:
>
> * **XS** (default: 12 = 1 column)
> * **SM** (default: 6 = 2 columns)
> * **MD** (default: 6 = 2 columns)
> * **LG** (default: 4 = 3 columns)
> * **XL** (default: 3 = 4 columns)
> * **XXL** (default: 3 = 4 columns)

### SEO & Pagespeed

In the "SEO & Pagespeed" tab you configure the **lazy loading** of the images (default: "Eager").

### Advanced

While you can select every HTML element of our CMS elements via the matching CSS classes, you can add your own CSS classes in the "Advanced" tab if you want to use them.

***

## Add-on

{% content-ref url="/pages/chJfYDax86Pnl6tNMw09" %}
[Nested subcategories](/additional-features/add-ons/nested-subcategories.md)
{% endcontent-ref %}