The navigation automatically displays the subcategories of the current category in small tiles. Name and image are based on the corresponding information in the category management of Shopware.

This CMS extension is made up of various "components":

• Content (Category text and image)

• Theme configuration

The CMS extension "Listing subcategories" is based on the theme extension of the same name. Both extensions are configured via the theme configuration.

In contrast to the theme extension, the CMS extension can be positioned freely and you can overwrite the theme configuration with the configuration of the CMS element. In addition, the CMS extension provides you with additional layouts.

You can configure the ThemeWare® "Listing 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

You have now configured the CMS element.

The texts and images shown were taken from the category management ("Catalogues" => "Categories") of Shopware.

The "Name" and the "Image" (= Display image) of the corresponding categories are displayed. The image is not mandatory.

This CMS extension "Subcategories in Listing" is based on the theme extension of the same name. Both extensions are configured via the theme configuration:

Tab "Extensions" => Block "Listing subcategories (on listing pages)"

The actual configuration of the "Listing subcategories" can be found in the tab 'Extensions' in the ThemeWare® configuration.

In the tab "Layout" you can activate a individual configuration for the element. This allows you to overwrite a few "global" configurations from the theme configuration.

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

In the tab "SEO & Pagespeed" you can configure the "Lazy loading" of the images.

You can select each HTML element of our CMS elements using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.

There are currently 6 different display modes available (see screenshots below):

• Button

• Buttons (Outline)

• Text only

You can find some examples of use in our demo shops:

The ThemeWare® CMS elements for listing pages.

...

Available category elements

• Listing subcategories

• Listing subcategories (Modern)

Kategorie-Elemente können derzeit nur mit dem entsprechenden CMS-Block hinzugefügt werden. Füge den gewünschten Block einfach per Drag’n’Drop deiner Erlebniswelt hinzu.

Mehr Informationen dazu findest du in der folgenden Anleitung:

Note: You can find the category blocks in the "ThemeWare® Listing page" section [Pro]

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.

This navigation automatically displays the subcategories of the current categories in small tiles. Name and image are based on the corresponding information in the category management of Shopware.

This CMS extension is made up of various "components":

• Content (Category text and image)

• Theme configuration

The "Listing subcategories (Modern)" CMS extension is a variant of the "Listing subcategories" theme or CMS extension.

While the "Listing subcategories" extension is based on the look of our ThemeWare® extension for Shopware 5, this "Modern" variant has its own modern look, which is based on the modern teasers from ThemeWare®.

Due to this different look, this CMS extension requires a different configuration and only shares the basic colour configuration (background and border colour of the tiles) with the theme extension (or theme configuration).

You can configure the ThemeWare® "Listing 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

You have now configured the CMS element.

The texts and images shown were taken from the category management ("Catalogues" => "Categories") of Shopware.

The "Name" and the "Image" (= Display image) of the corresponding categories are displayed. The image is not mandatory.

This CMS extension "Subcategories in Listing" is based on the theme extension of the same name. Both extensions are configured via the theme configuration:

Tab "Extensions" => Block "Listing subcategories (on listing pages)"

The actual configuration of the "Listing subcategories" can be found in the tab 'Extensions' in the ThemeWare® configuration.

In the "Content" tab a note is displayed that the data is automatically loaded from the category.

In the "Layout" tab you can configure the navigation.

General

In the "General" section you can configure the alignment (horizontal) and the background colour of the element.

Content - Label

In the "Label" section you can configure the font family, the font weight (currently disabled) and the text transform (currently disabled) of the label. You can also set the text colour and the background colour of the label.

In the "Decoration" area you can configure the drop shadow (currently disabled) and the rounded corners (currently disabled) of the tiles.

Content - Layout

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 can configure the lazy loading of the images (default: "Eager").

You can select each HTML element of our CMS elements using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.