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.

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 "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.

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.

The configuration is split into several tabs.

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.

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.

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)

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

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.