You can find more information about the CMS element here:

Der ThemeWare® CMS-Block "Unterkategorie-Navigation (Sidebar)" ist eine Variante vom Shopware CMS-Block "Kategorie-Navigation".

Der CMS-Block hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

Further information

You can find more information about the CMS element here:

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]

Die ThemeWare® "Text & Bild"-Blöcke selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

Available blocks

• Image & text layered

Add block

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

Hinweis: "Text & Bild"-Blöcke findest du in der Rubrik "ThemeWare® Text & Bild" [Pro]

You can find more information about the CMS element here:

Other ThemeWare® CMS blocks.

...

Available blocks

• Breadcrumb navigation

• Testimonial (Customer review)

With ThemeWare® 0.5.0 we have released our major CMS update and with it our first ThemeWare® CMS extensions. All CMS extensions were selected and developed with a focus on sales promotion and customisability. The many layout options speak for themselves.

We have put an huge amount of passion into every single CMS extension and are really proud of them. We are therefore particularly pleased about the positive feedback. Thank you very much!

From a technical point of view, there are unfortunately a few technical limitations on the part of Shopware at the moment, but Shopware is already working on fundamental improvements - also with regard to the possibility of being able to provide CMS extensions in the Shopware 6 Cloud.

As soon as it is possible, we will revise our CMS extensions and make them available in the cloud edition as well. Unfortunately, we cannot say when this will be the case at the moment.

We continue to work continuously on new CMS extensions and on improvements to existing CMS extensions. So you can look forward to much more.

Der ThemeWare® CMS-Block "Hero-Slider (2x)" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.

Der "Hero-Slider (2x)" bietet dir die Möglichkeit 2 Slides zu nutzen – nicht mehr und nicht weniger.

Die ThemeWare® Banner-Blöcke selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

• Image-Banner

• Parallax-Banner

Der ThemeWare® CMS-Block "Hero-Slider (3x)" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.

Der "Hero-Slider (3x)" bietet dir die Möglichkeit 3 Slides zu nutzen – nicht mehr und nicht weniger.

Der ThemeWare® CMS-Block "Zwei Spalten" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Zwei Spalten, 7-5" (ca. 58.333% | ca. 41.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Zwei Spalten, 5-7" (ca. 41.667% | ca. 58.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Zwei Spalten, 4-8" (ca. 33.333% | ca. 66.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Hero-Slider (4x)" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.

Der "Hero-Slider (4x)" bietet dir die Möglichkeit 4 Slides zu nutzen – nicht mehr und nicht weniger.

Der ThemeWare® CMS-Block "Zwei Spalten (auf Handys getauscht)" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

Der CMS-Block "Zwei Spalten (auf Handys getauscht)" ist eine Variante vom CMS-Block "Zwei Spalten" (siehe ). Hier unterscheidet sich lediglich die Anordnung der beiden Spalten in mobilen Viewports. In dieser Variante wird die zweite Spalte oberhalb der ersten Spalte angeordnet und nicht darunter.

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

Der ThemeWare® CMS-Block "Zwei Spalten, 9-3" (75% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Zwei Spalten, 3-9" (25% | 75%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

In this section you will find everything about the ThemeWare® CMS blocks which you can select in the "Block categories" and add to your Shopping Experiences.

With ThemeWare® you get an extensive and growing selection of CMS blocks to customize your shop. The ThemeWare® CMS blocks are available from version 0.5.0 in the Pro Edition and some of them in the Cloud Edition.

More CMS blocks are in the pipeline for both the Pro Edition and the Cloud Edition and will follow with upcoming updates. Be curious!

1. Click on the plus icon to select a CMS block.

Der ThemeWare® CMS-Block "Eine Spalte" (100%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Zwei Spalten, 8-4" (ca. 66.667% | ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Drei Spalten" (jeweils ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Drei Spalten, 2-2-8" (ca. 16.667% | ca. 16.667% | ca. 66.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Drei Spalten, 2-8-2" (ca. 16.667% | ca. 66.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Drei Spalten, 3-3-6" (50% | 25% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Drei Spalten, 3-6-3" (25% | 50% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Drei Spalten, 6-3-3" (50% | 25% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Drei Spalten, 8-2-2" (ca. 66.667% | ca. 16.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Vier Spalten" (jeweils 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Fünf Spalten" (jeweils 20%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Sechs Spalten" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

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

Der ThemeWare® CMS-Block "Six columns (Custom)" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

This block can consider the expert configuration "CSS class (Column)" of certain CMS elements.

You can find more information about the CSS classes: in the ThemeWare® Knowledge Base:

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

Will follow...

Der ThemeWare® CMS-Block "Grid 'Modern'" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

• Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".

• Die kleinen Bild-Elemente haben eine minimale Höhe von 300 px.

Der ThemeWare® CMS-Block "Grid 'Modern '(getauscht)" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

• Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".

• Die kleinen Bild-Elemente haben eine minimale Höhe von 300 px.

Der ThemeWare® CMS-Block "Grid 'One'" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

• Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".

• Die kleinen Bild-Elemente haben eine minimale Höhe von 320 px.

Der ThemeWare® CMS-Block "Grid 'One' (getauscht)" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

• Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".

• Die kleinen Bild-Elemente haben eine minimale Höhe von 320 px.

Die ThemeWare® CMS-Blöcke für Kategorieseiten selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

• Listing subcategories

• Listing subcategories (Modern)

Die ThemeWare® Kategorie-Teaser-Blöcke haben keine spezielle Funktion und dienen lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

Du musst diese CMS-Blöcke nicht unbedingt nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

• Kategorie-Teaser

• Kategorie-Teaser (Advanced)

The ThemeWare® CMS blocks for product pages do not have any special features. However, you can use them to place the corresponding CMS elements in your Shopping Experience.

Der ThemeWare® CMS-Block "Produktname (ohne Hersteller-Logo)" ist eine Variante vom Shopware CMS-Block "Produktname & Hersteller-Logo" nur ohne Hersteller-Logo.

Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.

Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.

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

Der ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname)" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen über der Buybox dar.

Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.

Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.

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

The ThemeWare® CMS blocks for the sidebar.

...

Select a CMS block and simply drag and drop it into the sidebar section of your Shopping Experience.

Hinweis

The ThemeWare® "Sale" CMS blocks themselves have no special features. However, you must use them to place the corresponding CMS elements in your Shopping Experience.

Der ThemeWare® CMS-Block "Hero countdown" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

Der CMS-Block "Hero-Countdown" besteht aus zwei CMS-Elementen:

Der ThemeWare® CMS-Block "Countdown banner" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

...

You can find more information about the CMS element here:

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

Demo to follow...

Der ThemeWare® CMS-Block "Countdown banner (compact)" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

...

You can find more information about the CMS element here:

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

Demo to follow...

Der ThemeWare® CMS-Block "Discount banner" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

...

You can find more information about the CMS element here:

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

Demo to follow...

Der ThemeWare® CMS-Block "Breadcrumb-Navigation" ist eine Variante vom Shopware CMS-Block "Breadcrumb-Navigation".

Der CMS-Block hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

You can find more information about the CMS element here:

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]

Der ThemeWare® CMS-Block "Testimonial (Kundenrezension)" hat keine spezielle Funktion und dient lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

Du musst diesen CMS-Block nicht unbedingt nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

You can find more information about the CMS element here:

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]

Der ThemeWare® CMS-Block "Testimonials (Vier Spalten)" hat keine spezielle Funktion. Der Block symbolisiert die Flexibilität des CMS-Elementes "Testimonial (Kundenrezension)", welches in verschiedenen (Spalten-) Blöcken genutzt werden kann.

You can find more information about the CMS element here:

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]

Der ThemeWare® CMS-Block "Individueller Code (HTML/CSS/JS)" hat keine spezielle Funktion und dient lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

Du musst diesen CMS-Block nicht unbedingt nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

You can find more information about the CMS element here:

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [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® 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® ).

Die ThemeWare® "Hero-Slider"-Blöcke sind CMS-Blöcke die mit den entsprechenden Slider CMS-Elementen befüllt werden müssen. Andere CMS-Elemente funktionieren nicht im Hero-Slider.

Die Slider-Blöcke haben daher spezielle CMS-Elemente.

Available "Hero slider" blocks

• Hero slider (2x)

• Hero slider (3x)

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

Hinweis: Den "Hero-Slider" findest du in der Rubrik "ThemeWare® Allgemein" [Pro]

The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can enable this feature via the theme configuration.

In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.

Da der ThemeWare® "Hero-Slider" (ab ThemeWare® 2.0) auf dem Bootstrap 5 Carousel () basiert, sind folgende CSS-Klassen besonders interessant:

Füge die CSS-Klasse carousel-fade dem Block hinzu, um Slides mit einem Fade-Übergang anstelle eines Slides zu animieren.

Füge die CSS-Klasse carousel-dark dem Block hinzu, um Steuerelemente dunkler zu gestalten.

The controls of the "Hero Slider" have a drop shadow for optimal visibility. This is especially helpful if the colour of the images in the slider varies significantly. If you don't want the drop shadows, simply add the CSS class flat-controls to the corresponding block.

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

Die ThemeWare® Teaser-Blöcke haben keine spezielle Funktion und dienen lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

Du musst diese CMS-Blöcke nicht unbedingt nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

Available teaser blocks

• Text-Teaser

• Text-Teaser (verziert)

• Button-Teaser

• Call-to-Action

• Hover-Box

• Image-Teaser

• Hero-Teaser

• Advanced-Teaser

• Classic-Teaser

• Modern-Teaser

• Runder Teaser

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

Hinweis: Teaser-Blöcke findest du in der Rubrik "ThemeWare® Allgemein" [Pro]

In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.

Für die ThemeWare® Teaser-Blöcke sind folgende CSS-Klassen besonders interessant:

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

Der ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname & Hersteller-Logo)" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen samt Hersteller-Logo über der Buybox dar.

Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.

Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.

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

The ThemeWare® CMS elements for product pages.

...

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

ThemeWare® extends selected CMS blocks with a block configuration in the CMS sidebar (2). The block configuration allows you to control the responsive behaviour of your CMS blocks conveniently - without having to enter CSS classes manually.

The configuration is divided into two areas: the Responsive block layout (3 – gutter and alignment) and the Responsive column layout (4 – column arrangement, visibility and expert mode).

Responsive block layout

In the "Responsive block layout" (3) section you configure the gutter and the alignment of the columns within the block.

Gutter

Sets the horizontal and vertical gap between the columns. You can choose from various predefined spacing values or "Default".

Alignment

Select the horizontal alignment of the columns within the row:

• Default (left) - Default alignment

• Center - Columns are centered

• Right - Columns are right-aligned

With the "Advanced configuration" toggle you can configure gutter and alignment individually for each viewport. The following viewports are available:

• Desktop Large (≥1200px)

• Desktop (≥992px)

• Tablet (≥768px)

In the "Responsive column layout" (4) section you configure the column arrangement and visibility of the individual columns.

Column arrangement

Sets how many columns are displayed side by side instead of stacked in a specific viewport. For example, you can reduce three columns to two on a tablet.

Visibility

Controls whether a column is visible or hidden in a specific viewport.

Asymmetric from

Only available for asymmetric column blocks (e.g. Two columns 3-9, Three columns 3-3-6). Sets from which viewport the columns are displayed in the predefined asymmetric layout of the block. Below this viewport the columns are arranged equally or stacked.

Expert mode

Allows manual CSS class input per column (e.g. col-12 col-md-6

With the "Advanced configuration" toggle you can set column arrangement and visibility individually for each viewport.

Not all CMS blocks support all areas of the block configuration. The following overview shows which block types offer which configuration areas:

Symmetric column blocks such as "Two columns", "Three columns", "Four columns" and "Six columns" support:

• Responsive block layout (gutter + alignment)

• Responsive column layout (column arrangement + visibility)

Asymmetric column blocks such as "Two columns 3-9", "Two columns 4-8", "Three columns 3-3-6" etc. support:

• Responsive block layout (gutter + alignment)

• Responsive column layout (column arrangement + visibility + asymmetric from)

Grid blocks such as "Grid One", "Grid Two", "Grid Modern" etc. support:

• Responsive block layout (gutter only, no alignment)

The "One column" block supports:

• Responsive column layout (column arrangement + visibility, no gutter, no alignment)

Die ThemeWare® Grid-Blöcke sind universelle CMS-Blöcke. In diesen Blöcken kannst du verschiedene CMS-Elemente platzieren.

Die Grid-Blöcke haben daher keine speziellen CMS-Elemente.

Available grid blocks

• Grid 'Modern'

• Grid 'Modern' (swapped)

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

Hinweis: Spalten-Blöcke findest du in der Rubrik "ThemeWare® Grids" [Pro]

Aufgrund des fluiden Webdesigns von Shopware 6 gibt es keine "perfekte" oder "richtige" Bildgröße. Die Größe der einzelnen Elemente ist variabel und abhängig vom verfügbaren Platz den die Elemente haben. Der verfügbare Platz unterliegt diversen Faktoren wie dem konfigurierbaren Padding des Blocks, der konfigurierbaren Container-Breite, dem Darstellungsmodus der Erlebniswelt und natürlich durch die Fensterbreite selbst in verschiedenen Viewports bestimmt. Dadurch kann es nicht den einen Wert geben.

Wir empfehlen daher für Bild-Elemente in Grid-Blöcken den Darstellungsmodus "Füllen". Dabei wird das Bild so skaliert und ggf. abgeschnitten, dass der Bild-Container immer vollständig ausgefüllt ist. Die Größe der Elemente selber kannst du über die Konfiguration "Minimale Höhe" definieren, mehr Informationen dazu findest du im folgenden Abschnitt.

Als Bild-Elemente kannst du die Teaser von ThemeWare® in den Grids nutzen. (Das Bild-Element von Shopware funktioniert ebenfalls.)

Die Größe der Elemente definierst du über die Konfiguration "Minimale Höhe" im Modus "Füllen" der entsprechenden Elemente. Damit Grids gut funktionieren ist hier etwas Mathematik nötig: Die "Minimale Höhe" der Elemente auf der linken Seite sollte in Summe dieselbe Höhe haben wie die Summe der "Minimale Höhe" aller Elemente auf der rechten Seite. Addiere etwaige Lücken (Standard: 40px) zwischen den Elementen noch dazu.

In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.

Für die ThemeWare® Grid-Blöcke sind folgende CSS-Klassen für die Abstände der Elemente im Block interessant:

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

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

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

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:

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:

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

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.

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]

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