In this section you will learn which elements - depending on the configuration - are displayed in the Shopware Storefront so that you can find the corresponding configurations in the theme configuration more quickly.

When searching for configuration fields, you can use our ThemeWare® Config Finder even more easily. We also recommend our ThemeWare® Lexicon in the ThemeWare® Knowledge Base.

Overview

• Header

• Footer

The Add-ons tab in the ThemeWare® Hub lists all available extensions for your ThemeWare® theme. Each add-on can be unlocked individually and managed independently of the others.

For a detailed description of each add-on, see the Add-ons overview.

Why add-ons?

We deliberately keep the theme price stable and continuously develop the theme with new features. Functionality that goes clearly beyond the classic theme scope is offered as optional add-ons — that way you can unlock them when you need them, and the choice stays yours without all buyers having to pay for the extended scope.

Unlock an add-on

1. Find the desired add-on in the Add-ons tab.

2. Click "Unlock →" — Shopware's purchase modal opens.

   • Please note: You must have activated the "Shopware Extension Store" and linked your shop to your Shopware account in order to make in-app purchases.

3. Confirm the purchase in the modal.

After a successful purchase the add-on is active immediately.

For details on available add-ons, the purchase model and billing, see the .

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

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

Available column blocks

• One column

• Two columns

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® Spalten" [Pro] bzw. in der Rubrik "Text & Bild" [Cloud]

Die ThemeWare® Spalten-Blöcke sind mit Platzhalter-Elementen befüllt. Du kannst diese Elemente durch beliebige CMS-Elemente austauschen:

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

2. Klicke auf das gewünschte Platzhalter-Element (2) um ein neues CMS-Element auszuwählen

3. Es öffnet sich das Pop-up "Element auswählen"

4. Wähle das gewünschte CMS-Element aus (3)

Du hast nun das CMS-Element ausgetauscht.

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 Spalten-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. Alternativ funktioniert auch der Darstellungsmodus "Strecken" recht gut, wenn alle Bilder einer Spalte die selbe Größe/Proportion haben.

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

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

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

1. ThemeWare® USP Bar

2. ThemeWare® Announcement Banner

3. Shop logo

4. Search

5. Action buttons (Wishlist, "My Account", Shopping cart)

6. Top bar (Language selection, Currency selection, Service menu)

7. Top navigation

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.

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:

The Backup tab gives you an overview of all themes in your ThemeWare® family (base theme + duplicates) – including the sales channel assignment, a direct jump into the configuration and, of course, backing up the theme configuration.

Overview & configure

Each theme row shows which sales channel the theme is assigned to (or that it isn't assigned yet). Via "Configure" you jump straight into the Theme-Manager for that specific theme – for duplicates that means precisely the theme that is live on the respective sales channel.

Create a backup

With the practical "Copy" function you back up a theme's configuration with a single click and make manual backups much easier. Expand, copy the JSON, done.

Step by step:

1. Find the relevant theme in the backup tab.

2. Expand the theme section.

3. Click "Copy".

   • The theme configuration is now in the clipboard.

4. Paste it into a TXT file and save it.

For details on the Backup Manager's features and pricing, see the Add-ons overview.

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

Standard-Einstellungen

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

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

• Die beiden großen Bild-Element haben eine minimale Höhe von 640 px.

• Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.

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

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

From a modern all-rounder to a dark outdoor look — give your shop a completely new character with just one click. Five variants are bundled with the theme; ten more designs can be unlocked as a monthly add-on. Includes card, boxed and clean layouts, light and dark themes.

Ten additional design variants, individually unlockable.

Five variants are bundled with the theme at no extra cost.

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)

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

Standard-Einstellungen

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

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

• Die beiden großen Bild-Element haben eine minimale Höhe von 640 px.

• Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.

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.

Example

Demo

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.

Example

Demo

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

The ThemeWare® Dashboard gives you all important information, setup guides, and quick access links at a glance.

The tile bar takes you straight to the most important areas and resources:

• Knowledge base — guides, tutorials and expert knowledge

• ThemeWare® Utilities — free extras (opens the )

Nested subcategories is a CMS element for category and landing pages. It displays multiple subcategories together with their direct sub-subcategories – either in a card or clean layout.

You can find the detailed description with all configuration options in the CMS section:

You can find more information about the CMS element here:

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.

Example

Demo

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

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.

Example

Demo

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

Demo to follow...

Other ThemeWare® CMS blocks.

...

Available blocks

• Breadcrumb navigation

• Testimonial (Customer review)

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

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:

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)

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

The Support tab bundles every route to help, guides and contact — from self-service to personal support.

Click "Start chat" to open our support chat right inside the Hub and get answers to your questions without any wait.

Cards with the most important self-service resources:

• Knowledge base — tutorials, tips & expert knowledge

• Manual — features & configurations

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

• Hero-Banner

You can find more information about the CMS element here:

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.

Example

Demo

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.

Available CMS elements

• Call-to-Action slide (Hero slider)

• Text slide (Hero slider)

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

The ThemeWare® theme configuration holds more than a thousand configuration fields. The Config Finder makes sure you still end up at the right setting within seconds.

It is available in three places:

• In the theme manager — filters the configuration live while you type

• In the admin search bar — finds configuration fields from anywhere in the administration

1. (CMS layout with sidebar)

2. Listing (CMS block "Three columns, product boxes" from Shopware)

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.

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

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

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

Eine Anwendungsbeispiel findest du in unseren Demoshops:

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.

Configure element

You can configure the ThemeWare® "Image 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 "Image teaser" is quite self-explanatory. The image is a mandatory field. 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 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 image and a coloured overlay.

General

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

Image

In the "Image" section, an image effect (see ) can be selected and it can be determined when the image effect (if the teaser has been linked) should be applied.

You can also configure the desired horizontal positioning of the image in display mode 'Cover'.

Coloured overlay

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

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.

There are currently 7 different image effects (see screenshots below) available:

• Blur

• Brightness

• Contrast

• Grayscale

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

Hover

In the section "Hover" you can select a

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:

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

Example

Demo

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

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.

Available CMS elements

• Call-to-Action slide (Hero slider)

• Text slide (Hero slider)

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

1. ThemeWare® USP Bar

2. ThemeWare® Upper section

3. ThemeWare® Main section

4. ThemeWare® Lower section

5. Logos footer

6. Copyright footer

7. "Scroll-Up" button

Footer elements are "slots" in the columns of the footer areas. You can fill these footer elements with ThemeWare® widgets.

1. ThemeWare® "Newsletter" widget

2. Service hotline

3. Footer navigation

4. ThemeWare® "Benefits" widget

Welcome to the ThemeWare® Manual and thank you for choosing ThemeWare®!

The ThemeWare® documentation for Shopware 6 is based on 3 "pillars":

1. The Service Portal

   • The Service Portal is always the first place to go for all your ThemeWare® needs. It is your personal dashboard for ThemeWare®.

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

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.

ThemeWare® CMS blocks

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!

Add a ThemeWare® CMS block

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

2. Select the desired CMS block in the "Block category" dropdown.

3. Drag'n'drop the CMS block into your Shopping Experience.

In the ThemeWare® Pro Edition, the ThemeWare® CMS blocks have their own categories and are structured according to the following pattern:

• ThemeWare® General

  • Contains basic design blocks such as sliders, teasers and banners.

• ThemeWare® Columns

In the ThemeWare® Cloud Edition you will find the ThemeWare® CMS blocks in the default Shopware categories (see "Text & Images").

The CMS blocks in Shopware 6 have different configuration fields. In the section "Layout", for example, you will find the option to add "CSS classes" and to define the padding of the block.

In the block settings you also have the option of defining CSS classes for the corresponding CMS block. ThemeWare® offers you a number of CSS classes that you can use in your Shopping Experiences.

For all CMS blocks the following CSS classes are interesting:

You can find more classes in the following section "Tutorials" > "Shopping Experiences":

In addition, you can also use CSS classes: from , since the storefront in Shopware 6 is based on Bootstrap 5.

You can style a specific CMS block using CSS by assigning a custom CSS class in the block settings and defining the desired styles either in your stylesheet or within your theme configuration.

You can replace the CMS elements in most CMS blocks. You can learn more about this in the article .

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

1. Breadcrumb

2. CMS block "Product name & manufacturer logo" from Shopware

3. Product name

4. Manufacturer logo

5. CMS block "Gallery and Buybox" from Shopware

8. CMS block "Product description & reviews" from Shopware

1. ThemeWare® Product badges

2. Product image

3. Arrow navigation

4. ThemeWare® "Picture similar to product" note

1. Price

2. Free shipping note

3. Variant selection ("Text" layout)

4. Variant selection ("Colour" layout)

1. Discounted price (+list price)

2. ThemeWare® Stock note

3. ThemeWare® Individual announcement

4. ThemeWare® Payment logos on the product page

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

Example

Demo

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

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

Standard-Einstellungen

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

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

• Das große Bild-Element nutzt die komplette Höhe und sollte eine minimale Höhe 2x der minimalen Höhe der beiden linken Bilde-Elemente haben (z.B. 640 px).

• Hinweis: In älteren Versionen von ThemeWare® kann es nötig sein noch die Lücke (z.B. 20px) einem Element zu addieren.

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.

Example

Demo

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

The ThemeWare® Hub integrates the benefits and features of the ThemeWare® Service Portal directly into your administration – exactly where you need them.

The Hub bundles all functions into dedicated tabs:

• Dashboard — overview, setup assistant and quick access

• Add-ons — unlock optional features

• Utilities — request the free extras package

• Variants — create theme variants and take over configurations

• Backup — back up and restore your theme configuration

• News — news & announcements

• Changelog — version history & updates

• Support — help, guides & contact

You can access the ThemeWare® Hub via the main navigation bar or the Shopware settings.

Content > ThemeWare® {Your theme}

Settings > Extensoins > ThemeWare® {Your theme} Dashboard

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.

Example

Demo

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

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]

The News tab shows the latest news, updates and announcements around ThemeWare®. Posts are loaded directly from the ThemeWare® service portal (via RSS feed) on each visit.

News and announcements

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:

Demo

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

Demo to follow...

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.

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

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.

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

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

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

Demo to follow...

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.

You can find more information about the CMS element here:

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

4. The "Element Settings" pop-up will open (2)

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:

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 "Text" section you can configure the font and text colour for the text (4).

Layout

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:

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 Changelog tab lets you follow the full version history of ThemeWare® — with all highlights, changes and notes per release. Data is loaded directly from the ThemeWare® service portal (via JSON feed) on each visit, so you never miss a release.

Layout

Entries are grouped by major version (e.g. 4.x, 3.x). Each version entry can be expanded and shows:

• Highlights — the most important new features

• Changes — all further adjustments

• Notes — important information about the version

Badges on an entry indicate the type of version (feature, premium request, bugfix, note). Markers like Pro or Cloud show which edition a change applies to.

• Jump to version — use the version buttons (e.g. "4.x") at the top to go straight to the desired major version.

• Expand all / collapse all — shows or hides the details of all entries.

• The latest version is expanded automatically on open.

Your currently installed version is highlighted in the changelog with a blue border and an "Installed" label.

If a newer version is available, a "Update recommended" notice appears at the top showing your installed and the latest version.

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!

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

Usually, a CMS extension is made of a CMS block and a CMS element.

A CMS block provides the container for CMS elements. CMS blocks have one or more slots. A CMS element is placed in each slot.

You can place almost any CMS element in most CMS blocks. An example of this is the ThemeWare® grid and column blocks.

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.

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

The Backup Manager saves, transfers and edits your theme configuration directly in the "Backup" tab of the ThemeWare® Hub. It bundles three functions: export of the configuration as a JSON file, a guided import with a mandatory pre-backup safeguard, and an advanced mode with an inline JSON editor for direct editing.

Downloads the theme's configuration values as a JSON file. Useful as a safety net before larger changes, or for transferring settings between shops.

Step by step:

1. Find the relevant theme in the backup tab.

ThemeWare® add-ons extend your theme with additional features that you can unlock individually as needed. Each add-on is an independent subscription and can be booked or cancelled independently of the others.

We want to keep the price of ThemeWare® stable while continuing to develop and improve the theme on an ongoing basis.

Many new features are part of the classic theme scope and will continue to be integrated directly into ThemeWare®. However, some features and feature requests go well beyond what is typically expected from a theme.

These extended features are offered as optional add-ons. This allows you to enable them only when you need them — while keeping the choice in your hands and ensuring that not every customer has to pay for functionality they may not use.

Save, transfer and directly edit your theme configuration. File export, guided import with automatic pre-backup safeguard and an inline JSON editor with live validation and change counter.

CMS element for category and landing pages: present multiple subcategories together with their direct subcategories in a clean card or list layout.