Important: This block is only available in the ThemeWare® Pro Edition.
Subcategory navigation (Sidebar)
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:
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.
Action buttons (Wishlist, "My Account", Shopping cart)
Top bar (Language selection, Currency selection, Service menu)
Top navigation
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.
News and announcements
Grid 'Two'
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Two'
Important: This block is only available in the ThemeWare® Pro Edition.
Grid 'Two' (swapped)
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Two' (swapped)
Important: This block is only available in the ThemeWare® Pro Edition.
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.
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.
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 'Four' (swapped)
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Four' (swapped)
Important: This block is only available in the ThemeWare® Pro Edition.
Grid 'Five'
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Five'
Important: This block is only available in the ThemeWare® Pro Edition.
Grid 'Five' (swapped)
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Five' (swapped)
Important: This block is only available in the ThemeWare® Pro Edition.
Grid 'Six'
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Six'
Important: This block is only available in the ThemeWare® Pro Edition.
Grid 'Six' (swapped)
Note: This article is work in progress.
ThemeWare® CMS block Grid 'Six' (swapped)
Important: This block is only available in the ThemeWare® Pro Edition.
Text & images
Note: This article is work in progress.
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.
Hinweis: Mehr zu den ThemeWare® "Text & Bild"-Elementen findest du hier:
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.
Enter your email address in the form.
Choose your Shopware 6 version (self-hosted or Cloud).
One column
Der ThemeWare® CMS-Block "Eine Spalte" (100%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
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.
Footer
ThemeWare® USP Bar
ThemeWare® Upper section
ThemeWare® Main section
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:
Highlights — the most important new features
Changes — all further adjustments
Two columns, 7-5
Der ThemeWare® CMS-Block "Zwei Spalten, 7-5" (ca. 58.333% | ca. 41.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
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
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.
Banner
Die ThemeWare® Banner-Blöcke selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.
Image-Banner
Parallax-Banner
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
Hero slider (3x)
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.
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:
Two columns, 5-7
Der ThemeWare® CMS-Block "Zwei Spalten, 5-7" (ca. 41.667% | ca. 58.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
Two columns, 8-4
Der ThemeWare® CMS-Block "Zwei Spalten, 8-4" (ca. 66.667% | ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
Two columns, 3-9
Der ThemeWare® CMS-Block "Zwei Spalten, 3-9" (25% | 75%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
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.
Find the desired add-on in the Add-ons tab.
Dashboard
The ThemeWare® Dashboard gives you all important information, setup guides, and quick access links at a glance.
The tile bar takes you straight to the most important areas and resources:
Knowledge base — guides, tutorials and expert knowledge
ThemeWare® Utilities — free extras (opens the )
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:
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:
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:
Two columns
Der ThemeWare® CMS-Block "Zwei Spalten" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
Three columns
Der ThemeWare® CMS-Block "Drei Spalten" (jeweils ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
Three columns, 2-2-8
Der ThemeWare® CMS-Block "Drei Spalten, 2-2-8" (ca. 16.667% | ca. 16.667% | ca. 66.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
Three columns, 2-8-2
Der ThemeWare® CMS-Block "Drei Spalten, 2-8-2" (ca. 16.667% | ca. 66.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
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:
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:
Three columns, 6-3-3
Der ThemeWare® CMS-Block "Drei Spalten, 6-3-3" (50% | 25% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
Three columns, 8-2-2
Der ThemeWare® CMS-Block "Drei Spalten, 8-2-2" (ca. 66.667% | ca. 16.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
Four columns
Der ThemeWare® CMS-Block "Vier Spalten" (jeweils 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
You can find some examples of use in our demo shops:
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:
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:
Six columns (Custom)
Der ThemeWare® CMS-Block "Six columns (Custom)" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
This block can consider the expert configuration "CSS class (Column)" of certain CMS elements.
You can find more information about the CSS classes: in the ThemeWare® Knowledge Base:
You can find some examples of use in our demo shops:
Will follow...
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.
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.
Grid 'One'
Der ThemeWare® CMS-Block "Grid 'One'" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
Die kleinen Bild-Elemente haben eine minimale Höhe von 320 px.
Grid 'One' (swapped)
Der ThemeWare® CMS-Block "Grid 'One' (getauscht)" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
Die kleinen Bild-Elemente haben eine minimale Höhe von 320 px.
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)
Listing page
Die ThemeWare® CMS-Blöcke für Kategorieseiten selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.
Listing subcategories
Listing subcategories (Modern)
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.
Product name (without manufacturer logo)
Der ThemeWare® CMS-Block "Produktname (ohne Hersteller-Logo)" ist eine Variante vom Shopware CMS-Block "Produktname & Hersteller-Logo" nur ohne Hersteller-Logo.
Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.
Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.
You can find some examples of use in our demo shops:
Image gallery and buy box (with product name)
Der ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname)" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen über der Buybox dar.
Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.
Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.
You can find some examples of use in our demo shops:
Image gallery and buy box (with product name & manufacturer logo)
Der ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname & Hersteller-Logo)" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen samt Hersteller-Logo über der Buybox dar.
Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.
Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.
You can find some examples of use in our demo shops:
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.
Hinweis
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.
Hero countdown
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:
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...
Countdown banner (compact)
Der ThemeWare® CMS-Block "Countdown banner (compact)" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
...
You can find more information about the CMS element here:
You can find some examples of use in our demo shops:
Demo to follow...
Discount banner
Der ThemeWare® CMS-Block "Discount banner" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
...
You can find more information about the CMS element here:
You can find some examples of use in our demo shops:
Demo to follow...
Breadcrumb navigation
Der ThemeWare® CMS-Block "Breadcrumb-Navigation" ist eine Variante vom Shopware CMS-Block "Breadcrumb-Navigation".
Der CMS-Block hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
You can find more information about the CMS element here:
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]
Testimonial (Customer review)
Der ThemeWare® CMS-Block "Testimonial (Kundenrezension)" hat keine spezielle Funktion und dient lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.
Du musst diesen CMS-Block nicht unbedingt nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
You can find more information about the CMS element here:
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]
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]
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]
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:
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:
How to request
The Utilities include, among other things, a ready-made shopping experience that you install in seconds thanks to one-click import.
Footer elements are "slots" in the columns of the footer areas. You can fill these footer elements with ThemeWare® widgets.
ThemeWare® Footer elements
ThemeWare® "Newsletter" widget
Service hotline
Footer navigation
ThemeWare® "Benefits" widget
ThemeWare® "Shipping methods" widget
ThemeWare® "Payment methods" widget
ThemeWare® "Location or Store" Widget
ThemeWare® "Awards, seals or certificates" widget
ThemeWare® "About Us" widget
ThemeWare® "Communities or Social Media" widget
ThemeWare® Footer
Footer elements
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.
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.
Die beiden großen Bild-Element haben eine minimale Höhe von 640 px.
Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.
You can find some examples of use in our demo shops:
Note: This article is work in progress.
Important: This block is only available in the ThemeWare® Pro Edition.
Standard-Einstellungen
ThemeWare® CMS block Grid 'Modern'"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
Die beiden großen Bild-Element haben eine minimale Höhe von 640 px.
Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.
Note: This article is work in progress.
Important: This block is only available in the ThemeWare® Pro Edition.
Standard-Einstellungen
ThemeWare® CMS-Block "Grid 'Modern' (getauscht)"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.
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:
Note: This article is work in progress.
Important: This block is only available in the ThemeWare® Pro Edition.
Standard-Einstellungen
ThemeWare® CMS block "Grid 'One'"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
Demo
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:
Note: This article is work in progress.
Important: This block is only available in the ThemeWare® Pro Edition.
Standard-Einstellungen
ThemeWare® CMS block "Grid 'One' (swapped)'"
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "") modifizieren.
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.
Add category teaser 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]
Add a block
Note: This article is work in progress.
Hinweis: Mehr zu den ThemeWare® Elementen für Kategorien findest du hier: Listing page
Available blocks
Important: These blocks are available only in the ThemeWare® Pro Edition.
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.
Listing (CMS block "Three columns, product boxes" from Shopware)
Product listing actions
CMS block "Image, boxed"
CMS block "Category navigation"
CMS block "Text"
Product image (cover image)
Product rating
Product name
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.
Why add-ons?
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.
Available add-ons
Backup Manager
Save, transfer and directly edit your theme configuration. File export, guided import with automatic pre-backup safeguard and an inline JSON editor with live validation and change counter.
CMS element for category and landing pages: present multiple subcategories together with their direct subcategories in a clean card or list layout.
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.
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! 💙
Teaser
Note: This article is work in progress.
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.
Hinweis: Mehr Informationen zu den ThemeWare® Teaser-Elementen findest du hier:
Available teaser blocks
Text-Teaser
Text-Teaser (verziert)
Button-Teaser
Call-to-Action
Hover-Box
Image-Teaser
Hero-Teaser
Advanced-Teaser
Classic-Teaser
Modern-Teaser
Runder Teaser
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Teaser-Blöcke findest du in der Rubrik "ThemeWare® Allgemein" [Pro]
In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.
Für die ThemeWare® Teaser-Blöcke sind folgende CSS-Klassen besonders interessant:
Hero slider
Note: This article is work in progress.
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.
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Den "Hero-Slider" findest du in der Rubrik "ThemeWare® Allgemein" [Pro]
The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can enable this feature via the theme configuration.
In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.
Da der ThemeWare® "Hero-Slider" (ab ThemeWare® 2.0) auf dem Bootstrap 5 Carousel () basiert, sind folgende CSS-Klassen besonders interessant:
Füge die CSS-Klasse carousel-fade dem Block hinzu, um Slides mit einem Fade-Übergang anstelle eines Slides zu animieren.
Füge die CSS-Klasse carousel-dark dem Block hinzu, um Steuerelemente dunkler zu gestalten.
The controls of the "Hero Slider" have a drop shadow for optimal visibility. This is especially helpful if the colour of the images in the slider varies significantly. If you don't want the drop shadows, simply add the CSS class flat-controls to the corresponding block.
You can find some examples of use in our demo shops:
Teaser
Note: This article is work in progress.
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.
Füge den CMS-Block des gewünschten Teaser-Elementes einfach per Drag’n’Drop deiner Erlebniswelt hinzu.
Mehr Informationen dazu findest du in der folgenden Anleitung:
Note: You can find the teaser blocks in the "ThemeWare® General" section [Pro]
Tausche alternativ ein bestehendes CMS-Element in einem CMS-Block gegen das gewünschte Teaser-Element aus.
Mehr Informationen dazu findest du in der folgenden Anleitung:
Welcome
Welcome to the ThemeWare® Manual and thank you for choosing ThemeWare®!
The ThemeWare® documentation for Shopware 6 is based on 3 "pillars":
The Service Portal
The Service Portal is always the first place to go for all your ThemeWare® needs. It is your personal dashboard for ThemeWare®.
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.
Confirm the purchase — the add-on is active immediately.
How the purchase works
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.
ThemeWare® Sidebar Widget (content "Communities or Social Media")
Variant characteristics
Cheapest price
Wishlist button
Product description
Price unit
Action buttons (Buy button / Details button)
Discount badge
Top-seller badge
Product price
List price
ThemeWare® Free shipping badge
ThemeWare® Stock badge (with sufficient stock)
ThemeWare® Stock badge (with low stock)
Sidebar
Product boxes
ThemeWare® Category pages: Sidebar
ThemeWare® Category pages: Product boxes
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.
Use cases
Save and restore
Transfer between themes or shops
Direct editing
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
Note: These blocks are available only in the ThemeWare® Pro Edition.
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.
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.
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
In the Variants tab in the Hub, you can filter the overview by:
Top sellers — the five best-selling variants
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).
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.
Design variants
15 looks for your shop
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.
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
Allows manual CSS class input per column (e.g. col-12 col-md-6
With the "Advanced configuration" toggle you can set column arrangement and visibility individually for each viewport.
Not all CMS blocks support all areas of the block configuration. The following overview shows which block types offer which configuration areas:
Symmetric column blocks such as "Two columns", "Three columns", "Four columns" and "Six columns" support:
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Spalten-Blöcke findest du in der Rubrik "ThemeWare® Grids" [Pro]
Aufgrund des fluiden Webdesigns von Shopware 6 gibt es keine "perfekte" oder "richtige" Bildgröße. Die Größe der einzelnen Elemente ist variabel und abhängig vom verfügbaren Platz den die Elemente haben. Der verfügbare Platz unterliegt diversen Faktoren wie dem konfigurierbaren Padding des Blocks, der konfigurierbaren Container-Breite, dem Darstellungsmodus der Erlebniswelt und natürlich durch die Fensterbreite selbst in verschiedenen Viewports bestimmt. Dadurch kann es nicht den einen Wert geben.
Wir empfehlen daher für Bild-Elemente in Grid-Blöcken den Darstellungsmodus "Füllen". Dabei wird das Bild so skaliert und ggf. abgeschnitten, dass der Bild-Container immer vollständig ausgefüllt ist. Die Größe der Elemente selber kannst du über die Konfiguration "Minimale Höhe" definieren, mehr Informationen dazu findest du im folgenden Abschnitt.
Als Bild-Elemente kannst du die Teaser von ThemeWare® in den Grids nutzen. (Das Bild-Element von Shopware funktioniert ebenfalls.)
Die Größe der Elemente definierst du über die Konfiguration "Minimale Höhe" im Modus "Füllen" der entsprechenden Elemente. Damit Grids gut funktionieren ist hier etwas Mathematik nötig: Die "Minimale Höhe" der Elemente auf der linken Seite sollte in Summe dieselbe Höhe haben wie die Summe der "Minimale Höhe" aller Elemente auf der rechten Seite. Addiere etwaige Lücken (Standard: 40px) zwischen den Elementen noch dazu.
In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.
Für die ThemeWare® Grid-Blöcke sind folgende CSS-Klassen für die Abstände der Elemente im Block interessant:
You can find some examples of use in our demo shops:
Text teaser
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).
Subtitle
In the tab "SEO & Pagespeed" you can configure the HTML tag for the title or subtitle and the "Lazy loading" of the image.
You can select each HTML element of our teasers using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.
On category and product pages, the following fields can be dynamically mapped from the current category or product:
Image - e.g. category image or product image
Title - e.g. category name or product name
You can find some examples of use in our demo shops:
Text teaser (decorated)
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).
Layout
In the tab "SEO & Pagespeed" you can configure the HTML tag for the title and the "Lazy loading" of the image.
You can select each HTML element of our teasers using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.
On category and product pages, the following fields can be dynamically mapped from the current category or product:
Image - e.g. category image or product image
Title - e.g. category name or product name
You can find some examples of use in our demo shops:
CMS extensions
With ThemeWare® 0.5.0 we have released our major CMS update and with it our first ThemeWare® CMS extensions. All CMS extensions were selected and developed with a focus on sales promotion and customisability. The many layout options speak for themselves.
We have put an huge amount of passion into every single CMS extension and are really proud of them. We are therefore particularly pleased about the positive feedback. Thank you very much!
From a technical point of view, there are unfortunately a few technical limitations on the part of Shopware at the moment, but Shopware is already working on fundamental improvements - also with regard to the possibility of being able to provide CMS extensions in the Shopware 6 Cloud.
As soon as it is possible, we will revise our CMS extensions and make them available in the cloud edition as well. Unfortunately, we cannot say when this will be the case at the moment.
We continue to work continuously on new CMS extensions and on improvements to existing CMS extensions. So you can look forward to much more.
CMS blocks
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.
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"
Hero slider
Die ThemeWare® Hero slider elements (slides) sind explizit für die Verwendung im CMS-Block "Hero slider (...)" (siehe ) vorgesehen. Die Elemente sind nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktionieren nicht in anderen CMS-Blöcken.
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.
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 known Shopware limitation that we cannot resolve automatically right now.
You have two easy ways to remove the background image in the new theme:
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.
Take over configuration (Migration)
Note: The flyout cards are still in development. We welcome your constructive feedback.
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 Backup tab 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.
). The expert mode overrides the column arrangement and visibility configuration.
Advanced configuration
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.
Configuration
General
Layout
SEO & Pagespeed
Advanced
Data mapping (coming soon)
Demo
Configuring the ThemeWare® "Text teaser"
Elements of the "Text teaser"
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)"
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.
CMS block
CMS element
Replace element
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:
Tip: If you have further ideas or wishes for existing or new blocks, please send us your 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.
Further information
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
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:
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: Hero slider
Note: You can find the "Hero slider" blocks in the "ThemeWare® General" section [Pro]
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.
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.
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:
In this section of the documentation you will find all the ThemeWare® CMS elements that you can add to CMS blocks.
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!
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 .
Data mapping
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.
Open the Shopping Experience of a category page in the CMS editor
Add a supported CMS element (e.g. a teaser)
Call-to-Action slide (Hero slider)
The ThemeWare® CMS element "Call-to-Action slide (Hero slider)" is explicitly intended for use in the CMS block "Hero slider (...)". The CMS element is not designed for use in other CMS blocks and does not work in other CMS blocks.
You can configure the ThemeWare® CMS element "Call-to-Action slide (Hero slider)" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Text slide (Hero slider)
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.
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"
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"
Call-to-Action
The ThemeWare® "Call-to-Action" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.
You can configure the ThemeWare® "Call-to-Action" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hero teaser
The ThemeWare® "Hero teaser" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.
You can configure the ThemeWare® "Hero teaser" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Hover box
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.
You can configure the ThemeWare® "Hover box" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
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
The "Element Settings" pop-up will open (2)
Make the desired changes
Save your changes
Configure or edit CMS element
CMS element settings
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.
Shopping Experience: Switch language
Further information and basics about "Shopware 6 Shopping Experiences" and "CMS elements" can be found in the ThemeWare® Knowledge Base:
ThemeWare® CMS elements
Tip: If you have further ideas or wishes for existing or new blocks, please send us your suggestions for improvement 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.
<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 )
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 "" 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.
Multilingual
Further information
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
Advanced teaser
x
x
x
Classic teaser
CMS element
Image
Headline/Title
Text
Advanced banner
x
x
x
Hero banner
CMS element
Image
Headline/Title
Text
Image & text layered
x
x
x
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
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)
Important: This feature is only available in the ThemeWare® Pro Edition.
How to use
Assign data mapping
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
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
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.
Configuring the ThemeWare® "Call-to-Action slide"
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 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.
Elements of the "Call-to-Action slide"
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.
Disply mode 'contain'
Disply mode 'cover'
Disply mode 'cover' in detail
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.
Text below the image
Text overlays the image
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® "Call-to-Action slide (Hero slider)"
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:
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® "Text slide" konfigurieren
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 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.
Elements of the "Text slide"
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.
Disply mode 'contain'
Disply mode 'cover'
Disply mode 'cover' in detail
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.
Text below the image
Text overlays the image
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® "Text slide (Hero slider)"
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:
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
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.
Configuring the ThemeWare® "Call-to-Action"
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 "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.
Elements of the "Call-to-Action"
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:
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
ThemeWare® "Call-to-Action"
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
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® "Hero teaser"
The configuration of the "Hero teaser" is quite self-explanatory. The text, the image and the "Minimum height" are mandatory fields. That's all you really need to configure.
In the tab "General" you configure the content of the element.
Content
In the section "Content" you can enter the headline (2), the text (3) and the button text (4) for the banner. The text is a mandatory field.
Image
In the section "Image" you define the background image of the banner. The "Minimum height" is a mandatory field (default: 340px).
Link
In the section "Link" you define the target of the banner when it is clicked.
In the "Layout" tab, you can configure the overlay (2), the headline (2), the text (3), the button (4), the scroll behaviour of the image (1), a parallax effect and a coloured overlay (1). You can also configure the alignment of the text content.
General
In the section "General" you can configure the general background colour (1).
Content
In the "Content" section you can configure the desired text alignment.
Headline
In the "Headline" section you can configure the font, the font weight, the text formatting and the text colour of the headline (2).
Text
In the "Text" section you can configure the font, the text colour and link colours of 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 horizontal alignment and the vertical alignment as well as the width (e.g. auto or 90%) and the maximum width (e.g. 90% or 740px) of the "Content 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 (1) can be activated and configured.
Elements of the "Hero teaser"
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
Note: This article is work in progress.
Beta: This feature is currently in beta and may change in a future release. – We'd love to hear your feedback.
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
ThemeWare® "Hero teaser"
Configuration
General
Layout
SEO & Pagespeed
Advanced
Data mapping (coming soon)
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.
Configuring the ThemeWare® "Hover box"
The configuration of the "hover box" is quite self-explanatory. The text and the image are mandatory fields. That's all you really need to configure.
In the tab "General" you configure the content of the element.
Content
In the section "Content" you can enter the headline (3) and the text (4) for the teaser. The text is a mandatory field.
Image
In the section "Image" you define the background image (1) of the teaser. This is a mandatory field.
Link
In the section "Link" you define the target of the teaser when it is clicked.
In the tab "Layout" you can configure the overlay (2), the text (3, 4) in the overlay and the hover effect of the overlay.
General
In the section "General" you can configure the general background colour (1).
Content
In the "Content" section you can select the desired text alignment.
Headline
In the "Headline" section you can configure the font and text colour for both the headline (3).
Text
In the "Text" section you can configure the font and text colour for the text (4).
Layout
In the 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.
Elements of the "Hover box"
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:
Important: This element is only available in the ThemeWare® Pro Edition.
Configure element
ThemeWare® "Hover box"
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.
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 section "Coloured overlay" a
In the tab "SEO & Pagespeed" you can configure the "Lazy loading" of the image.
You can select each HTML element of our teasers using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.
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:
