Die ThemeWare® "Text & Bild"-Elemente sind für die Verwendung im ihren CMS-Blöcken vorgesehen. Die Elemente lassen sich daher nicht austauschen oder in anderen Blöcken platzieren.

Verfügbare Banner-Elemente

• Image & text layered

"Text & Bild"-Element hinzufügen

"Text & Bild"-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: Text & images

Note: You can find this blocks in the "ThemeWare® Text & images" section [Pro]

With data mapping you can dynamically populate fields of a CMS element with data from the current page entity (e.g. category). For example, a teaser on a category page automatically displays the category image and category name - without manual input.

How to use

Assign data mapping

1. Open the Shopping Experience of a category page in the CMS editor

2. Add a supported CMS element (e.g. a teaser)

3. In the element configuration, click the "Data mapping" (1) button on the desired field

4. Select the desired entity property (2 – e.g. category.name for the category name)

5. Save the Shopping Experience

The field will now automatically be populated with data from the respective category on each category page.

If data has been assigned, a corresponding note (3) will be displayed in the element configuration instead of the configuration itself. You can remove the assignment at any time by clicking the "Remove data mapping" button (4).

We’ve made data mapping available in as many CMS elements as possible. The only exceptions are elements that already need to be linked and where dynamic data mapping wouldn’t add any value.

There are also a few edge cases — for example teasers with buttons or banners that would generally be expected to link somewhere. In those cases, we’d like to leave a bit of room for your own judgment: not every element has to use data mapping if it simply doesn’t make sense in that particular situation.

• Data mapping only works on pages with an assigned entity (e.g. category or product pages)

• On static Shopping Experiences (e.g. landing pages) no entity is available - the fields remain empty

• Fields with active data mapping cannot be manually populated at the same time

Die ThemeWare® Hero slider elements (slides) sind explizit für die Verwendung im CMS-Block "Hero slider (...)" (siehe Hero slider) vorgesehen. Die Elemente sind nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktionieren nicht in anderen CMS-Blöcken.

Available slider elements

• Call-to-Action slide (Hero slider)

• Text slide (Hero slider)

Füge den CMS-Block des gewünschten Hero-Slider einfach per Drag’n’Drop deiner Erlebniswelt hinzu. Mehr Informationen dazu findest du in der folgenden Anleitung:

Note: You can find the "Hero slider" blocks in the "ThemeWare® General" section [Pro]

Der ThemeWare® Hero-Slider ist mit Elementen befüllt. Du kannst diese gegen austauschen:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren

2. Navigiere mit der Pfeil-Navigation zum gewünschten Element (2)

3. Klicke auf das "Austauschen"-Icon (3) um das CMS-Element zu konfigurieren

Du hast nun das CMS-Element ausgetauscht.

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

Die ThemeWare® CMS-Teaser sind unabhängig von ihrem CMS-Block. Du kannst die Teaser auch in anderen CMS-Blöcken (z.B. den ThemeWare® Spalten-Blöcken) verwenden.

Available teaser elements

• Text teaser

• Text teaser (decorated)

Füge den CMS-Block des gewünschten Teaser-Elementes einfach per Drag’n’Drop deiner Erlebniswelt hinzu.

Mehr Informationen dazu findest du in der folgenden Anleitung:

Note: You can find the teaser blocks in the "ThemeWare® General" section [Pro]

Tausche alternativ ein bestehendes CMS-Element in einem CMS-Block gegen das gewünschte Teaser-Element aus.

Mehr Informationen dazu findest du in der folgenden Anleitung:

The ThemeWare® CMS elements for product pages.

...

Available product elements

• Image gallery (Grid)

• Product description & reviews (Accordion)

Add a product element

Product elements can be added using a corresponding CMS block or by exchanging CMS elements in existing blocks.

You can find more information in the following article:

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

Die ThemeWare® CMS-Banner sind für die Verwendung im ihren CMS-Blöcken vorgesehen. Die Elemente lassen sich daher nicht austauschen oder in anderen Blöcken platzieren.

The ThemeWare® CMS elements for listing pages.

...

Other ThemeWare® CMS elements.

...

The ThemeWare® "Subcategory navigation" is a variant of Shopware's "Category navigation". But in this element only the subcategories of the current category are represented and not all other categories.

The ThemeWare® "Subcategory navigation" currently has no specific configuration.

The ThemeWare® "Subcategory navigation" currently has no specific configuration.

You can find an example of use in our demo shops:

The ThemeWare® CMS elements for the sidebar.

...

Sidebar-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:

The ThemeWare® Category teasers automatically display category data (name and image) from Shopware's category management and link to the respective category. The title can optionally be overridden manually. You can also use the category teasers in other CMS blocks (e.g. the ThemeWare® ).

The ThemeWare® "Sale" CMS elements are intended for use in their CMS blocks. The elements cannot therefore be exchanged or placed in other blocks.

The ThemeWare® "Breadcrumb navigation" is a variant of the "Breadcrumb navigation" from Shopware. However, the element has more configuration options and can be placed as desired.

You can configure the ThemeWare® "Breadcrumb navigation" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"

2. Hover the mouse over the desired CMS element

The ThemeWare® "Text teaser" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Configure element

You can configure the ThemeWare® "Text teaser" 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 configuration of the "Text teaser" is quite self-explanatory. The title and the image are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content

In the section "Content" you can enter the title (2) and a subtitle. The title is a mandatory field.

Image

In the section "Image" you define the background image (1) of the teaser. This is a mandatory field.

Link

In the section "Link" you define the target of the teaser when it is clicked.

In the tab "Layout" you can configure the title (2) and the hover effect of the content and a coloured overlay.

General

In the section "General" you can configure the general background colour (1).

Content

In the "Content" section you can configure the desired text alignment and a text shadow.

Title

In the "Title" section you can configure the font, the font weight, the text formatting and the text colour of the title (2).

Subtitle

In the tab "SEO & Pagespeed" you can configure the HTML tag for the title or subtitle and the "Lazy loading" of the image.

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

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Title - e.g. category name or product name

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

The ThemeWare® "Text teaser (decorated)" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Configure element

You can configure the ThemeWare® "Text teaser (decorated)" 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 configuration of the "Text teaser (decorated)" is quite self-explanatory. The title and the image are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content

In the section "Content" you can enter the title (2). The title is a mandatory field.

Image

In the section "Image" you define the background image (1) of the teaser. This is a mandatory field.

Link

In the section "Link" you define the target of the teaser when it is clicked.

In the tab "Layout" you can configure the title (2) and the hover effect of the content and a coloured overlay.

General

In the section "General" you can configure the general background colour (1).

Content

In the "Content" section you can configure the desired text alignment.

Title

In the section "Title" you can configure the font, the text colour and the background colour of the title (2).

Layout

In the tab "SEO & Pagespeed" you can configure the HTML tag for the title and the "Lazy loading" of the image.

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

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Title - e.g. category name or product name

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

The ThemeWare® "Button teaser" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Configure element

You can configure the ThemeWare® "Button teaser" 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 configuration of the "Button teaser" is quite self-explanatory. The button text and the image are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content

In the section "Content" you can enter the button text (2). The button text is a mandatory field.

Image

In the section "Image" you define the background image (1) of the teaser. This is a mandatory field.

Link

In the section "Link" you define the target of the teaser when it is clicked.

In the tab "Layout" you can configure the button (2) and the hover effect of the content and a coloured overlay.

General

In the section "General" you can configure the general background colour (1).

Button

In the section "Button" you can configure the button style (the colour) and determine whether the button (2) should be filled or displayed as an outline button.

You can also configure the horizontal alignment and vertical alignment of the button in the teaser.

Image

In the section "Image" you can configure the desired horizontal positioning of the image in display mode 'Cover'.

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

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

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

The ThemeWare® "Call-to-Action" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Configure element

You can configure the ThemeWare® "Call-to-Action" 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 configuration of the "Call-to-Action" is quite self-explanatory. The text, the button text and the image are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content

In the section "Content" you can enter the headline (3), the text (4) and the button text (5) for the teaser. The text and the button text are mandatory fields.

Image

In the section "Image" you define the background image (1) of the teaser. This is a mandatory field.

Link

In the section "Link" you define the target of the teaser when it is clicked.

In the tab "Layout" you can configure the overlay (2), the text (3, 4) in the overlay, the hover effect of the content and a coloured overlay.

General

In the section "General" you can configure the general background colour (1).

Content

In the "Content" section you can configure the desired text alignment.

Headline

In the "Headline" section you can configure the font and text colour for the headline (3).

Text

In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline and the "Lazy loading" of the image.

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

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

The ThemeWare® "Hover box" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Configure element

You can configure the ThemeWare® "Hover box" 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 configuration of the "hover box" is quite self-explanatory. The text and the image are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content

In the section "Content" you can enter the headline (3) and the text (4) for the teaser. The text is a mandatory field.

Image

In the section "Image" you define the background image (1) of the teaser. This is a mandatory field.

Link

In the section "Link" you define the target of the teaser when it is clicked.

In the tab "Layout" you can configure the overlay (2), the text (3, 4) in the overlay and the hover effect of the overlay.

General

In the section "General" you can configure the general background colour (1).

Content

In the "Content" section you can select the desired text alignment.

Headline

In the "Headline" section you can configure the font and text colour for both the headline (3).

Text

In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline and the "Lazy loading" of the image.

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

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Headline - e.g. category name or product name

• Text - e.g. category description or product description

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

The ThemeWare® "Hero teaser" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Configure element

You can configure the ThemeWare® "Hero teaser" 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 configuration of the "Hero teaser" is quite self-explanatory. The text, the image and the "Minimum height" are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content

In the section "Content" you can enter the headline (2), the text (3) and the button text (4) for the banner. The text is a mandatory field.

Image

In the section "Image" you define the background image of the banner. The "Minimum height" is a mandatory field (default: 340px).

Link

In the section "Link" you define the target of the banner when it is clicked.

In the "Layout" tab, you can configure the overlay (2), the headline (2), the text (3), the button (4), the scroll behaviour of the image (1), a parallax effect and a coloured overlay (1). You can also configure the alignment of the text content.

General

In the section "General" you can configure the general background colour (1).

Content

In the "Content" section you can configure the desired text alignment.

Headline

In the "Headline" section you can configure the font, the font weight, the text formatting and the text colour of the headline (2).

Text

In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline and the "Lazy loading" of the image.

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

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Headline - e.g. category name or product name

• Text - e.g. category description or product description

The ThemeWare® "Advanced teaser" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Configure element

You can configure the ThemeWare® "Advanced teaser" 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 configuration of the "Advanced teaser" is quite self-explanatory. The image and the "Minimum height" are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content

In the section "Content" you can enter the headline (2), the text (3) and the button text (4) for the teaser.

Image

In the section "Image" you define the background image of the teaser. The "Minimum height" is a mandatory field (default: 340px).

Link

In the section "Link" you define the target of the teaser when it is clicked.

In the "Layout" tab, you can configure the overlay (2), the headline (3), the subheadline (4), the text (5), the two buttons (6+7), the scroll behaviour of the image (1), a parallax effect and a coloured overlay (1). You can also configure the alignment of the text content.

General

In the section "General" you can configure the general background colour (1).

Content

In the "Content" section you can configure the desired text alignment.

Headline

In the "Headline" section you can configure the font, the font weight, the text formatting and the text colour of the headline (3).

Subheadline

In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline, the subheadline and the "Lazy loading" of the image.

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

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Headline - e.g. category name or product name

• Text - e.g. category description or product description

The ThemeWare® "Modern Teaser" is the default teaser of our Modern theme for Shopware 6. It is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Configure element

You can configure the ThemeWare® "Modern teaser" 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 configuration of the "Modern teaser" is quite self-explanatory. The caption and the image are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content (Inhalt)

In the section "Content" you can enter the caption (2) for the teaser. This is a mandatory field.

Image

In the section "Image" you define the background image (1) of the teaser. This is a mandatory field.

Link

In the section "Link" you define the target of the teaser when it is clicked.

In the tab "Layout" you can configure the caption (2).

General

In the section "General" you can configure the general background colour (1).

Caption

In the "Caption" section, the font, font weight, text transform, text colour and background colour of the caption (2) can be configured.

Content overlay

In the section "Content overlay" you can configure the drop shadow and the rounded corners of the content overlay.

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

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

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Title - e.g. category name or product name

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

Der ThemeWare® "Parallax-Banner" wurde in Rahmen eines Verbesserungsvorschlages (Parallax-Effekt für den "Image-Banner") entwickelt. Dieser Parallax-Effekt wird noch deutlicher wenn der Banner ein Text-Overlay hat. Da der "Image-Banner" ganz bewusst auf Text verzichtet, entstand der "Parallax-Banner". Du kannst den Banner optimal als Trennelement in Boxed und Full-width Layouts einsetzen.

Configure element

You can configure the ThemeWare® "Parallax banner" 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 configuration of the "Parallax banner" is quite self-explanatory. The title, the image and the "Minimum height" are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content (Text)

In the section "Text" you can enter the title (2) and a subtitle (3). The title is a mandatory field.

Image

In the section "Image" you define the background image of the banner. The "Minimum height" is a mandatory field (default: 340px).

Beta: You can map the category image in layouts of the type "Listing page".

Link

In the section "Link" you define the target of the banner when it is clicked.

In the "Layout" tab, you can configure the title (2), the subtitle (3), the scroll behaviour of the image (1), a parallax effect and a coloured overlay (1). You can also configure the alignment of the text content.

General

In the section "General" you can configure the general background colour (1), the padding and the border radius.

Content

In the "Content" section you can configure the desired text alignment and a text shadow.

Title

In the "Title" section you can configure the font, the font weight, the text formatting and the text colour of the title (2).

In the tab "SEO & Pagespeed" you can configure the HTML tag for the title and the subtitle.

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

As the name indicates, the parallax banner uses a JavaScript managed parallax effect, which creates a certain sense of depth when scrolling the page

If this banner is used in a Shopping Experience, an additional JavaScript plugin is loaded, which manages the effect.

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Title - e.g. category name or product name

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

The ThemeWare® "Product description & reviews (Accordion)" is a variant of the Shopware element "Product description & reviews". The contents are displayed as an accordion or as a list. You can also show or hide individual sections.

Configure element

You can configure the ThemeWare® "Product description & reviews (Accordion)" 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 configuration of the "Product description & reviews (Accordion)" is fairly self-explanatory. Basically, you only need to show or hide the desired sections.

In the "General" tab you configure the visible sections of the element.

Content

In the "Content" section you can specify which sections are displayed in the element:

• Show "Description" -- Displays the product description (default: show).

• Show "Videos" -- Displays the product videos (currently disabled).

In the "Layout" tab you can configure the display layout of the element.

General

In the "General" section you can select the layout type. Two layouts are available: "Accordion" (default) and "List".

• Aria label

  • twt.cms.productDescriptionReviews.ariaLabel

The ThemeWare® CMS element "Custom code (HTML/CSS/JS)" is a CMS element with which you can add individual HTML, CSS and JS code to your Shopping Experience.

As customised code can create potentially harmful vulnerabilities, this element is aimed at experienced users or experts who are familiar with individual programming. If you are not absolutely sure what you are doing, use the HTML editor of any text element in Shopware 6. This editor will automatically clean up your customised code.

Configure element

You can configure the ThemeWare® CMS element "Custom code (HTML/CSS/JS)" 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 configuration of the CMS element "Custom code" is quite self-explanatory. There are no mandatory fields.

In the tab "HTML" you add your custom HTML code.

Custom HTML code

In the section "Custom HTML code" you can add the desired HTML code.

Twig support

Using the "Allow Twig Variables" option, you can enable support for Twig variables. This allows you to use Twig variables (e.g. {{ page.product.name }} or {{ category.name }}) directly within your HTML code.

The variables used are automatically resolved and replaced with the corresponding content on product pages, category pages, and landing pages.

In the tab "CSS" you can add your custom CSS code. Your CSS code is automatically wrapped in a style tag.

You can of course also integrate your CSS code via the "Custom HTML code" field. The "Custom CSS code" field is mainly for a better overview.

Custom CSS code

In the section "Custom CSS code" you can add the desired CSS code.

In the tab "JavaScript" you can add your custom JavaScript code. The JS code is automatically wrapped in a script tag.

You can of course also integrate your JS code via the "Custom HTML code" field. The "Custom JavaScript code" field is mainly for a better overview.

Custom JavaScript code

In the section "Custom JavaScript code" you can add the desired JavaScript code.

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.

Full Twig support enables access to the complete Twig context (variables, tags, filters, functions). This feature is intended exclusively for experienced developers and agencies. Incorrect Twig code can cause page errors.

Note: This configuration is currently not available. Twig code can lead to errors and, under certain circumstances, introduce significant security risks. We are evaluating whether and in what form this feature may be provided in a future release.

Das ThemeWare® CMS-Element "Image slide (Hero slider)" ist explizit für die Verwendung im CMS-Block "Hero slider (...)" vorgesehen. Das CMS-Element ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktioniert nicht in anderen CMS-Blöcken.

You can configure the ThemeWare® CMS element "Text slide (Hero slider)" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"

The ThemeWare® "Category teaser (Modern)" automatically displays category data (name and image) from Shopware's category management and links to the respective category. It is the simplified modern variant based on the Modern teaser style. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

You can configure the ThemeWare® "Category teaser (Modern)" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"

The ThemeWare® "Discount Banner" is a "Sale" banner element for your Shopping Experience. You can use it to draw attention to special discounts or sales.

You can configure the ThemeWare® "Discount banner" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"

In this section of the documentation you will find all the ThemeWare® CMS elements that you can add to CMS blocks.

ThemeWare® CMS elements

ThemeWare® provides you with an extensive and growing selection of CMS elements to customise your shop. The ThemeWare® CMS elements are available in the Pro Edition from version 0.5.0.

More elements are already in the pipeline and will follow soon. Be curious!

Add ThemeWare® CMS element

To be able to place a CMS element, you need a suitable CMS block in your Shopping Experience. You can then assign a CMS element to this CMS block. You can find out more about this in the section CMS blocks.

Replace ThemeWare® CMS element

1. Move the mouse over the CMS block

2. Click on the "Replace" icon (1)

3. The pop-up "Select element" opens

4. Select the desired CMS element (2)

1. Click on the corresponding CMS block to activate the "edit mode"

2. Hover the mouse over the desired CMS element

3. Click on the "gear" icon (1) to configure the CMS element

Many CMS elements from ThemeWare® have a similar structure. They consist of different "layers".

The bottom layer is often the image or background image (1). A "Coloured overlay" (2) can often be placed on top of this. Another layer above this is the "Content overlay" (3). This is the actual content, i.e. the text or labelling of the element.

There are also similarities in the configuration of CMS elements. Below you will find settings that can be found in many CMS elements:

In many CMS elements, you will find the "SEO & Pagespeed" tab. Here you can define the HTML tag (p, h1, h2, ...) of headlines and use it to optimise the HTML hierarchy of your Shopping Experiences.

In the "Pagespeed" section, you have the option to configure "Lazy loading" for images.

eager – Instructs the browser to prioritise the loading of the image. This should be used for images "above the fold".

lazy – Instructs the browser not to load the image until the user scrolls to it. This should be used for images "below the fold".

Some CMS elements have an "Advanced Mode". This can be activated via a toggle in the element configuration and reveals additional configuration fields that are hidden in the standard mode.

Depending on the element, these may include:

• Padding (inner spacing) of the element

• Border radius of the element

In almost every CMS element you will find the "Advanced" tab. Here you can configure CSS classes and use expert settings.

You can select each HTML element in a CMS element using the appropriate CSS classes. However, if you want to use your own CSS classes, you can insert them in the "Advanced" tab.

In the section "CSS classes", you can add your own CSS classes to various components of a CMS element. Separate multiple CSS classes with a space (blank).

In some CMS elements, you will find the "Expert settings" section in the "Advanced" tab.

These settings are intended for experts who are very familiar with CMS blocks, CMS elements and the Bootstrap grid system!

You can style a specific CMS element individually by assigning it a custom CSS class in the element settings and defining the desired styles in your stylesheet or theme configuration.

Additionally, you can use the automatically generated element ID – especially for CMS elements where assigning a custom CSS class is not possible. This ID is included as a data-cms-element-id attribute in the HTML structure of the storefront:

To target this element via CSS, use an attribute selector like this:

If you want to configure an alternative language in a CMS element, you can simply change the language in the top right corner of the editor of the corresponding Shopping Experience.

Further information and basics about "Shopware 6 Shopping Experiences" and "CMS elements" can be found in the ThemeWare® Knowledge Base:

Der ThemeWare® "Hero-Banner" ist ein Banner-Element für deine Erlebniswelten. Du kannst ihn optimal als Trennelement in Boxed und Full-width Layouts einsetzen.

Configure element

You can configure the ThemeWare® "Hero banner" 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 configuration of the "Hero banner" is quite self-explanatory. The text, the image and the "Minimum height" are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content (Text)

In the section "Text" you can enter the headline (2), the text (3) and the button text (4) for the banner. The text is a mandatory field.

Image

In the section "Image" you define the background image of the banner. The "Minimum height" is a mandatory field (default: 340px).

Beta: You can map the category image in layouts of the type "Listing page".

Link

In the section "Link" you define the target of the banner when it is clicked.

In the "Layout" tab, you can configure the overlay (2), the headline (3), the text (4), the button (5), the scroll behaviour of the image (1), a parallax effect and a coloured overlay (1). You can also configure the alignment of the text content.

General

In the section "General" you can configure the general background colour (1), the padding and the border radius.

Content

In the "Content" section you can configure the desired text alignment and a text shadow.

Headline

In the "Headline" section you can configure the font, the font weight, the text formatting and the text colour of the headline (3).

In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline.

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

By being able to fix the image (= background image) you can achieve a simple parallax effect, which creates a certain sense of depth when scrolling the page

In addition, you can activate a JavaScript managed parallax effect. This effect is available when the background image is fixed.

If a CMS element with an activated parallax effect is used in a Shopping Experience, an additional JavaScript plugin is loaded which manages the effect.

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Headline - e.g. category name or product name

• Text - e.g. category description or product description

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

The ThemeWare® "Image banner" is a banner element for your Shopping Experience. You can use it perfectly as a separator in boxed and full-width layouts.

Configure element

You can configure the ThemeWare® "Image banner" 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 configuration of the "Image banner" is quite self-explanatory. The image and the "Minimum height" are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Image

In the section "Image" you define the background image of the banner. The "Minimum height" is a mandatory field (default: 340px).

Beta: You can map the category image in layouts of the type "Listing page".

Link

In the section "Link" you define the target of the banner when it is clicked.

In the "Layout" tab, you can configure the scrolling behaviour of the image (1), a parallax effect and a coloured overlay (1).

General

In the section "General" you can configure the general background colour (1) and the border radius.

Image

In the section "Image" you can configure the attachment of the image and specify whether a JavaScript managed parallax effect should be applied.

Coloured overlay

In the section "Coloured overlay" a coloured overlay (1) can be activated and configured.

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

By being able to fix the image (= background image) you can achieve a simple parallax effect, which creates a certain sense of depth when scrolling the page

In addition, you can activate a JavaScript managed parallax effect. This effect is available when the background image is fixed.

If a CMS element with an activated parallax effect is used in a Shopping Experience, an additional JavaScript plugin is loaded which manages the effect.

On category and product pages, the following field can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

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

The ThemeWare® "Category teaser (Advanced)" automatically displays category data (name and image) from Shopware's category management and links to the respective category. It is the extended variant with a content overlay and more styling options. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Configure element

You can configure the ThemeWare® "Category teaser (Advanced)" 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 configuration of the "Category teaser (Advanced)" is quite self-explanatory. The category is a mandatory field. The category data (name and image) is displayed automatically. Optionally, you can manually override the title and the image.

In the tab "General" you configure the content of the element.

Category

In the section "Category" you select the desired category. The name (2) and image (1) of the category are automatically displayed in the teaser. The link automatically points to the selected category.

Content

In the section "Content" you can enter the title (optional), the subtitle, the badge text (3) and the CTA text. If the title is left empty, the name of the selected category is displayed automatically.

Image

In the section "Image" you can optionally set a custom image to be displayed instead of the category image. You also configure the display mode (Cover/Contain/Stretch), the minimum height (default: 340px

In the tab "Layout" you can configure the padding, the border radius, the background colour, the badge, the title, the subtitle, the CTA, the content overlay, image effects, hover effects and a coloured overlay.

General

In the section "General" you can configure the padding, the border radius and the general background colour.

Badge

In the section "Badge" you can configure the badge style, the badge colours and the badge position.

Title

In the section "Title" you can configure the font, the font weight, the text transform and the text colour of the title.

In the tab "SEO & Pagespeed" you can configure the HTML tag and the HTML tag class.

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

Fields are available for CSS classes of the element, the title, the subtitle, the badge and the CTA.

The ThemeWare® "Image & text layered" element displays an image with a text box layered on top. The element is explicitly intended for use in its own CMS block.

Configure element

You can configure the ThemeWare® "Image & text layered" element 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 configuration of the "Image & text layered" element is fairly self-explanatory. The headline, the text and the image are mandatory fields. Strictly speaking, you do not need to configure anything else.

In the "General" tab you configure the content of the element.

Content

In the "Content" section you can enter the headline and the text for the element. The text is a mandatory field.

Image

In the "Image" section you define the image of the element. The image is a mandatory field. You can also configure the display mode and the minimum height (default: 340px, only visible in "Cover" mode).

Accessibility

In the "Accessibility" section you can enter the alt text for the image and specify whether the image should be marked as decorative.

In the "Layout" tab you can configure the appearance of the element.

General

In the "General" section you can configure the layout type ("Standard" or "Within"), the arrangement ("Standard" or "Reversed") and the background colour.

Content

In the "Content" section you can configure the text alignment.

Headline

In the "Headline" section you can configure the font family and the text colour of the headline.

Text

In the "SEO & Pagespeed" tab you can configure the HTML tag and the HTML tag class for the headline as well as the fetch priority and lazy loading of the image.

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. Separate fields are available for the CSS class of the element, the headline and the text.

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Headline - e.g. category name or product name

• Text - e.g. category description or product description

Der ThemeWare® "Advanced-Banner" ist ein Banner-Element für deine Erlebniswelten. Du kannst ihn optimal als Trennelement in Boxed und Full-width Layouts einsetzen.

Configure element

You can configure the ThemeWare® "Advanced banner" 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 configuration of the "Advanced banner" is quite self-explanatory. The image and the "Minimum height" are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Content (Text)

In the section "Text" you can enter the headline (2), the text (3) and the button text (4) for the banner. The text is a mandatory field.

Image

In the section "Image" you define the background image of the banner. The "Minimum height" is a mandatory field (default: 340px).

Beta: You can map the category image in layouts of the type "Listing page".

Link

In the section "Link" you define the target of the banner when it is clicked.

In the "Layout" tab, you can configure the overlay (2), the headline (3), the subheadline (4), the text (5), the buttons (6+7), the scroll behaviour of the image (1), a parallax effect and a coloured overlay (1). You can also configure the alignment of the text content.

General

In the section "General" you can configure the general background colour (1), the padding and the border radius.

Content

In the "Content" section you can configure the desired text alignment and a text shadow.

Headline

In the "Headline" section you can configure the font, the font weight, the text formatting and the text colour of the headline (3).

In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline and the subheadline.

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

By being able to fix the image (= background image) you can achieve a simple parallax effect, which creates a certain sense of depth when scrolling the page

In addition, you can activate a JavaScript managed parallax effect. This effect is available when the background image is fixed.

If a CMS element with an activated parallax effect is used in a Shopping Experience, an additional JavaScript plugin is loaded which manages the effect.

On category and product pages, the following fields can be dynamically mapped from the current category or product:

• Image - e.g. category image or product image

• Headline - e.g. category name or product name

• Text - e.g. category description or product description

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.

The ThemeWare® "Hero countdown" is a "Sale" banner that consists of two elements:

1. Hero countdown (Heading)

2. Countdown banner

This article refers to the element "Hero Countdown (Heading)". For more information on the element "Countdown banner", please see the following article: Countdown banner.

You can configure the ThemeWare® "Hero countdown (Heading)" 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 configuration for the "Hero countdown (Heading)" is quite self-explanatory. The headline and the image are mandatory fields. That's all you really need to configure.

In the tab "General" you configure the content of the element.

Text

In the section "Text" you enter the desired heading. The heading is a mandatory field

Image

In the section "Image" you define the background image of the banner. The image is a mandatory field. Additionally, you can configure the minimum height (mandatory field) and the display mode (cover/contain).

In the tab "Layout" you have various design options for the text and a coloured overlay.

Text

In the section "Text" you can configure the font and text colour for the headline. Additionally, you can configure the maximum width of the heading.

Coloured overlay

In the section "Coloured overlay" a coloured overlay can be activated and configured.

In the tab "SEO & Pagespeed" you can configure the HTML tag for the heading as well as the "Lazy Loading" of the image.

You can select any HTML element of our banners using appropriate CSS classes. If you would like to use your own CSS classes, you can add them in the tab "Advanced".

As you can see from the preview graphic of the "Hero countdown (Heading)", it makes sense to leave some "space" for the text in order to make it easier to read.

The ThemeWare® "Category teaser" automatically displays category data (name and image) from Shopware's category management and links to the respective category. It is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

The category teaser uses the caption bar style (like the regular teaser).

Configure element

You can configure the ThemeWare® "Category teaser" 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 configuration of the "Category teaser" is quite self-explanatory. The category is a mandatory field. The category data (name and image) is displayed automatically. Optionally, you can manually override the title and the image.

In the tab "General" you configure the content of the element.

Category

In the section "Category" you select the desired category. The name (2) and image (1) of the category are automatically displayed in the teaser. The link automatically points to the selected category.

Content

In the section "Content" you can enter the title (optional), the badge text (3) and the CTA text (optional). If the title is left empty, the name of the selected category is displayed automatically. The CTA text uses a default snippet if no text is entered.

Image

In the section "Image" you can optionally set a custom image to be displayed instead of the category image. You also configure the display mode (Cover/Contain/Stretch), the minimum height (default: 340px

In the tab "Layout" you can configure the padding, the border radius, the background colour, the text alignment, the icon, the badge, the title, the CTA, the caption bar, image effects, hover effects and a coloured overlay.

General

In the section "General" you can configure the padding, the border radius and the general background colour.

Text alignment

In the section "Text alignment" you can select the desired text alignment.

Icon

In the section "Icon" you can configure the arrow icon in the caption bar.

Badge

In the tab "SEO & Pagespeed" you can configure the HTML tag, the HTML tag class, the fetch priority and the lazy loading of the image.

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

Fields are available for CSS classes of the element, the badge and the caption. Additionally, an element ID can be assigned.

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.

The ThemeWare® "Image gallery (Grid)" is a variant of the "Image gallery" from Shopware. In this element, the product images are displayed in a grid or one below the other (as a scroller).

Add element (replacing the "Image gallery" element)

You can use the ThemeWare® "Image gallery (Grid)" by replacing an existing "Image gallery":

1. Move the mouse over the CMS block (1)

2. Click on the "Replace" icon (2)

3. The pop-up "Select element" opens

4. Select the desired CMS element (3)

You can configure the ThemeWare® "Image gallery (Grid)" 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 configuration of the "Image gallery (Grid)" is fairly self-explanatory. The gallery images are a mandatory field. Strictly speaking, you do not need to configure anything else.

In the "General" tab you configure the images and the display of the gallery.

Gallery

In the "Gallery" section you select the images to be displayed in the gallery. This is a mandatory field. You can also configure the display mode, the minimum height (default: 430px, for the mobile gallery slider), the minimum height (>=992px) (for the grid from desktop) and the vertical alignment.

In the "Layout" tab you configure the grid layout and the gallery navigation.

General

In the "General" section you can select the layout type. Three layouts are available: "Images stacked", "Images stacked (1x 100%, rest 50%)" and "Images stacked (all 50%)".

Gallery slider

In the "Gallery slider" section you can configure the arrow navigation, the dot navigation and the preview navigation of the mobile gallery slider.

Gallery grid (>=992px)

In the "Gallery grid" section you can show or hide the preview navigation of the gallery grid (from desktop). You can also activate the fullscreen gallery.

The ThemeWare® CMS element "Call-to-Action slide (Hero slider)" is explicitly intended for use in the CMS block "Hero slider (...)". The CMS element is not designed for use in other CMS blocks and does not work in other CMS blocks.

You can configure the ThemeWare® CMS element "Call-to-Action slide (Hero slider)" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"

The ThemeWare® "Round teaser" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

You can configure the ThemeWare® "Round teaser" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"

The ThemeWare® "Classic Teaser" is a teaser with designs from our themes for Shopware 5. It is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

You can configure the ThemeWare® "Classic teaser" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"

The ThemeWare® "Countdown banner (compact)" is a "Sale" banner element for your Shopping Experiences.

The compact "Countdown banner" has two phases:

1. Pre-sale phase

2. Sale phase

The ThemeWare® "Image teaser" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

You can configure the ThemeWare® "Image teaser" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"

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

The ThemeWare® "Testimonial (Customer review)" element is a CMS element to show customer reviews in your Shopping Experiences. You can use the element in different CMS blocks (e.g. the ThemeWare® "").

You can configure the ThemeWare® "Testimonial" element as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"