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.
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.
Hinweis: Mehr zu den ThemeWare® Banner-Elementen findest du hier:
Available banner blocks
Image-Banner
Parallax-Banner
Hero-Banner
Advanced-Banner
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Banner-Blöcke findest du in der Rubrik "ThemeWare® Banner" [Pro]
Note: These blocks are available only in the ThemeWare® Pro Edition.
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.
ThemeWare® "Text teaser (decorated)"
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
You can configure the ThemeWare® "Text teaser (decorated)" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (2) to configure the CMS element
The "Element Settings" pop-up will open
Make the desired changes
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).
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:
Layout
In the section "Layout" you can configure the horizontal alignment, the vertical alignment and the maximum width (e.g. 90%) of the content (=text) 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 hover effect for the content (=text).
Coloured overlay
In the section "Coloured overlay" a coloured overlay can be activated and configured.
Configuration
General
Layout
SEO & Pagespeed
Advanced
Data mapping (coming soon)
Demo
Configuring the ThemeWare® "Text teaser (decorated)"
Elements of the "Text teaser (decorated)"
Text slide (Hero slider)
Note: This article is work in progress.
Das ThemeWare® CMS-Element "Text 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.
ThemeWare® "Text slide (Hero slider)"
Note: The element is explicitly intended for use in its own CMS block. It is not designed for use in other CMS blocks and therefore cannot be exchanged or placed in other blocks.
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
You can configure the ThemeWare® CMS element "Text slide (Hero slider)" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Navigate to the desired CMS element using the arrow navigation (2)
Click on the "gear" icon (3) to configure the CMS element
The "Element settings" pop-up will open
Make the desired changes
Save your changes
You have now configured the CMS element.
The configuration of the "Text slide" is quite self-explanatory. The image and the text 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 (1) of the slide. This is a mandatory field.
Content
In the section "Content" you can enter the teaser text, the headline (3) and the text (4) for the slide. The text 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 general settings, the overlay (2), the text (3, 4, 5) in the overlay and a coloured overlay.
General
In the section "General" you can configure the padding (inner spacing) and the border radius (border-radius).
Content
In the section "Content" you configure the text alignment and the text shadow.
Teaser
In the section "Teaser" you can configure the font and text colour for the teaser (3).
Headline
In the tab "Responsive" you can optimise the representation for mobile viewports. Here you can configure breakpoints for the image display mode and the text overlay.
Image
In the section "Image" you can configure the display mode of the image. With the breakpoint you can define when the display mode of the image should change (e.g. from 'cover' to 'contain'). In this way you can, for example, guarantee a minimum height in mobile viewports.
Text
In the section "Text" the breakpoint for the text can be configured. From this breakpoint on, the text overlays the image. Additionally, you can configure a background colour for the text area, which is displayed when the text is shown below the image.
In the tab "Slide" you can configure the slide interval (display duration in milliseconds). Additionally, in the section "Scheduling" you can optionally set a start date and end date to display the slide only within a specific time period.
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 slides using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.
The image of the Hero slides is usually displayed in display mode 'contain' (1). It scales, while maintaining the aspect ratio, to the full width of the slide.
Since ThemeWare® 2.1 you have the option of defining yourself whether the display mode should change to 'cover' (2) and if so, from which viewport. In the display mode 'cover' you must also configure the minimum height (3) of the slide. This determines the height of the slide and the image fills the slide while maintaining its aspect ratio. If necessary, the image is cropped (4) to fit.
The text in the Hero slides usually overlays the image. In smaller viewports, this may no longer fit perfectly, especially with long texts, so the text is displayed below the image on mobile devices.
Since ThemeWare® 2.1 you have the option to define yourself whether the text should be displayed on top of the image, and if so, from which viewport.
You can find some examples of use in our demo shops:
In the section "Headline" you can configure the font and text colour for the headline (4).
Text
In the section "Text" you can configure the font and text colour for the text (5).
Content overlay
In the section "Content overlay" you configure the overlay (2). Here you can configure the horizontal alignment and the vertical alignment of the overlay. You can also select a fade-in animation and set the width (e.g. 100%) and the maximum width (e.g. 50%) for the overlay. Additionally, you can configure the overlay sizing and select a backdrop effect (e.g. Blur).
With the configuration "Apply overlay styling" you can activate configuration fields for styling the overlay. Here you can set the background colour, select a box shadow and rounded corners.
Colour overlay
In the section "Colour overlay" a colour overlay can be activated and configured.
Configuration
General
Note: The text area is HTML-capable. However, links <a> should not be used if the configuration "Entire element clickable" is used, as this interferes with the actual linking of the slide.
Layout
Responsive
Slide
Important: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information:
SEO & Pagespeed
Advanced
Breakpoint
Image
Text
Demo
ThemeWare® "Text slide" konfigurieren
Elements of the "Text slide"
Disply mode 'contain'
Disply mode 'cover'
Disply mode 'cover' in detail
Text below the image
Text overlays the image
Utilities
The ThemeWare® Utilities are a free package of extras for design, customisation and conversion. You request it once via a form and get instant access to all resources.
How to request
Enter your email address in the form.
Choose your Shopware 6 version (self-hosted or Cloud).
Specify whether you are a shop owner or a Shopware agency.
Confirm the privacy policy and click "Register now for free".
By signing up you subscribe to our newsletter, through which we send you the resources and occasionally relevant information. You can unsubscribe at any time with a single click.
You can find further information about ThemeWare® Utilities in the ThemeWare® Service Portal:
Product page
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.
Countdown banner
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...
Note: This article is work in progress.
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Note: These blocks are available only in the ThemeWare® Pro Edition.
Add block
The Utilities include, among other things, a ready-made shopping experience that you install in seconds thanks to one-click import.
Further information
Three columns, 8-2-2
Note: This article is work in progress.
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.
ThemeWare® CMS-Block "Drei Spalten, 8-2-2" [Pro]
Example
ThemeWare® CMS-Block "Drei Spalten, 8-2-2"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Three columns
Note: This article is work in progress.
Der ThemeWare® CMS-Block "Drei Spalten" (jeweils ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
ThemeWare® CMS block "Three columns" [Pro]
Example
ThemeWare® CMS block "Three columns"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Three columns, 2-2-8
Note: This article is work in progress.
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.
ThemeWare® CMS-Block "Drei Spalten, 2-2-8" [Pro]
Example
ThemeWare® CMS-Block "Drei Spalten, 2-2-8"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Discount banner
Note: This article is work in progress.
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.
ThemeWare® "Discount banner"
...
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
You can find more information about the CMS element here:
You can find some examples of use in our demo shops:
Demo to follow...
Backup Manager
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:
Find the relevant theme in the backup tab.
Click "Export".
The browser downloads a file named tcinn-<theme-name>-<date>.json.
Loads a previously exported JSON file into the chosen theme. Existing configuration values are fully replaced, so the import dialog walks you through a backup step first.
Step by step:
In the backup tab, click "Import" on the target theme. The "Import theme configuration" modal opens.
In the modal, click "Download backup" (step 1). The current configuration is saved as a safety net.
Click "Choose file …" (step 2) and select the JSON file to import.
If the file is accepted, click "Import configuration".
The theme is recompiled automatically.
For experienced users: a JSON editor directly below each theme, allowing the configuration to be edited without going through the standard UI.
Step by step:
At the top of the backup tab, click "Activate advanced mode".
A JSON editor appears below each theme, showing its current configuration.
Before saving, click "Export" on the affected theme (backup is mandatory).
Edit the JSON.
Click "Save".
The theme is recompiled automatically.
Typical scenarios for the backup functions:
Backup before larger changes — Before a plugin update, an extensive theme adjustment, or activating "advanced mode", download a backup.
Restore after a mistake — A change broke the theme or caused unwanted side effects? Simply re-import the previously exported JSON file into the affected theme.
Write a configuration into another theme — You have an existing custom duplicate and want to merge in the configuration of a different variant (e.g. from Plants). Export from the source theme, import into the target theme.
Move a setup from test shop to live shop — You develop on a test shop and want to apply the finished theme setup on production. Export on test, download the file, import on live.
Detail tweaks at JSON level for power users — Individual configuration values need to be changed quickly and precisely, without going through the standard UI in the Theme-Manager. Activate "advanced mode" for that.
Important: The Backup Manager is an add-on and must be unlocked separately. Why add-ons?
Theme configuration
Export
What gets exported?
Only the theme configuration values (configValues) — i.e. all your adjustments to the theme. Uploaded media (logos, images) are referenced by ID; the actual media files are not bundled in the current format.
Import
Existing configuration is replaced
Import overwrites current configuration values completely. That's why the backup in step 1 is mandatory — without it the import button stays disabled.
Cross-variant import
If the import file comes from a different ThemeWare® variant (e.g. a Plants file imported into a Modern theme), the import detects this automatically and shows a notice. Your customizations are transferred, while non-customized fields fall back to the current variant's defaults.
Media note
If the file references media IDs (logos, images), those may not exist in the target shop and need to be reassigned manually after import.
Advanced mode
Edit with care
Invalid JSON input can damage the theme or break the storefront. The "Save" button stays disabled until a backup has been created for the theme and the input is valid JSON.
Deactivate advanced mode
Use "Exit advanced mode" at the top of the page. The editors are hidden again — unsaved changes are lost.
Der ThemeWare® CMS-Block "Zwei Spalten" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
ThemeWare® CMS block "Two columns" [Pro]
Example
ThemeWare® CMS block "Two columns"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Image gallery and buy box (with product name)
Note: This article is work in progress.
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.
ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname)"
Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
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...
Product pages
Breadcrumb
CMS block "Product name & manufacturer logo" from Shopware
Hero slider (4x)
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.
Backup
Overview of all themes in your ThemeWare® family: see the sales channel assignment, configure the right theme and back up its configuration. The Backup Manager adds file export, a guided import and th
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.
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.
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:
Grid 'Two' (swapped)
Grid 'Two'
Grid 'Six' (swapped)
News
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.
Grid 'Five'
Hero slider (2x)
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.
Grid 'Modern' (swapped)
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.
Note: This article is work in progress.
Important: This block is only available in the ThemeWare® Pro Edition.
ThemeWare® CMS block Grid 'Two' (swapped)
Note: This article is work in progress.
Important: This block is only available in the ThemeWare® Pro Edition.
ThemeWare® CMS block Grid 'Two'
Note: This article is work in progress.
Important: This block is only available in the ThemeWare® Pro Edition.
ThemeWare® CMS block Grid 'Six' (swapped)
Note: This article is work in progress.
Important: This block is only available in the ThemeWare® Pro Edition.
ThemeWare® CMS block Grid 'Five'
CMS block "Product filter"
ThemeWare® Sidebar Widget (content "Benefits")
ThemeWare® Sidebar Widget (content "Communities or Social Media")
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.
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Further information
You can find more information about the CMS element here:
For details on the Backup Manager's features and pricing, see the Add-ons overview.
Overview & configure
Create a backup
Backup Manager (Add-on)
You want to create a new duplicate from a source instead?
That's what the "Take over configuration" function in the is for. It creates a new theme with the customizations from any ThemeWare® edition (Pro or Cloud) and leaves your existing setup untouched.
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.
ThemeWare® "Image teaser"
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
You can configure the ThemeWare® "Image teaser" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (2) to configure the CMS element
The "Element Settings" pop-up will open
Make the desired changes
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 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
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:
Hero slider
Note: This article is work in progress.
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.
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:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Navigiere mit der Pfeil-Navigation zum gewünschten Element (2)
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:
Footer
ThemeWare® Footer
ThemeWare® USP Bar
ThemeWare® Upper section
ThemeWare® Main section
ThemeWare® Lower section
Logos footer
Copyright footer
"Scroll-Up" button
Footer elements are "slots" in the columns of the footer areas. You can fill these footer elements with ThemeWare® widgets.
ThemeWare® "Newsletter" widget
Service hotline
Footer navigation
Two columns, 5-7
Note: This article is work in progress.
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.
ThemeWare® CMS block "Two columns, 5-7" [Pro]
Example
ThemeWare® CMS block "Two columns, 5-7"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Breadcrumb navigation
Note: This article is work in progress.
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.
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
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:
Demo to follow...
Four columns
Note: This article is work in progress.
Der ThemeWare® CMS-Block "Vier Spalten" (jeweils 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
ThemeWare® CMS block "Four columns" [Pro]
Example
ThemeWare® CMS block "Four columns"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Testimonial (Customer review)
Note: This article is work in progress.
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.
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:
Hero slider (3x)
Note: This article is work in progress.
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.
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
You can find some examples of use in our demo shops:
Hero slider
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.
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:
Testimonials (Four columns)
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]
Sale
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.
Sidebar
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.
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]
Adding a "Hero slider" CMS block
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 (Dokumentation) 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:
Accessibility concerns: Enabling this feature may make parts of your storefront inaccessible to users with disabilities. This may result in non-compliance with accessibility laws applicable in your jurisdiction (e.g., the European Accessibility Act).
Please note: By enabling this feature, you acknowledge this risk and accept full responsibility.
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.
Add-on variants
Ten additional design variants, individually unlockable.
Included variants
Five variants are bundled with the theme at no extra cost.
Add-on variants cost €14.99 per month each, cancellable anytime. Purchases run through your Shopware account.
You can create a theme duplicate from any variant in the Hub with a single click — the new duplicate appears in the look of the selected variant. Your existing theme stays untouched.
Grid 'Three'
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Three'
Important: This block is only available in the ThemeWare® Pro Edition.
Add-ons
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.
Grid 'Modern'
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.
Six columns
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:
Teaser
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.
Text-Teaser
Two columns, 9-3
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:
Nested subcategories
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:
Add-ons
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 .
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.
Action buttons (Wishlist, "My Account", Shopping cart)
Top bar (Language selection, Currency selection, Service menu)
Top navigation
ThemeWare® Header
Note: This article is work in progress.
Important: This block is only available in the ThemeWare® Pro Edition.
ThemeWare® CMS block Grid 'Five' (swapped)
CMS element for category and landing pages: present multiple subcategories together with their direct subcategories in a clean card or list layout.
Add-ons are unlocked as in-app purchases directly within the Shopware admin. The entire purchase process runs through your Shopware account — final price, payment details and billing come from the Shopware Store.
Process:
Click the desired add-on in the ThemeWare® Hub (tab "Add-ons" or "Variants").
If you haven't yet activated the "Shopware Extension Store" and your shop isn't yet linked to your Shopware account, you'll be taken to the connection modal. This happens automatically.
Confirm the purchase — the add-on is active immediately.
Billing: Monthly, cancellable anytime, via your Shopware account.
Any add-ons you have purchased or booked will be marked accordingly.
You can cancel them by removing the licence from your Shopware account (Merchant → Shops → [Your Shop] → Licences).
Five design variants — Bike, Kids, Global, Fit and Plants — are bundled with the theme at no extra cost. Switch your shop's look with a single click, no separate licence required.
Pixel Coffee and Pixel Sponsorship are voluntary contributions to support ThemeWare® development. They do not unlock additional features; instead, they grant an official "Pixel Friend" / "Pixel Sponsor" status as a thank-you. – Thank you very much! 💙
Why add-ons?
Note: Add-ons in the administration are part of the ThemeWare® improvements to the administration and are therefore only available in the Pro Edition.
Final price in the purchase dialog
The prices shown in the Hub are reference values. The actual final price including country-specific adjustments is shown directly in Shopware's purchase modal before confirmation.
Support for purchases, licences and billing
For questions about purchases, licences, bookings or billing, please contact Shopware directly. We have no control over these.
Purchase modal
Booked add-ons
Support for purchases, licences and billing
For questions about purchases, licences, bookings or billing, please contact Shopware directly. We have no control over these.
Modern design with boxed layout — electronics, tech and gadgets.
How the purchase works
Creating a variant is a one-time action
Creating a variant as a duplicate is a one-time step. Since Shopware currently only allows subscription models (no one-time purchases), the unlock works as a monthly subscription. Once you've created your variant, you can cancel the subscription in your Shopware account at any time — the duplicate stays in your shop.
Create a variant
Fresh, sporty green design — bike, e-bike and outdoor sport.
Playful, friendly design — toys, kids' fashion and baby products.
Classic, powerful design with boxed layout — international, wholesale, industrial.
Energetic design with bold accents — fitness, supplements, workout.
Nature-inspired, dark green design — plants, garden, natural products.
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.
ThemeWare® "Hover box"
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
You can configure the ThemeWare® "Hover box" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (2) to configure the CMS element
The "Element Settings" pop-up will open
Make the desired changes
Save your changes
You have now configured the CMS element.
The configuration of the "hover box" is quite self-explanatory. The text and the image are mandatory fields. That's all you really need to configure.
In the tab "General" you configure the content of the element.
Content
In the section "Content" you can enter the headline (3) and the text (4) for the teaser. The text is a mandatory field.
Image
In the section "Image" you define the background image (1) of the teaser. This is a mandatory field.
Link
In the section "Link" you define the target of the teaser when it is clicked.
In the tab "Layout" you can configure the overlay (2), the text (3, 4) in the overlay and the hover effect of the overlay.
General
In the section "General" you can configure the general background colour (1).
Content
In the "Content" section you can select the desired text alignment.
Headline
In the "Headline" section you can configure the font and text colour for both the headline (3).
Text
In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline and the "Lazy loading" of the image.
You can select each HTML element of our teasers using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.
On category and product pages, the following fields can be dynamically mapped from the current category or product:
Image - e.g. category image or product image
Headline - e.g. category name or product name
Text - e.g. category description or product description
You can find some examples of use in our demo shops:
Config Finder
Find configuration fields quickly - in the theme manager, from the admin search bar and in the browser.
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
In the browser — the field search engine at for looking things up
You open the Config Finder with the "Config Finder" button in the top right of the theme manager. On narrow screens the button shows the magnifier only.
Step by step:
Open the theme configuration of your ThemeWare® theme.
Click the "Config Finder" button in the top right.
Type in what you are looking for – for example "usp background colour". (1)
As soon as you have entered two characters, the theme manager filters the configuration:
Configuration fields without a match are hidden. Only the fields belonging to your search term remain.
Blocks and sections without a match disappear as well, so no empty cards are left over.
All remaining blocks are expanded. You therefore do not have to open anything to see a match.
The total number of results is shown on the right inside the search field. You end the search with the cross in the search field; as long as the cursor is in the search field, the "Esc" key does the same. The configuration is then fully visible again, and a search term that was set also disappears from the address bar.
Search target
Meaning
If you enter several words, all of them have to match. That way you narrow down the result step by step: "usp" shows everything about the USP bar, "usp colour" noticeably less, "usp colour background" only the background colours. The order of the words does not matter.
The search always looks for contained character sequences. "image" therefore also finds "Images" and "Image detail", but not the other way round – when in doubt, use the shorter word stem.
If there is no match in the tab you currently have open, the number of results takes its place, together with short directions: "14 results found – you will find them in the tabs above, each with its number of results." The tab bar then only holds the tabs with results.
If the search finds nothing in the entire theme, the tab bar stays unchanged and you get the note "No results" – so you never face an empty screen.
You do not have to have the theme manager open to search for a configuration field. The admin search bar offers its own search type "ThemeWare®" for this.
Step by step:
In the admin search bar, click the type selection on the left of the search field ("All" is preselected).
Choose the search type "ThemeWare®" from the list.
Alternatively type # into the search bar followed by part of the name – for example #themeware
This search covers all installed ThemeWare® themes. The theme name in the result line shows you which theme a configuration field belongs to. That is particularly helpful if you run several ThemeWare® themes or duplicates.
Independently of your administration, the Config Finder is still available as a field search engine in the browser. It is mainly suited for looking things up, as it also shows the technical name, the path to the setting, an example value and the help text for every configuration field.
Three columns, 2-8-2
Note: This article is work in progress.
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.
ThemeWare® CMS block "Three columns, 2-8-2" [Pro]
Example
ThemeWare® CMS block "Three columns, 2-8-2"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Grid 'One'
Note: This article is work in progress.
Der ThemeWare® CMS-Block "Grid 'One'" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
ThemeWare® CMS block "Grid 'One'"
Important: This block is only available in the ThemeWare® Pro Edition.
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:
ThemeWare® Hub
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.
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.
ThemeWare® CMS block "Two columns, 7-5" [Pro]
Example
ThemeWare® CMS block "Two columns, 7-5"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Image slide (Hero slider)
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:
Click on the corresponding CMS block (1) to activate the "edit mode"
Variants
Switch your shop's look with another variant or take over your customizations. Both functions create a duplicate — your existing theme stays untouched.
The variants tab shows all 15 ThemeWare® variants. Creating a variant produces a new theme duplicate in the look of the selected variant. Your existing theme of course stays untouched.
In the Variants tab in the Hub, you can filter the overview by:
Top sellers — the five best-selling variants
Button teaser
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.
You can configure the ThemeWare® "Button teaser" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Three columns, 3-6-3
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:
Support
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
Two columns (swapped on phones)
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:
Category teaser
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)
Bike
Kids
Global
Fit
Plants
Note: The ThemeWare® Hub in the administration is part of the ThemeWare® improvements to the administration and is therefore only available in the Pro Edition.
Services — individual customisations and commissioned work
Remove branding — request removal of the footer notice
Partners & agencies — priority support and partner programme
Service portal — your central point of contact
News — news & announcements
Changelog — version history & updates
Compatibility — Shopware & ThemeWare® versions
Live chat
Knowledge, answers & solutions
Contact & feedback
Services & partnership
More & latest
In the "Text" section you can configure the font and text colour for the text (4).
Layout
In the section "Layout" you can configure the horizontal alignment and vertical alignment of the text.
Image
In the section "Image" you can configure the desired horizontal positioning of the image in display mode 'Cover'.
Content overlay
In the section "Content overlay" you configure the overlay (2) of the hover box. Here you can configure the background colour of the overlay.
Hover
In the section "Hover" you can select a hover effect for the content / overlay. With the Invert hover behaviour option you can invert the hover behaviour, so that the overlay is displayed by default and hidden on hover.
Configuration
General
Note: The text area is capable of HTML. However, links <a> should not be used, as this interferes with the actual linking of the element.
Layout
SEO & Pagespeed
Advanced
Data mapping (coming soon)
Demo
Configuring the ThemeWare® "Hover box"
Elements of the "Hover box"
Switch to a tab with results and change your setting right away. (2, 3)
Tabs without a match disappear from the tab bar. The remaining tabs show the number of results, for example "Header (14)".
The welcome area and the theme information are hidden, so the results sit at the top.
.
Enter your search term.
The results appear with their full path: theme, tab and block.
Clicking a result opens the theme manager of the matching theme – with the search already applied.
Label of the configuration field
The text you see in the configuration – in the language of your administration
Technical name
For example twt-header-type. Handy when a tutorial, a changelog or a support reply mentions the technical name
Heading of a block
A match in a block heading shows the complete block with all of its configuration fields – "Header" therefore takes you to the whole block instead of a single field
Note: The Config Finder in the administration is part of the ThemeWare® improvements to the administration and is therefore only available in the Pro Edition.
Search in the theme configuration
What is searched
No results
Search from the admin search bar
Note: The Config Finder is deliberately not part of the general search ("All") in the search bar. A broad term such as "Header" quickly returns hundreds of configuration fields – those would push your products, orders and customers out of the result list. You therefore reach it only by selecting the search type.
Config Finder in the browser
Tip: You will find a step-by-step guide to the search in the theme manager in our ThemeWare® Knowledge Base.
Navigate to the desired CMS element using the arrow navigation (2)
Click on the "gear" icon (3) to configure the CMS element
The "Element settings" pop-up will open
Make the desired changes
Save your changes
You have now configured the CMS element.
ThemeWare® "Image slide" konfigurieren
The configuration of the "Image slide" is quite self-explanatory. The image is a mandatory field. That's all you need to configure.
In the tab "General" you configure the content of the element.
Image
In the section "Image" you define the background image (1) of the slide. 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 general settings and a coloured overlay.
General
In the section "General" you can configure the border radius (border-radius).
Colour overlay
In the section "Colour overlay" a colour overlay can be activated and configured.
Elements of the "Image slide"
In the tab "Responsive" you can optimise the representation for mobile viewports. Here you can configure the breakpoint for the image display mode.
Image
In the section "Image" you can configure the display mode of the image. With the breakpoint you can define when the display mode of the image should change (e.g. from 'cover' to 'contain'). In this way you can, for example, guarantee a minimum height in mobile viewports.
In the tab "Slide" you can configure the slide interval (display duration in milliseconds). Additionally, in the section "Scheduling" you can optionally set a start date and end date to display the slide only within a specific time period.
In the tab "SEO & Pagespeed" you can configure the "Lazy loading" of the image.
You can select each HTML element of our slides using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.
The image of the Hero slides is usually displayed in display mode 'contain' (1). It scales, while maintaining the aspect ratio, to the full width of the slide.
Since ThemeWare® 2.1 you have the option of defining yourself whether the display mode should change to 'cover' (2) and if so, from which viewport. In the display mode 'cover' you must also configure the minimum height (3) of the slide. This determines the height of the slide and the image fills the slide while maintaining its aspect ratio. If necessary, the image is cropped (4) to fit.
Disply mode 'contain'
Disply mode 'cover'
Disply mode 'cover' in detail
You can find some examples of use in our demo shops:
Note: This article is work in progress.
Note: The element is explicitly intended for use in its own CMS block. It is not designed for use in other CMS blocks and therefore cannot be exchanged or placed in other blocks.
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
ThemeWare® "Image slide (Hero slider)"
Configuration
General
Layout
Responsive
Slide
Important: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information:
SEO & Pagespeed
Advanced
Breakpoint
Image
Demo
Popular — popular variants across all styles
Light — designs with a light, friendly look
Dark — designs with a darker feel
Boxed — designs with a boxed layout
Included — the five variants already bundled
Add-on — the ten variants you can unlock
Optional: pick a filter (e.g. Top sellers, Light, Dark, Boxed) to narrow the list.
Click the desired variant card. The "Create variant as duplicate" modal opens.
Review the selection (source and target).
Click "Create variant".
The new duplicate then appears in your Theme-Manager.
Take over the look and customizations from another installed ThemeWare® variant (Pro or Cloud) into your current theme. Useful for example when moving from the Cloud app to the Pro variant, or when you want to continue with a different variant as your base.
Prerequisite: at least one second ThemeWare® variant (Pro or Cloud) is installed in the shop. Otherwise a notice is shown instead of the selection field.
Step by step:
In the "Take over configuration" section, pick the source from the dropdown. Available are all other ThemeWare® variants (Pro/Cloud) plus their duplicates.
The target is automatically your current theme (shown read-only next to the source).
Click "Take over configuration".
A new duplicate is created under your current theme as parent. The look and customizations of the source (logo, colors, typography, etc.) are preserved.
For details on the available add-on variants, tags and prices, see the Add-ons overview.
Typical scenarios for both functions:
Try out a variant — You want to see how another variant (e.g. Plants) would look with your setup, without altering your existing theme.
Different looks per sales channel — You run multiple sales channels and want to assign each one a different variant.
Fresh start — You want to start over with the factory defaults of a variant, without your previous customizations.
Switch between two Pro plugins — You have e.g. ThemeWare® Plants and Modern installed in parallel and want to continue your Plants configuration under Modern.
Switch from Cloud (app) to Pro (plugin) — You have the cloud app installed, buy the Pro plugin in addition, and want to take over your cloud configuration. The cloud app can then be uninstalled.
Variant no longer offered in the store — Your previous variant is no longer available for purchase. You switch to an active variant and bring your setup along.
Continue with a custom duplicate as base — You have a polished custom duplicate under one variant and want to continue its look under a different variant.
Which function do you need?
Create variant — create a fresh variant, quick and clean, without your existing customizations.
Take over configuration — create a variant and bring along your customizations (logos, colours, texts) from an existing theme.
Filters & tags
Create variant
Sales channel assignment
The newly created duplicate is not yet assigned to a sales channel. Open the Theme-Manager and assign the theme to your desired sales channel for it to go live in the storefront.
Logos
Logos are inherited from your current variant's plugin theme — your own uploaded logos are included. You can swap them in the Theme-Manager after creating.
Background images
These variants ship with factory background images: Bath, Bike, Bio, Electric, Exquisite, Fit, Global, Kids, Living, Outdoor, Plants, Strong.
When switching to a variant without a background (e.g. Bike → Modern), the old background image of the source variant initially stays visible — this is a that we cannot resolve automatically right now.
You have two easy ways to remove the background image in the new theme:
Take over configuration (Migration)
Note: The flyout cards are still in development. We welcome your constructive .
Sales channel assignment
The newly created duplicate is not yet assigned to a sales channel. Open the Theme-Manager and assign the theme to your desired sales channel for it to go live in the storefront.
Cloud app as source
ThemeWare® Cloud editions (apps) can also serve as a source. Handy when moving from Cloud to Pro: take over the cloud configuration once, then uninstall the cloud app.
Source = duplicate
If you select a duplicate as the source, customizations from the underlying plugin or app theme are transferred as well.
Uninstall the source
After a successful take-over the source plugin or app is no longer needed for the new theme — you can safely uninstall it.
Premium variants (Add-on)
Use cases
Create variant
Take over configuration
Want to write into an existing theme instead of creating a new one?
The is for that: export the configuration from the source, import it into the target theme. It also provides a safety net with mandatory backup before overwriting.
Click on the "gear" icon (2) to configure the CMS element
The "Element Settings" pop-up will open
Make the desired changes
Save your changes
You have now configured the CMS element.
Configuring the ThemeWare® "Button teaser"
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 hover effect for the content (=button).
Coloured overlay
In the section "Coloured overlay" a coloured overlay can be activated and configured.
Elements of the "Button teaser"
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:
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
ThemeWare® "Button teaser"
Configuration
General
Layout
SEO & Pagespeed
Advanced
Note: Please note that theme variables are not available in the administration. The button colour of the preview is replaced by the corresponding theme colour in the storefront.
Demo
Kategorie-Teaser (Modern)
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Kategorie-Teaser-Blöcke findest du in der Rubrik "ThemeWare® Category teasers" [Pro]
Note: This article is work in progress.
Hinweis: Mehr Informationen zu den ThemeWare® Kategorie-Teaser-Elementen findest du hier: Category teaser
Available category teaser blocks
Important: These cms blocks are available only in the ThemeWare® Pro Edition.
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.
ThemeWare® "Text teaser"
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
You can configure the ThemeWare® "Text teaser" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (2) to configure the CMS element
The "Element Settings" pop-up will open
Make the desired changes
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).
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:
Block configuration
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).
This is the first version of this feature. We already have some ideas for further configurations, but we’d like to focus on your feedback on the current version first.
Tip: Do you have any suggestions for further configurations or other features for ThemeWare®? If so, please feel free to send us your ideas at any time via the ThemeWare Service Portal:
Important: This feature is only available in the ThemeWare® Pro Edition.
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
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:
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)
Two columns, 3-9
Note: This article is work in progress.
Der ThemeWare® CMS-Block "Zwei Spalten, 3-9" (25% | 75%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
ThemeWare® CMS block "Two columns, 3-9" [Pro]
Example
ThemeWare® CMS block "Two columns, 3-9"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Image gallery and buy box (with product name & manufacturer logo)
Note: This article is work in progress.
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.
ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname & 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.
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
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...
Dashboard
The ThemeWare® Dashboard gives you all important information, setup guides, and quick access links at a glance.
Quick access
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 Utilities tab)
Add-ons — extensions for your setup (opens the )
Video tutorial — step-by-step videos
Manual, News, Changelog and Share feedback — documentation, updates and suggestions
The setup assistant guides you through the most important steps; a progress bar shows how far you are:
Plugin installed — already done once the theme is active in your administration.
Configure settings — adjust the theme configuration for your sales channel.
Get the free ThemeWare® Utilities package — shopping experiences, 100+ logos and customising plugin.
You can expand each step and mark it as done, or hide the whole assistant via the ×.
The sidebar offers:
Support & help — direct access to the support chat and ticket creation.
What our users say — reviews from other shop owners plus the option to leave a review yourself.
At the bottom of the dashboard you'll find additional cards:
Remove footer notice — request removal of the branding.
For agencies & partners — priority support and partner programme.
One column
Note: This article is work in progress.
Der ThemeWare® CMS-Block "Eine Spalte" (100%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
ThemeWare® CMS block "One column" [Pro]
Example
ThemeWare® CMS block "One column"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Two columns, 8-4
Note: This article is work in progress.
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.
ThemeWare® CMS block "Two columns, 8-4" [Pro]
Example
ThemeWare® CMS block "Two columns, 8-4"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
You can find some examples of use in our demo shops:
Grid 'One' (swapped)
Note: This article is work in progress.
Der ThemeWare® CMS-Block "Grid 'One' (getauscht)" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
ThemeWare® CMS block "Grid 'One' (swapped)'"
Important: This block is only available in the ThemeWare® Pro Edition.
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 "Countdown banner (compact)" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
ThemeWare® "Countdown banner (compact)"
...
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
You can find more information about the CMS element here:
You can find some examples of use in our demo shops:
Demo to follow...
Grids
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.
Two columns, 4-8
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:
Five columns
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:
Changelog
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.
Entries are grouped by major version (e.g. 4.x, 3.x). Each version entry can be expanded and shows:
Hide it (recommended): In the Theme-Manager you'll find a show/hide option next to each background image. Set it to "do not show" — the image disappears immediately without you having to remove the media.
Upload your own: Simply set a different image in the Theme-Manager — this overrides the inherited factory background.
Note: Without the advanced configuration the values apply equally to all viewports.
Responsive column layout
Advanced configuration
Note: Without the advanced configuration the values apply equally to all viewports.
Supported blocks
Column blocks (symmetric)
Asymmetric column blocks
Grid blocks
One column
Tip: Do you have any suggestions for further configurations or other features for ThemeWare®? If so, please feel free to send us your ideas at any time via the ThemeWare Service Portal:
In the "Subtitle" section you can configure the font, the text colour and link colours of the subtitle.
Layout
In the section "Layout" you can configure the horizontal alignment, the vertical alignment and the maximum width (e.g. 90%) of the content (=text) 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 hover effect for the content (=text).
Coloured overlay
In the section "Coloured overlay" a coloured overlay can be activated and configured.
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]
Adding a grid CMS block
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:
Hinweis: Ohne "vertikale" und "horizontale" Ausrichtung werden die ThemeWare® Teaser auf die volle Höhe gestreckt. Dadurch kannst du für einzelne Elemente in asymmetrischen Grids (z.B. "Grid 'One'") auch von der oben genannten Rechnung abweichen und musst nicht auf eine identische Höhe beider Spalten achten.
CSS-Klassen
Demos
— 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.
Installed version highlighted
If a newer version is available, a "Update recommended" notice appears at the top showing your installed and the latest version.
"Update recommended" notice
Note: Data is only read; no data is transmitted to the service portal.
Der ThemeWare® CMS-Block "Six columns (Custom)" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
ThemeWare® CMS block "Six columns (Custom)" [Pro]
Note: This block is intended for experts who are very familiar with CMS blocks, CMS elements and the Bootstrap grid system and can handle extensive customisations with this block.
Important: Please note that this block is currently in a testing phase and may be changed if necessary.
Individual column widths
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:
Example
ThemeWare® CMS block "Six columns (Custom)"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
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!
Click on the plus icon to select a CMS block.
Three columns, 3-3-6
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:
Custom code (HTML/CSS/JS)
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]
Text & images
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.
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]
Select the desired CMS block in the "Block category" dropdown.
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
Contains column blocks that can be filled as desired.
ThemeWare® Grids
Contains grid blocks that can be filled with picture elements.
ThemeWare® Listing page
Contains CMS blocks for listing pages.
ThemeWare® Product page
Contains CMS blocks for product pages.
ThemeWare® Sidebar
Contains CMS blocks for the sidebar.
ThemeWare® Other
Contains further cross-page CMS blocks.
ThemeWare® Pro Edition
In the ThemeWare® Cloud Edition you will find the ThemeWare® CMS blocks in the default Shopware categories (see "Text & Images").
ThemeWare® Cloud Edition
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.
Block settings
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 Bootstrap, 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 CMS elements.
Further information and basics about "Shopware 6 Shopping Experiences" and "CMS blocks" can be found in the ThemeWare® Knowledge Base:
ThemeWare® CMS blocks
Tip: If you have further ideas or wishes for existing or new blocks, please send us your suggestions for improvement via our Service Portal.
Add a ThemeWare® CMS block
Pro Edition
Cloud Edition
Block settings
CSS classes
Style CMS block individually
Replace CMS element
Further information
"Text & Bild" CMS-Block hinzufügen
Note: This article is work in progress.
Hinweis: Mehr zu den ThemeWare® "Text & Bild"-Elementen findest du hier: Text & images
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.
ThemeWare® "Call-to-Action"
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
You can configure the ThemeWare® "Call-to-Action" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (2) to configure the CMS element
The "Element Settings" pop-up will open
Make the desired changes
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:
Product name (without manufacturer logo)
Note: This article is work in progress.
Der ThemeWare® CMS-Block "Produktname (ohne Hersteller-Logo)" ist eine Variante vom Shopware CMS-Block "Produktname & Hersteller-Logo" nur ohne Hersteller-Logo.
Important: This block is only available in the ThemeWare® Pro Edition.
In the "Text" section you can configure the font and text colour for the text (4).
Button
In the section "Button" you can configure the button style (the colour) and determine whether the button (5) should be filled or displayed as an outline button.
Image
In the section "Image" you can configure the desired horizontal positioning of the image in display mode 'Cover'.
Content overlay
In the section "Content overlay" you configure the overlay (2). Here you can configure the horizontal alignment and the vertical alignment of the overlay. You can also set the width (e.g. auto or 90%) and the maximum width (e.g. 90% or 740px) of the overlay.
With the configuration "Apply overlay styling" you can activate configuration fields for styling the overlay. Here you can set the background colour, select a background effect, a drop shadow and rounded corners.
Hover
In the section "Hover" you can select a hover effect for the content (=text).
Coloured overlay
In the section "Coloured overlay" a coloured overlay can be activated and configured.
Configuration
General
Note: The text area is capable of HTML. However, links <a> should not be used, as this interferes with the actual linking of the element.
Layout
SEO & Pagespeed
Advanced
Note: Please note the theme variables are not available in the administration. The button colour of the preview is replaced by the corresponding theme colour in the storefront.
Demo
Configuring the ThemeWare® "Call-to-Action"
Elements of the "Call-to-Action"
for all your ThemeWare® needs. It is your personal dashboard for ThemeWare®.
There you will always find all the relevant links and information about ThemeWare®, the ThemeWare® Video Tutorial, the ThemeWare® Utilities, the ThemeWare® Search, the ThemeWare® Config Finder, wizards, promotions, useful tools, feedback and contact forms and much more.
In the ThemeWare® Knowledge Base you will find the ThemeWare® Introduction, many guides and tutorials, the ThemeWare® Lexicon, answers to the most frequently asked questions, solutions to the most common issues, professional knowledge for agencies and freelancers and lots of useful information about Shopware 6.
You can find the ThemeWare® Knowledge Base here:
The ThemeWare® Manual
In the ThemeWare® Manual you will find information about all the features and functions of ThemeWare®.
The ThemeWare® Manual is the complete reference for all ThemeWare® configurations and features.
In the "Manuel" section you will find the entire Theme configuration of ThemeWare®. To help you find your way around quickly, we have adapted the structure of the documentation to that of the theme configuration.
The theme configuration is divided into 4 elements:
Tabs in the tab navigation
Blocks in each tab (accordion elements to expand)
Sections that divide a block
Configuration fields in the individual sections
Structure of the ThemeWare® configuration
In diesem Handbuch haben wir diese 4 Elemente wie folgt dargestellt:
Tabs
Blocks
Sections
Configuration fields
Structure of the ThemeWare® Manual
Note: Please note that the manual is currently a work in progress and we are still completing and translating it.
The ThemeWare® Manual
Note: The documentation of more than 1,000 configuration fields and over 400 additional functions unfortunately takes some time, but we are working daily to fill the manual. 🚀
Structure of the ThemeWare® configuration
Structure of the ThemeWare® Manual
CMS elements
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!
Tip: If you have further ideas or wishes for existing or new blocks, please send us your via our Service Portal.
Important: CMS elements are unfortunately not currently possible in the Shopware Cloud! The ThemeWare® Cloud Edition therefore does not currently contain any CMS elements.
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
Move the mouse over the CMS block
Click on the "Replace" icon (1)
The pop-up "Select element" opens
Select the desired CMS element (2)
Click on the corresponding CMS block to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (1) to configure the CMS element
Many CMS elements from ThemeWare® have a similar structure. They consist of different "layers".
The bottom layer is often the image or background image (1). A "Coloured overlay" (2) can often be placed on top of this. Another layer above this is the "Content overlay" (3). This is the actual content, i.e. the text or labelling of the element.
There are also similarities in the configuration of CMS elements. Below you will find settings that can be found in many CMS elements:
In many CMS elements, you will find the "SEO & Pagespeed" tab. Here you can define the HTML tag (p, h1, h2, ...) of headlines and use it to optimise the HTML hierarchy of your Shopping Experiences.
In the "Pagespeed" section, you have the option to configure "Lazy loading" for images.
eager – Instructs the browser to prioritise the loading of the image. This should be used for images "above the fold".
lazy – Instructs the browser not to load the image until the user scrolls to it. This should be used for images "below the fold".
Some CMS elements have an "Advanced Mode". This can be activated via a toggle in the element configuration and reveals additional configuration fields that are hidden in the standard mode.
Depending on the element, these may include:
Padding (inner spacing) of the element
Border radius of the element
In almost every CMS element you will find the "Advanced" tab. Here you can configure CSS classes and use expert settings.
You can select each HTML element in a CMS element using the appropriate CSS classes. However, if you want to use your own CSS classes, you can insert them in the "Advanced" tab.
In the section "CSS classes", you can add your own CSS classes to various components of a CMS element. Separate multiple CSS classes with a space (blank).
In some CMS elements, you will find the "Expert settings" section in the "Advanced" tab.
These settings are intended for experts who are very familiar with CMS blocks, CMS elements and the Bootstrap grid system!
You can style a specific CMS element individually by assigning it a custom CSS class in the element settings and defining the desired styles in your stylesheet or theme configuration.
Additionally, you can use the automatically generated element ID – especially for CMS elements where assigning a custom CSS class is not possible. This ID is included as a data-cms-element-id attribute in the HTML structure of the storefront:
To target this element via CSS, use an attribute selector like this:
If you want to configure an alternative language in a CMS element, you can simply change the language in the top right corner of the editor of the corresponding Shopping Experience.
Further information and basics about "Shopware 6 Shopping Experiences" and "CMS elements" can be found in the ThemeWare® Knowledge Base:
Call-to-Action slide (Hero slider)
Note: This article is work in progress.
The ThemeWare® CMS element "Call-to-Action slide (Hero slider)" is explicitly intended for use in the CMS block "Hero slider (...)". The CMS element is not designed for use in other CMS blocks and does not work in other CMS blocks.
ThemeWare® "Call-to-Action slide (Hero slider)"
Note: The element is explicitly intended for use in its own CMS block. It is not designed for use in other CMS blocks and therefore cannot be exchanged or placed in other blocks.
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
You can configure the ThemeWare® CMS element "Call-to-Action slide (Hero slider)" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Navigate to the desired CMS element using the arrow navigation (2)
Click on the "gear" icon (3) to configure the CMS element
The "Element settings" pop-up will open
Make the desired changes
Save your changes
You have now configured the CMS element.
The configuration of the "Call-to-Action slide" is quite self-explanatory. The image, the text and the button text 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 (1) of the slide. This is a mandatory field.
Content
In the section "Content" you can enter the teaser text (3), the headline (4), the text (5) and the button text (6) for the slide. The text and the button text are mandatory fields.
Link
In the section "Link" you define the target of the teaser when it is clicked.
In the tab "Layout" you can configure general settings, the overlay (2), the text (3, 4, 5) in the overlay, the button (6) and a coloured overlay.
General
In the section "General" you can configure the padding (inner spacing) and the border radius (border-radius).
Content
In the section "Content" you configure the text alignment and the text shadow.
Teaser
In the section "Teaser" you can configure the font and text colour for the teaser (3).
Headline
In the tab "Responsive" you can optimise the representation for mobile viewports. Here you can configure breakpoints for the image display mode and the text overlay.
Image
In the section "Image" you can configure the display mode of the image. With the breakpoint you can define when the display mode of the image should change (e.g. from 'cover' to 'contain'). In this way you can, for example, guarantee a minimum height in mobile viewports.
Text
In the section "Text" the breakpoint for the text can be configured. From this breakpoint on, the text overlays the image. Additionally, you can configure a background colour for the text area, which is displayed when the text is shown below the image.
In the tab "Slide" you can configure the slide interval (display duration in milliseconds). Additionally, in the section "Scheduling" you can optionally set a start date and end date to display the slide only within a specific time period.
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 slides using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.
The image of the Hero slides is usually displayed in display mode 'contain' (1). It scales, while maintaining the aspect ratio, to the full width of the slide.
Since ThemeWare® 2.1 you have the option of defining yourself whether the display mode should change to 'cover' (2) and if so, from which viewport. In the display mode 'cover' you must also configure the minimum height (3) of the slide. This determines the height of the slide and the image fills the slide while maintaining its aspect ratio. If necessary, the image is cropped (4) to fit.
The text in the Hero slides usually overlays the image. In smaller viewports, this may no longer fit perfectly, especially with long texts, so the text is displayed below the image on mobile devices.
Since ThemeWare® 2.1 you have the option to define yourself whether the text should be displayed on top of the image, and if so, from which viewport.
You can find some examples of use in our demo shops:
Columns
Note: This article is work in progress.
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.
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:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Klicke auf das gewünschte Platzhalter-Element (2) um ein neues CMS-Element auszuwählen
Es öffnet sich das Pop-up "Element auswählen"
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:
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.
<div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
<div class="cms-element-twt-modern-teaser element ...">
...
[data-cms-element-id="019762d3f5ac74cd97043411f86aec36"] {
/* Custom styles here */
}
Configure ThemeWare® CMS element
Tip: Make sure that all mandatory fields "*" are filled in, otherwise you will not be able to save the Shopping Experience. ThemeWare® shows you all mandatory fields with a small blue asterisk behind the field name.
Note: With Shopware 6.5, an HTML sanitizer has been implemented. This sanitizer improves security, reliability and usability of the editor by removing unsafe HTML code.
It also sanitizes styles and attributes for consistent and correct code rendering regardless of platform and browser. (see HTML sanitizer)
General information
SEO & Pagespeed settings
Tip: You can define the "alt text" and the "title" attribute of images in Shopware 6 in the media manager.
Pagespeed
Advanced Mode
Note: The additional fields in Advanced Mode are intended for users who want more control over the appearance of a CMS element.
Advanced settings
CSS classes
Expert settings
Note: You can find more information on how to use these in the ThemeWare® Knowledge Base in the "Profi knowledge" section.
Style CMS element individually
Note: For ThemeWare® CMS elements, you can also find the automatically generated element ID directly in the element’s configuration under the "Advanced" tab. This allows you to avoid manually inspecting the HTML markup in the storefront.
In the section "Headline" you can configure the font and text colour for the headline (4).
Text
In the section "Text" you can configure the font and text colour for the text (5).
Button
In the section "Button" you can configure the button style (the colour) and determine whether the button (6) should be filled or represented as an outline button.
Content overlay
In the section "Content overlay" you configure the overlay (2). Here you can configure the horizontal alignment and the vertical alignment of the overlay. You can also select a fade-in animation and set the width (e.g. 100%) and the maximum width (e.g. 50%) for the overlay. Additionally, you can configure the overlay sizing and select a backdrop effect (e.g. Blur).
With the configuration "Apply overlay styling" you can activate configuration fields for styling the overlay. Here you can set the background colour, select a box shadow and rounded corners.
Colour overlay
In the section "Colour overlay" a colour overlay can be activated and configured.
Configuration
General
Note: The text area is HTML-capable. However, links <a> should not be used if the configuration "Entire element clickable" is used, as this interferes with the actual linking of the slide.
Layout
Note: Please note that the theme variables are not available in the administration. The button colour of the preview is replaced by the corresponding theme colour in the storefront.
Responsive
Slide
Important: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information: Autoplay and accessibility
You can place almost any CMS element in most CMS blocks. An example of this is the ThemeWare® grid and column blocks.
However, there are also CMS blocks in which the CMS element cannot be exchanged (e.g. the ThemeWare® "Subcategory navigation") and CMS elements that only work in a particular CMS blocks (e.g. the ThemeWare® "Hero slider" elements).
In addition to universal CMS blocks, there are also universal CMS elements. These work in almost all CMS elements (e.g. the ThemeWare® "Teaser" elements).
As a CMS element does not have to belong to a CMS block and vice versa, we generally speak of "CMS extensions". And the nice thing about the ThemeWare® CMS extensions is that you don't need any other plug-ins or apps! You get everything directly with your ThemeWare® theme.
If you want to configure an alternative language in a CMS element, as usual in Shopware 6 you can simply change the language at the top right in the editor of the corresponding Shopping Experience.
Shopping Experience: Switch language
Stand: Shopware 6.5.x
Die CMS-Blöcke bzw. CMS-Element erhältst du mit entsprechenden ThemeWare®-Updates. Es gibt keine spezielle Update-/Installationsroutine in ThemeWare® – Shopware 6 regelt dies automatisch.
Sollten die CMS-Blöcke bzw. CMS-Elemente nicht im Erlebniswelt-Editor erscheinen, leere bitte einmal den Shopware- sowie die Browser-Cache vollständig. Hilft dies nicht, deaktiviere (nicht deinstallieren!) ThemeWare® einmal und aktiviere es danach wieder.
Grundsätzlich werden die CMS-Blöcke bzw. CMS-Elemente beim Aktivieren von Themes hinzugefügt bzw. werden beim Deaktivieren wieder aus der Administration entfernt.
Bei Theme-Updates aktualisieren sich die CMS-Blöcke bzw. CMS-Elemente ggf. automatisch.
Das Deaktivieren von Themes entfernt lediglich die CMS-Blöcke bzw. CMS-Elemente aus der Erlebniswelt, aber nicht aus der Datenbank.
Die Deinstallation von Themes löscht derzeit keine Daten von CMS-Blöcken bzw. CMS-Elementen aus der Datenbank. Auch die Option "Alle App-Daten endgültig entfernen" hat derzeit keinen Einfluss.
Wichtig: CMS-Blöcke bzw. CMS-Elemente sollten vor dem "Deaktivieren" von ThemeWare® aus allen CMS-Seiten entfernt werden damit sie nicht "leer" in der Storefront dargestellt werden!
Further information and basics about "Shopware 6 Shopping Experiences" can be found in the ThemeWare® Knowledge Base:
Note: The CMS extensions in the administration are part of the ThemeWare® improvements to the administration and are therefore only available in the Pro Edition.
Tip: If you have further ideas or wishes for existing or new blocks, please send us your suggestions for improvement via our Service Portal.
ThemeWare® CMS extensions
Note: Due to technical limitations in the Shopware app system, most CMS extensions are currently only available in the Pro Edition.
Multilingual
Note: This article is work in progress.
Installation/Updates/Deinstallation
Installation
Updates
Deaktivieren
Deinstallation
Hinweis: Nutzt du mehr als ein ThemeWare®-Theme in deinem Shop, gibt es jeden CMS-Block bzw. jedes CMS-Element nur einmal in der Administration auch wenn diese mehrfach angezeigt werden. Die Blöcke bzw. Elemente funktionieren dann solange, bis du das letzte ThemeWare®-Theme deaktivierst.
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.
Important: This block is only available in the ThemeWare® Pro Edition.
Listing page
Note: This article is work in progress.
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.
Hinweis: Mehr zu den ThemeWare® Elementen für Kategorien findest du hier:
Available blocks
Listing subcategories
Listing subcategories (Modern)
Important: These blocks are available only in the ThemeWare® Pro Edition.
Add block
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® Kategorieseite" [Pro]
With data mapping you can dynamically populate fields of a CMS element with data from the current page entity (e.g. category). For example, a teaser on a category page automatically displays the category image and category name - without manual input.
Important: This feature is only available in the ThemeWare® Pro Edition.
How to use
Assign data mapping
Open the Shopping Experience of a category page in the CMS editor
Add a supported CMS element (e.g. a teaser)
In the element configuration, click the "Data mapping" (1) button on the desired field
Select the desired entity property (2 – e.g. category.name for the category name)
Save the Shopping Experience
The field will now automatically be populated with data from the respective category on each category page.
If data has been assigned, a corresponding note (3) will be displayed in the element configuration instead of the configuration itself.
You can remove the assignment at any time by clicking the "Remove data mapping" button (4).
We’ve made data mapping available in as many CMS elements as possible. The only exceptions are elements that already need to be linked and where dynamic data mapping wouldn’t add any value.
There are also a few edge cases — for example teasers with buttons or banners that would generally be expected to link somewhere. In those cases, we’d like to leave a bit of room for your own judgment: not every element has to use data mapping if it simply doesn’t make sense in that particular situation.
CMS element
Image
Headline/Title
Text
CMS element
Image
Headline/Title
Text
CMS element
Image
Headline/Title
Text
Data mapping only works on pages with an assigned entity (e.g. category or product pages)
On static Shopping Experiences (e.g. landing pages) no entity is available - the fields remain empty
Fields with active data mapping cannot be manually populated at the same time
x
Hero teaser
x
x
x
Hover box
x
x
x
Image teaser
x
Modern teaser
x
x
Round teaser
x
x
Teaser
x
x
Text teaser
x
x
Text teaser (decorated)
x
x
x
x
Image banner
x
Parallax banner
x
x
The "Data mapping" button is only visible when the Shopping Experience is assigned to a page type with an entity (e.g. category or product pages)
Advanced teaser
x
x
x
Classic teaser
Advanced banner
x
x
x
Hero banner
Image & text layered
x
x
x
Tip: You can also select custom fields from the drop-down menu (depending on the CMS layout type).
Remove data mapping
Supported elements and fields
Teaser
Banner
Other
Tip: Using custom fields
In addition to standard properties (e.g. product.name or category.media), you can also map ThemeWare® custom fields via data mapping. For example, you can use the short description instead of the standard product description.
Limitations
x
x
Grid 'Four'
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Four'
Important: This block is only available in the ThemeWare® Pro Edition.
Grid 'Three' (swapped)
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Three' (swapped)
Important: This block is only available in the ThemeWare® Pro Edition.
