# Welcome

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

{% hint style="info" %}
**Note**: Please note that the manual is currently a work in progress and we are still completing and translating it.
{% endhint %}

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

1. The **Service Portal**
   * The Service Portal is always the **first place to go** for all your ThemeWare® needs. It is your personal dashboard for ThemeWare®.
   * 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.
   * You can find the Service Portal here: [service.themeware.design/en](https://service.themeware.design/en)
2. The **ThemeWare® Knowledge Base**
   * 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: [knowledge.themeware.design](https://knowledge.themeware.design/)
3. The **ThemeWare® Manual**
   * In the ThemeWare® Manual you will find information about all the **features** and **functions** of ThemeWare®.
   * You can find the ThemeWare® Manual here: [docs.themeware.design](https://docs.themeware.design)

## The ThemeWare® Manual

The **ThemeWare® Manual** is the complete reference for all ThemeWare® configurations and features.

{% hint style="info" %}
**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. 🚀
{% endhint %}

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.

### Structure of the ThemeWare® configuration

The theme configuration is divided into 4 elements:

1. Tabs in the tab navigation
2. Blocks in each tab (accordion elements to expand)
3. Sections that divide a block
4. Configuration fields in the individual sections

![Structure of the ThemeWare® configuration](/files/XOZP57LpkAP7FZ2Gi1kd)

### Structure of the ThemeWare® Manual

In diesem Handbuch haben wir diese 4 Elemente wie folgt dargestellt:

1. Tabs
2. Blocks
3. Sections
4. Configuration fields

<figure><img src="/files/SqJIoWrSgqbXbM6tAs5s" alt=""><figcaption><p>Structure of the ThemeWare® Manual</p></figcaption></figure>


# Elements of the storefront

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](https://config.themeware.design/en) even more easily. We also recommend our [ThemeWare® Lexicon](https://knowledge.themeware.design/more-knowledge/lexicon) in the ThemeWare® Knowledge Base.

## Overview

* [Header](/manual/header)
* [Footer](/elements-in-the-storefront/footer)
  * [Footer](/elements-in-the-storefront/footer#footer-elements)
* [Category pages](/elements-in-the-storefront/category-pages)
  * [Category pages](/elements-in-the-storefront/category-pages#sidebar)
  * [Category pages](/elements-in-the-storefront/category-pages#produkt-boxen)
* [Product pages](/elements-in-the-storefront/product-pages)
  * [Product pages](/elements-in-the-storefront/product-pages#galerie)
  * [Product pages](/elements-in-the-storefront/product-pages#buybox)


# Header

![ThemeWare® Header](/files/phcSxJNtNSmCAeKDUS64)

1. ThemeWare® USP Bar
2. ThemeWare® Announcement Banner
3. Shop logo
4. Search
5. Action buttons (Wishlist, "My Account", Shopping cart)
6. Top bar (Language selection, Currency selection, Service menu)
7. Top navigation


# Footer

![ThemeWare® Footer](/files/SwqwpsUclbBKqJp0xSOt)

1. ThemeWare® USP Bar
2. ThemeWare® Upper section
3. ThemeWare® Main section
4. ThemeWare® Lower section
5. Logos footer
6. Copyright footer
7. "Scroll-Up" button

## Footer elements

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

![ThemeWare® Footer elements](/files/vH4oGe7jrUuwOxrsgNDx)

1. ThemeWare® "Newsletter" widget
2. Service hotline
3. Footer navigation
4. ThemeWare® "Benefits" widget
5. ThemeWare® "Shipping methods" widget
6. ThemeWare® "Payment methods" widget
7. ThemeWare® "Location or Store" Widget
8. ThemeWare® "Awards, seals or certificates" widget
9. ThemeWare® "About Us" widget
10. ThemeWare® "Communities or Social Media" widget


# Category pages

![ThemeWare® Category pages](/files/9xb1x1o35WrsnkB36ElT)

1. [#sidebar](#sidebar "mention") <mark style="color:orange;">(CMS layout with sidebar)</mark>
2. Listing <mark style="color:orange;">(CMS block "</mark><mark style="color:orange;">**Three columns, product boxes**</mark><mark style="color:orange;">" from Shopware)</mark>
3. Product listing actions

## Sidebar <a href="#sidebar" id="sidebar"></a>

![ThemeWare® Category pages: Sidebar](/files/Q5sHLRzc8dvYHeZIH3fR)

1. CMS block "Image, boxed"
2. CMS block "Category navigation"
3. CMS block "Text"
4. CMS block "Product filter"
5. ThemeWare® Sidebar Widget (content "Benefits")
6. ThemeWare® Sidebar Widget (content "Communities or Social Media")

## Product boxes <a href="#produkt-boxen" id="produkt-boxen"></a>

![ThemeWare® Category pages: Product boxes](/files/45MNvbEGK0KJelYgBxn6)

1. Product image (cover image)
2. Product rating
3. Product name
4. Variant characteristics
5. Cheapest price
6. Wishlist button
7. Product description
8. Price unit
9. Action buttons (Buy button / Details button)
10. Discount badge
11. Top-seller badge
12. Product price
13. List price
14. ThemeWare® Free shipping badge
15. ThemeWare® Stock badge (with sufficient stock)
16. ThemeWare® Stock badge (with low stock)


# Product pages

![ThemeWare® Product pages](/files/nv6LKid5Gm5qP7boz0fl)

1. Breadcrumb
2. <mark style="color:orange;">CMS block "</mark><mark style="color:orange;">**Product name & manufacturer logo**</mark><mark style="color:orange;">" from Shopware</mark>
3. Product name
4. Manufacturer logo
5. <mark style="color:orange;">CMS block "</mark><mark style="color:orange;">**Gallery and Buybox**</mark><mark style="color:orange;">" from Shopware</mark>
6. [#galerie](#galerie "mention")
7. [#buybox](#buybox "mention")
8. <mark style="color:orange;">CMS block "</mark><mark style="color:orange;">**Product description & reviews**</mark><mark style="color:orange;">" from Shopware</mark>

## Gallery <a href="#galerie" id="galerie"></a>

![ThemeWare® Product pages: Gallery](/files/cruwEBz2dM97xHyK9XjW)

1. ThemeWare® Product badges
2. Product image
3. Arrow navigation
4. ThemeWare® "Picture similar to product" note
5. Dot navigation
6. Thumbnails

## Buybox <a href="#buybox" id="buybox"></a>

![ThemeWare® Product pages: Buybox](/files/5XfPas8Xj0y1FFOoppM4)

1. Price
2. Free shipping note
3. Variant selection ("Text" layout)
4. Variant selection ("Colour" layout)
5. Quantity selection and buy button

![ThemeWare® Product pages: Buybox](/files/QQGm4FfsOCPVQ33i7alR)

1. Discounted price (+list price)
2. ThemeWare® Stock label
3. ThemeWare® Individual announcement
4. ThemeWare® Payment logos on the product page
5. Product number + ThemeWare® Product specifications
6. ThemeWare® Sharing links


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

{% content-ref url="/pages/ihEfoxwz8G1QHODz8JYp" %}
[Backup Manager](/additional-features/add-ons/backup-manager)
{% endcontent-ref %}

### Nested subcategories

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

{% content-ref url="/pages/chJfYDax86Pnl6tNMw09" %}
[Nested subcategories](/additional-features/add-ons/nested-subcategories)
{% endcontent-ref %}

***

## How the purchase works

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

1. Click the desired add-on in the ThemeWare® Hub (tab "Add-ons" or "Variants").
2. Click "**Unlock →**" — Shopware's purchase modal opens.
3. 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.
4. Confirm the purchase — the add-on is active immediately.

**Billing:** Monthly, cancellable anytime, via your Shopware account.

{% hint style="info" %}
**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.
{% endhint %}

{% hint style="info" %}
**Support for purchases, licences and billing**\
For questions about purchases, licences, bookings or billing, please contact Shopware directly. We have no control over these.
{% endhint %}

#### Purchase modal

<figure><img src="/files/QWXSHjefjAtuqvOz4x4r" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/7myYONg5iyPddqjofSiR" alt=""><figcaption></figcaption></figure>

***

## Booked add-ons

Any add-ons you have purchased or booked will be marked accordingly.

<figure><img src="/files/8bbFKDj3vbxtg4k1eqSv" alt=""><figcaption></figcaption></figure>

You can cancel them by removing the licence from your Shopware account (Merchant → Shops → \[Your Shop] → Licences).

{% hint style="info" %}
**Support for purchases, licences and billing**\
For questions about purchases, licences, bookings or billing, please contact Shopware directly. We have no control over these.
{% endhint %}

***

## Included add-ons

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.

{% content-ref url="/pages/aFKwAqgQNr67IaKWh50D" %}
[Design variants](/additional-features/add-ons/design-variants)
{% endcontent-ref %}

***

## Support & Sponsorship

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


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

{% hint style="warning" %}
**Important**: The Backup Manager is an add-on and must be unlocked separately. [Why add-ons?](/additional-features/add-ons#why-add-ons)
{% endhint %}

## Theme configuration

### Export

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

**Step by step:**

1. Find the relevant theme in the backup tab.
2. Click "Export".
3. The browser downloads a file named `tcinn-<theme-name>-<date>.json`.

{% hint style="info" %}
**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.
{% endhint %}

### Import

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

1. In the backup tab, click "Import" on the target theme. The "Import theme configuration" modal opens.
2. In the modal, click "Download backup" (step 1). The current configuration is saved as a safety net.
3. Click "Choose file …" (step 2) and select the JSON file to import.
4. If the file is accepted, click "Import configuration".

The theme is recompiled automatically.

{% hint style="warning" %}
**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.
{% endhint %}

{% hint style="info" %}
**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.
{% endhint %}

{% hint style="info" %}
**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.
{% endhint %}

***

## Advanced mode

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

1. At the top of the backup tab, click "Activate advanced mode".
2. A JSON editor appears below each theme, showing its current configuration.
3. Before saving, click "Export" on the affected theme (backup is mandatory).
4. Edit the JSON.
5. Click "Save".

The theme is recompiled automatically.

{% hint style="danger" %}
**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.
{% endhint %}

{% hint style="info" %}
**Deactivate advanced mode**\
Use "Exit advanced mode" at the top of the page. The editors are hidden again — unsaved changes are lost.
{% endhint %}

***

## Use cases

Typical scenarios for the backup functions:

### Save and restore

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

### Transfer between themes or shops

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

### Direct editing

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


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

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><h4>Modern</h4></td><td>Clear, light design with restrained accents — modern all-rounder for lifestyle shops.</td></tr><tr><td><h4>Clean</h4></td><td>Clean and reduced — lots of whitespace for fashion, beauty and lifestyle.</td></tr><tr><td><h4>Strong</h4></td><td>Bold accents and striking typography — for confident brands.</td></tr><tr><td><h4>Outdoor</h4></td><td>Dark, rugged design — for outdoor, sports and travel shops.</td></tr><tr><td><h4>Living</h4></td><td>Warm, inviting look-and-feel — home, lifestyle, gifts.</td></tr><tr><td><h4>Bio</h4></td><td>Earthy-green design with a natural look — organic, eco, health food.</td></tr><tr><td><h4>Exquisite</h4></td><td>Elegant, dark design with a premium feel — jewellery, fashion, luxury goods.</td></tr><tr><td><h4>Bath</h4></td><td>Light, calm design with a soft look — wellness, beauty, bath.</td></tr><tr><td><h4>Lights</h4></td><td>Light, friendly design — lighting, electronics, tech.</td></tr><tr><td><h4>Electric</h4></td><td>Modern design with boxed layout — electronics, tech and gadgets.</td></tr></tbody></table>

***

## Included variants

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

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><h4>Bike</h4></td><td>Fresh, sporty green design — bike, e-bike and outdoor sport.</td></tr><tr><td><h4>Kids</h4></td><td>Playful, friendly design — toys, kids' fashion and baby products.</td></tr><tr><td><h4>Global</h4></td><td>Classic, powerful design with boxed layout — international, wholesale, industrial.</td></tr><tr><td><h4>Fit</h4></td><td>Energetic design with bold accents — fitness, supplements, workout.</td></tr><tr><td><h4>Plants</h4></td><td>Nature-inspired, dark green design — plants, garden, natural products.</td></tr></tbody></table>

***

## How the purchase works

Add-on variants cost €14.99 per month each, cancellable anytime. Purchases run through your Shopware account.

{% hint style="info" %}
**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.
{% endhint %}

{% content-ref url="/pages/L2oiduW4CdFXfrDvm16o" %}
[Add-ons](/additional-features/add-ons)
{% endcontent-ref %}

***

## Create a variant

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.

{% content-ref url="/pages/j3UAJRPn5IgSSsAjkiAI" %}
[Variants](/additional-features/hub/variants)
{% endcontent-ref %}


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

{% content-ref url="/pages/cDyOCANLKlfwmm2pNQvB" %}
[Nested subcategories](/additional-features/cms-extensions/cms-elements/listing-page/nested-subcategories)
{% endcontent-ref %}


# ThemeWare® Hub

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

The Hub bundles all functions into dedicated tabs:

* **Dashboard** — overview, setup assistant and quick access
* **Add-ons** — unlock optional features
* **Utilities** — request the free extras package
* **Variants** — create theme variants and take over configurations
* **Backup** — back up and restore your theme configuration
* **News** — news & announcements
* **Changelog** — version history & updates
* **Support** — help, guides & contact

***

## Access the ThemeWare® Hub

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

#### Main navigation

Content > ThemeWare® {Your theme}

<figure><img src="/files/S3edFsIyBpE1vyTfBv6N" alt=""><figcaption></figcaption></figure>

#### Shopware settings

Settings > Extensoins > ThemeWare® {Your theme} Dashboard

<figure><img src="/files/ekiAxKDKoUDwto1mdbyu" alt=""><figcaption></figcaption></figure>


# Dashboard

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

<figure><img src="/files/LXXjQZFEbAjhsWyy8MBc" alt=""><figcaption></figcaption></figure>

## Quick access

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

* **Knowledge base** — guides, tutorials and expert knowledge
* **ThemeWare® Utilities** — free extras (opens the [Utilities tab](/additional-features/hub/utilities))
* **Add-ons** — extensions for your setup (opens the [Add-ons tab](/additional-features/hub/add-ons))
* **Video tutorial** — step-by-step videos
* **Manual**, **News**, **Changelog** and **Submit idea** — documentation, updates and feedback

## Your first steps (setup assistant)

The setup assistant guides you through the most important steps; a progress bar shows how far you are:

1. **Plugin installed** — already done once the theme is active in your administration.
2. **Configure settings** — adjust the theme configuration for your sales channel.
3. **Get the free ThemeWare® Utilities package** — shopping experiences, 100+ logos and customising plugin.
4. **Personalise your shop** — adjust texts for the top bar, footer and social media.

You can expand each step and mark it as done, or hide the whole assistant via the **×**.

## Support & reviews

The sidebar offers:

* **Support & help** — direct access to the support chat and ticket creation.
* **What our users say** — reviews from other shop owners plus the option to leave a review yourself.

## More areas

At the bottom of the dashboard you'll find additional cards:

* **Remove footer notice** — request removal of the branding.
* **For agencies & partners** — priority support and partner programme.


# 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 [Add-ons overview](/additional-features/add-ons).

<figure><img src="/files/SXpfCaEgNah6VCFHw5Zt" alt=""><figcaption></figcaption></figure>

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

## Unlock an add-on

1. Find the desired add-on in the Add-ons tab.
2. Click "Unlock →" — Shopware's purchase modal opens.
   * **Please note**: You must have activated the "Shopware Extension Store" and linked your shop to your Shopware account in order to make in-app purchases.
3. Confirm the purchase in the modal.

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

For details on available add-ons, the purchase model and billing, see the [Add-ons overview](/additional-features/add-ons).

***


# Utilities

The ThemeWare® Utilities are a free package of extras for design, customisation and conversion. You request it once via a form and get instant access to all resources.

<figure><img src="/files/Ujo9Ps5uHxDCbnrBOnqt" alt=""><figcaption></figcaption></figure>

## How to request

1. Enter your **email address** in the form.
2. Choose your **Shopware 6 version** (self-hosted or Cloud).
3. Specify whether you are a **shop owner** or a **Shopware agency**.
4. 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.

{% hint style="info" %}
The Utilities include, among other things, a ready-made shopping experience that you install in seconds thanks to one-click import.
{% endhint %}

***

#### Further information

You can find further information about ThemeWare® Utilities in the ThemeWare® Service Portal:

{% embed url="<https://service.themeware.design/en/themeware-utilities>" %}


# Variants

Switch your shop's look with another variant or take over your customizations. Both functions create a duplicate — your existing theme stays untouched.

The variants tab shows all 15 ThemeWare® variants. Creating a variant produces a new theme duplicate in the look of the selected variant. Your existing theme of course stays untouched.

{% hint style="info" %}
**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.
{% endhint %}

<figure><img src="/files/fCv3hUfEA915Q0YKmyht" alt=""><figcaption></figcaption></figure>

***

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

***

## Create variant

1. *Optional*: pick a filter (e.g. Top sellers, Light, Dark, Boxed) to narrow the list.
2. Click the desired variant card. The "Create variant as duplicate" modal opens.
3. Review the selection (source and target).
4. Click "Create variant".

The new duplicate then appears in your Theme-Manager.

{% hint style="warning" %}
**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.
{% endhint %}

{% hint style="info" %}
**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.
{% endhint %}

{% hint style="info" %}
**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](https://github.com/shopware/shopware/issues/10702) that we cannot resolve automatically right now.

You have two easy ways to remove the background image in the new theme:

1. **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.
2. **Upload your own**: Simply set a different image in the Theme-Manager — this overrides the inherited factory background.
   {% endhint %}

***

## Take over configuration (Migration)

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.

{% hint style="info" %}
**Note**: The flyout cards are still in development. We welcome your constructive [feedback](https://service.themeware.design/en/feature-request).
{% endhint %}

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

1. In the "Take over configuration" section, pick the source from the dropdown. Available are all other ThemeWare® variants (Pro/Cloud) plus their duplicates.
2. The target is automatically your current theme (shown read-only next to the source).
3. 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.

{% hint style="warning" %}
**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.
{% endhint %}

{% hint style="info" %}
**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.
{% endhint %}

{% hint style="info" %}
**Source = duplicate**\
If you select a duplicate as the source, customizations from the underlying plugin or app theme are transferred as well.
{% endhint %}

{% hint style="success" %}
**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.
{% endhint %}

***

## Premium variants (Add-on)

For details on the available add-on variants, tags and prices, see the Add-ons overview.

{% content-ref url="/pages/aFKwAqgQNr67IaKWh50D" %}
[Design variants](/additional-features/add-ons/design-variants)
{% endcontent-ref %}

***

## Use cases

Typical scenarios for both functions:

### Create variant

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

### Take over configuration

* **Switch between two Pro plugins** — You have e.g. ThemeWare® Plants and Modern installed in parallel and want to continue your Plants configuration under Modern.
* **Switch from Cloud (app) to Pro (plugin)** — You have the cloud app installed, buy the Pro plugin in addition, and want to take over your cloud configuration. The cloud app can then be uninstalled.
* **Variant no longer offered in the store** — Your previous variant is no longer available for purchase. You switch to an active variant and bring your setup along.
* **Continue with a custom duplicate as base** — You have a polished custom duplicate under one variant and want to continue its look under a different variant.

{% hint style="info" %}
**Want to write into an existing theme instead of creating a new one?**\
The [Backup tab](/additional-features/hub/backup) 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.
{% endhint %}


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

<figure><img src="/files/uZNWpp7rSz7p5ZzUYXWZ" alt=""><figcaption></figcaption></figure>

***

## Overview & configure

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

***

## Create a backup

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

**Step by step:**

1. Find the relevant theme in the backup tab.
2. Expand the theme section.
3. Click "Copy".
   * The theme configuration is now in the clipboard.
4. Paste it into a TXT file and save it.

***

## Backup Manager (Add-on)

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

{% content-ref url="/pages/ihEfoxwz8G1QHODz8JYp" %}
[Backup Manager](/additional-features/add-ons/backup-manager)
{% endcontent-ref %}

***

{% hint style="info" %}
**You want to create a new duplicate from a source instead?**\
That's what the "Take over configuration" function in the [Variants tab](/additional-features/hub/variants) is for. It creates a new theme with the customizations from any ThemeWare® edition (Pro or Cloud) and leaves your existing setup untouched.
{% endhint %}


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

<figure><img src="/files/tpcDNo2spH9SxfPtGtD1" alt=""><figcaption></figcaption></figure>

***

## News and announcements

{% embed url="<https://service.themeware.design/en/news>" %}


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

{% hint style="info" %}
**Note**: Data is only read; no data is transmitted to the service portal.
{% endhint %}

<figure><img src="/files/oNuDjBzXRIRBputBgoZE" alt=""><figcaption></figcaption></figure>

## Layout

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

* **Highlights** — the most important new features
* **Changes** — all further adjustments
* **Notes** — important information about the version

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

## Usage

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

***

## Installed version

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

<figure><img src="/files/PHSXC5zFDbyfeQojJv9u" alt=""><figcaption><p>Installed version highlighted</p></figcaption></figure>

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

<figure><img src="/files/FXNxMxN7UQbtA9ViYV1P" alt=""><figcaption><p>"Update recommended" notice</p></figcaption></figure>

***

## Changelog

{% embed url="<https://service.themeware.design/en/changelog>" %}


# Support

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

<figure><img src="/files/6H0IKQRDuAyN31ONEQom" alt=""><figcaption></figcaption></figure>

## Live chat

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

## Knowledge, answers & solutions

Cards with the most important self-service resources:

* **Knowledge base** — tutorials, tips & expert knowledge
* **Manual** — features & configurations
* **Shopware docs** — Shopware core functions
* **Video tutorial** — step-by-step videos
* **Config finder** — find configurations quickly
* **Frequently asked questions (FAQ)** — questions & answers
* **Update guide** — step by step to the update
* **ThemeWare® Utilities** — leads straight to the [Utilities tab](/additional-features/hub/utilities)

## Contact & feedback

* **Create ticket** — individual help (opens a selection modal with chat or a ticket in your Shopware account)
* **Complaint** — report a concern officially
* **Improvement suggestion** — suggestions & feature requests
* **Community** — exchange in the forum

## Services & partnership

* **Services** — individual customisations and commissioned work
* **Remove branding** — request removal of the footer notice
* **Partners & agencies** — priority support and partner programme

## More & latest

* **Service portal** — your central point of contact
* **News** — news & announcements
* **Changelog** — version history & updates
* **Compatibility** — Shopware & ThemeWare® versions


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

{% hint style="success" %}
**Tip**: If you have further ideas or wishes for existing or new blocks, please send us your [suggestions for improvement](https://service.themeware.design/en/feature-request) via our Service Portal.
{% endhint %}

## ThemeWare® CMS extensions

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

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

<div><figure><img src="/files/y7kMSr1qhTMtZZ8b54sg" alt=""><figcaption><p>CMS block</p></figcaption></figure> <figure><img src="/files/ei1No6Hu6QoX2knAl80M" alt=""><figcaption><p>CMS element</p></figcaption></figure> <figure><img src="/files/2Gi1YiQZq0dYrkweJOIh" alt=""><figcaption><p>Replace element</p></figcaption></figure></div>

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.

{% hint style="info" %}
**Note**: Due to technical limitations in the Shopware app system, most CMS extensions are currently only available in the Pro Edition.
{% endhint %}

***

## Multilingual

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](/files/Qxaplo4GlOv3JqHx0MUw)

***

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

## Installation/Updates/Deinstallation

> Stand: Shopware 6.5.x

#### **Installation**

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

#### **Updates**

* Bei Theme-Updates aktualisieren sich die CMS-Blöcke bzw. CMS-Elemente ggf. automatisch.

#### **Deaktivieren**

* Das Deaktivieren von Themes entfernt lediglich die CMS-Blöcke bzw. CMS-Elemente aus der Erlebniswelt, aber nicht aus der Datenbank.

#### **Deinstallation**

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

{% hint style="info" %}
**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.
{% endhint %}

***

## Further information

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

{% embed url="<https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences>" %}
ThemeWare® Knowledge Base => Shopping Experiences
{% endembed %}


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

## ThemeWare® CMS blocks

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

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

{% hint style="success" %}
**Tip**: If you have further ideas or wishes for existing or new blocks, please send us your [suggestions for improvement](https://service.themeware.design/en/feature-request) via our Service Portal.
{% endhint %}

***

## Add a ThemeWare® CMS block

1. Click on the plus icon to select a CMS block.
2. Select the desired CMS block in the "Block category" dropdown.
3. Drag'n'drop the CMS block into your Shopping Experience.

![](/files/jie8fuWh9cAPvSf8EqRn)

### **Pro Edition**

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.

<figure><img src="/files/NYPyYkrcgvGkuSrpkJm4" alt="" width="336"><figcaption><p>ThemeWare® Pro Edition</p></figcaption></figure>

### **Cloud Edition**

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

![ThemeWare® Cloud Edition](/files/68DMJ2SsBuIdx1sKeXkc)

***

## Block settings

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.

<figure><img src="/files/tuvMnikOxpgWzYomYUSl" alt="" width="347"><figcaption><p>Block settings</p></figcaption></figure>

### CSS classes

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:

{% embed url="<https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/css-spacing-classes-for-shopping-experiences>" %}
ThemeWare® Knowledge Base => CSS spacing classes for Shopping Experiences
{% endembed %}

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

{% embed url="<https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences>" %}
ThemeWare® Knowledge Base => Shopping Experiences
{% endembed %}

In addition, you can also use CSS classes: from [Bootstrap](https://getbootstrap.com/docs/5.1/getting-started/introduction/), since the storefront in Shopware 6 is based on Bootstrap 5.

***

## Style CMS block individually

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.

***

## Replace CMS element

You can replace the CMS elements in most CMS blocks. You can learn more about this in the article [CMS elements](/additional-features/cms-extensions/cms-elements).

***

## Further information

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

{% embed url="<https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-block>" %}
ThemeWare® Knowledge Base
{% endembed %}


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

<figure><img src="/files/sHWBuu0F9jsymQKPudCC" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}
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:

* [Suggestion for improvement (Feature request)](https://service.themeware.design/en/feature-request)
  {% endhint %}

{% hint style="warning" %}
**Important**: This feature is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## 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
> * **Space between** - Equal space between the columns
> * **Space around** - Equal space around the columns
> * **Space evenly** - Fully evenly distributed space

### Advanced configuration

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)
* **Mobile Landscape** (≥576px)
* **Mobile Portrait** (<576px)

{% hint style="info" %}
**Note**: Without the advanced configuration the values apply equally to all viewports.
{% endhint %}

***

## Responsive column layout

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`). The expert mode overrides the column arrangement and visibility configuration.

### Advanced configuration

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

{% hint style="info" %}
**Note**: Without the advanced configuration the values apply equally to all viewports.
{% endhint %}

***

## Supported blocks

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

### Column blocks (symmetric)

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

* Responsive block layout (gutter + alignment)
* Responsive column layout (column arrangement + visibility)

### Asymmetric column blocks

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

* Responsive block layout (gutter + alignment)
* Responsive column layout (column arrangement + visibility + asymmetric from)

### Grid blocks

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

* Responsive block layout (gutter only, no alignment)

### One column

The "One column" block supports:

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

{% hint style="success" %}
**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:

* [Suggestion for improvement (Feature request)](https://service.themeware.design/en/feature-request)
  {% endhint %}


# Hero slider

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

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

***

## Available "Hero slider" blocks

* [Hero slider (2x)](/additional-features/cms-extensions/cms-blocks/hero-slider/hero-slider-2-slides)
* [Hero slider (3x)](/additional-features/cms-extensions/cms-blocks/hero-slider/hero-slider-3-slides)
* [Hero slider (4x)](/additional-features/cms-extensions/cms-blocks/hero-slider/hero-slider-2-slides-1)

***

## Add "Hero slider" block

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

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

![Adding a "Hero slider" CMS block](/files/O6yWRN6feLFCg3bKEnud)

***

## Autoplay and accessibility

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.

{% hint style="danger" %}
**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.
{% endhint %}

***

## CSS-Klassen

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

Da der ThemeWare® "Hero-Slider" (ab ThemeWare® 2.0) auf dem Bootstrap 5 Carousel ([Dokumentation](https://getbootstrap.com/docs/5.2/components/carousel/)) basiert, sind folgende CSS-Klassen besonders interessant:

#### Überblenden (Crossfade)

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

#### Dunkle Controls

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

#### Flat controls

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.

***

## Demos

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Hero-slider/>" %}
ThemeWare® Demoshop => Hero slider
{% endembed %}


# Hero slider (2x)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Available CMS elements

* [Call-to-Action slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/call-to-action-hero-slider)
* [Text slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/text-hero-slider)
* [Image slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/image-slide-hero-slider)

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Hero-slider/>" %}
ThemeWare® Demoshop => "Hero slider"
{% endembed %}


# Hero slider (3x)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Available CMS elements

* [Call-to-Action slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/call-to-action-hero-slider)
* [Text slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/text-hero-slider)
* [Image slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/image-slide-hero-slider)

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Hero-slider/>" %}
ThemeWare® Demoshop => "Hero slider"
{% endembed %}


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

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Available CMS elements

* [Call-to-Action slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/call-to-action-hero-slider)
* [Text slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/text-hero-slider)
* [Image slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/image-slide-hero-slider)

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Hero-slider/>" %}
ThemeWare® Demoshop => "Hero slider"
{% endembed %}


# Teaser

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="info" %}
**Hinweis**: Mehr Informationen zu den ThemeWare® Teaser-Elementen findest du hier: [Teaser](/additional-features/cms-extensions/cms-elements/teaser)
{% endhint %}

***

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

{% hint style="warning" %}
**Note**: These blocks are available only in the ThemeWare® Pro Edition.
{% endhint %}

***

## Add teaser block

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]

![Adding a teaser CMS block](/files/Xnutsvm0haJQyUyFN8E6)

***

## CSS-Klassen

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:

{% embed url="<https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/embellishing-images-in-cms-blocks-with-hover-effects>" %}
ThemeWare® Knowledge Base => Embellishing images in CMS blocks with hover effects
{% endembed %}


# Banner

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="info" %}
**Hinweis**: Mehr zu den ThemeWare® Banner-Elementen findest du hier: [Banner](/additional-features/cms-extensions/cms-blocks/banner)
{% endhint %}

***

## Available banner blocks

* Image-Banner
* Parallax-Banner
* Hero-Banner
* Advanced-Banner

{% hint style="warning" %}
**Note**: These blocks are available only in the ThemeWare® Pro Edition.
{% endhint %}

***

## Add banner block

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

> **Hinweis**: Banner-Blöcke findest du in der Rubrik "ThemeWare® Banner" \[Pro]

<figure><img src="/files/24ndjtQEPkReHPgVz9jB" alt=""><figcaption><p>Adding a banner CMS block</p></figcaption></figure>


# Columns

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

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

***

## Available column blocks

* [One column](/additional-features/cms-extensions/cms-blocks/columns/two-columns)
* [Two columns](/additional-features/cms-extensions/cms-blocks/columns/two-columns-1)
* [Two columns (swapped on phones)](/additional-features/cms-extensions/cms-blocks/columns/two-columns-swapped-on-phones)
* [Two columns, 3-9](/additional-features/cms-extensions/cms-blocks/columns/two-columns-3-9)
* [Two columns, 4-8](/additional-features/cms-extensions/cms-blocks/columns/two-columns-4-8)
* [Two columns, 5-7](/additional-features/cms-extensions/cms-blocks/columns/two-columns-5-7)
* [Two columns, 7-5](/additional-features/cms-extensions/cms-blocks/columns/two-columns-7-5)
* [Two columns, 8-4](/additional-features/cms-extensions/cms-blocks/columns/two-columns-8-4)
* [Two columns, 9-3](/additional-features/cms-extensions/cms-blocks/columns/two-columns-9-3)
* [Three columns](/additional-features/cms-extensions/cms-blocks/columns/three-columns)
* [Three columns, 2-2-8](/additional-features/cms-extensions/cms-blocks/columns/three-columns-2-2-8)
* [Three columns, 2-8-2](/additional-features/cms-extensions/cms-blocks/columns/three-columns-2-8-2)
* [Three columns, 2-8-2](/additional-features/cms-extensions/cms-blocks/columns/three-columns-2-8-2)
* [Three columns, 3-6-3](/additional-features/cms-extensions/cms-blocks/columns/three-columns-3-6-3)
* [Three columns, 6-3-3](/additional-features/cms-extensions/cms-blocks/columns/three-columns-6-3-3)
* [Three columns, 8-2-2](/additional-features/cms-extensions/cms-blocks/columns/three-columns-8-2-2)
* [Four columns](/additional-features/cms-extensions/cms-blocks/columns/four-columns)
* [Five columns](/additional-features/cms-extensions/cms-blocks/columns/five-columns)
* [Six columns](/additional-features/cms-extensions/cms-blocks/columns/six-columns)

***

## Add column block

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]

![Pro Edition](/files/MHzW2C4RGbJXFVTFN2r7) ![Cloud Edition](/files/EazsAgIwg7j0ZjZlCsgE)

***

## Elemente austauschen

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

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Klicke auf das gewünschte Platzhalter-Element (2) um ein neues CMS-Element auszuwählen
3. Es öffnet sich das Pop-up "Element auswählen"
4. Wähle das gewünschte CMS-Element aus (3)

Du hast nun das CMS-Element ausgetauscht.

<div><figure><img src="/files/kk1qePZxHqul6GboM0lm" alt=""><figcaption><p>ThemeWare® Spalten-Blöcke: Element austauschen</p></figcaption></figure> <figure><img src="/files/rdMuYpMZIwYRIzrBa5OQ" alt=""><figcaption></figcaption></figure></div>

***

## Bildgrößen

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.

***

## CSS-Klassen

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:

{% embed url="<https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks>" %}
ThemeWare® Knowledge Base => Adjusting column spacings in CMS blocks
{% endembed %}

***

## Demos

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# One column

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/Rsu0Y6jKuyEBsegTFEUp" alt=""><figcaption><p>ThemeWare® CMS block "One column" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/acsH39ZVkrpSxQYqBZ91" alt=""><figcaption><p>ThemeWare® CMS block "One column"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Two columns

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/P7CVSEtQmxmKqqfsBFQA" alt=""><figcaption><p>ThemeWare® CMS block "Two columns" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/CHDZzoY9ZVCuISxIb4NY" alt=""><figcaption><p>ThemeWare® CMS block "Two columns"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Two columns (swapped on phones)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/P7CVSEtQmxmKqqfsBFQA" alt=""><figcaption><p>ThemeWare® CMS block "Two columns (swapped on phones)" [Pro]</p></figcaption></figure>

Der CMS-Block "Zwei Spalten (auf Handys getauscht)" ist eine Variante vom CMS-Block "Zwei Spalten" (siehe [Two columns](/additional-features/cms-extensions/cms-blocks/columns/two-columns-1)). 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.

## Example

<figure><img src="/files/YNTafzNClyG7fwkgYifE" alt=""><figcaption><p>ThemeWare® CMS block "Two columns (swapped on phones)"</p></figcaption></figure>

<figure><img src="/files/Ie2ZL1gtXx2eUuzKfLOL" alt=""><figcaption><p>Links: "Zwei Spalten" | Rechts: "Zwei Spalten (auf Handys getauscht)"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.) modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Two columns, 3-9

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/rVkidOl5XQCqvTBLFlC0" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 3-9" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/oJLXCodFEu8GV5ex5qOn" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 3-9"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Two columns, 4-8

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/ucqCEMxcpOqTM6q8rojq" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 4-8"[Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/Q75LRo0mGR3RnJGKozr0" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 4-8"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Two columns, 5-7

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/8Z2M7xyksqEL9bjbL5x7" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 5-7" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/Cxa95RqZFJSR6AZ7klWN" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 5-7"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Two columns, 7-5

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/GNLBVh6JMe5YECR5SgzW" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 7-5" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/2APGL1kiLUOS4RHKVBDm" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 7-5"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Two columns, 8-4

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/Nrrq2CwW2YkgYFjNHNf5" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 8-4" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/4YyfLDpQjpzSf783qFEb" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 8-4"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Two columns, 9-3

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/RBgFKZN6yvitlQ6mQxWu" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 9-3" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/gQkxJvwLJcX8EoL3fZfk" alt=""><figcaption><p>ThemeWare® CMS block "Two columns, 9-3"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Three columns

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/P6NJ9gqJemkMnhSKlhB5" alt=""><figcaption><p>ThemeWare® CMS block "Three columns" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/k1XFpvpOOHWcvWN4AMNy" alt=""><figcaption><p>ThemeWare® CMS block "Three columns"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Three columns, 2-2-8

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/rbdhwSuJAt6QJk3MnVBd" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 2-2-8" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/emzlNspkiTCrMncFLYgg" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 2-2-8"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Three columns, 2-8-2

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/98yvniJ8ySKmB1ANdV0w" alt=""><figcaption><p>ThemeWare® CMS block "Three columns, 2-8-2" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/5u9Yn4ZP6Fubto9p77JB" alt=""><figcaption><p>ThemeWare® CMS block "Three columns, 2-8-2"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Three columns, 3-3-6

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/l9RPShi04JtHRSe2evAP" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 3-3-6" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/CWoOfFyFZKPdf6A9kPeB" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 3-3-6"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Three columns, 3-6-3

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/T4BQyztBNDmFMW6ZNA6t" alt=""><figcaption><p>ThemeWare® CMS block "Three columns, 3-6-3" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/4S5w5sOdbKZsZI2HYCj0" alt=""><figcaption><p>ThemeWare® CMS block "Three columns, 3-6-3"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Three columns, 6-3-3

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/A2k0Zrd6wbgjPyKTzvC6" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 6-3-3" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/YMI8LMy9ZjwXespq7vDA" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 6-3-3"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Three columns, 8-2-2

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/Ql0x2rr8Snut6fhmaXv5" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 8-2-2" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/4pktVVIKShHoFrQgOqdT" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 8-2-2"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Four columns

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/soq4RXKv6kYBRG6GQ2lR" alt=""><figcaption><p>ThemeWare® CMS block "Four columns" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/wf0r0FDMIt4eCIt5WtR0" alt=""><figcaption><p>ThemeWare® CMS block "Four columns"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Five columns

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/PsBN1WCXCQo9B7iRYMnM" alt=""><figcaption><p>ThemeWare® CMS block "Five columns" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/3xNA2qrhVZh2oqnrmCwU" alt=""><figcaption><p>ThemeWare® CMS block "Five columns"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Six columns

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/Nb0bZQpUIGBRpuTqVzUj" alt=""><figcaption><p>ThemeWare® CMS block "Six columns" [Pro]</p></figcaption></figure>

## Example

<figure><img src="/files/TT48FgZmV5PTZC5Cid66" alt=""><figcaption><p>ThemeWare® CMS block "Six columns"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Column-blocks/>" %}
ThemeWare® Demoshop => Column blocks
{% endembed %}


# Six columns (Custom)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/OzKWWkP7mudARmTCvUsL" alt=""><figcaption><p>ThemeWare® CMS block "Six columns (Custom)" [Pro]</p></figcaption></figure>

{% hint style="info" %}
**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.
{% endhint %}

{% hint style="warning" %}
**Important**: Please note that this block is currently in a testing phase and may be changed if necessary.
{% endhint %}

#### Individual column widths

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

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

{% embed url="<https://knowledge.themeware.design/knowledge-base/profi-knowledge/column-css-classes-in-themeware-cms-elements>" %}
ThemeWare® Knowledge Base
{% endembed %}

## Example

<figure><img src="/files/TC7Aw55TX28rnYv8sjHl" alt=""><figcaption><p>ThemeWare® CMS block "Six columns (Custom)"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

Will follow\...


# Grids

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

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

***

## Available grid blocks

* [Grid 'Modern'](/additional-features/cms-extensions/cms-blocks/grids/grid-modern)
* [Grid 'Modern' (swapped)](/additional-features/cms-extensions/cms-blocks/grids/grid-modern-swapped)
* [Grid 'One'](/additional-features/cms-extensions/cms-blocks/grids/grid-one)
* [Grid 'One' (swapped)](/additional-features/cms-extensions/cms-blocks/grids/grid-one-swapped)
* [Grid 'Two'](/additional-features/cms-extensions/cms-blocks/grids/grid-two)
* [Grid 'Two' (swapped)](/additional-features/cms-extensions/cms-blocks/grids/grid-two-swapped)
* [Grid 'Three'](/additional-features/cms-extensions/cms-blocks/grids/grid-three)
* [Grid 'Three' (swapped)](/additional-features/cms-extensions/cms-blocks/grids/grid-three-swapped)
* [Grid 'Four'](/additional-features/cms-extensions/cms-blocks/grids/grid-four)
* [Grid 'Four' (swapped)](/additional-features/cms-extensions/cms-blocks/grids/grid-four-swapped)
* [Grid 'Five'](/additional-features/cms-extensions/cms-blocks/grids/grid-five)
* [Grid 'Five' (swapped)](/additional-features/cms-extensions/cms-blocks/grids/grid-five-swapped)
* [Grid 'Six'](/additional-features/cms-extensions/cms-blocks/grids/grid-six)
* [Grid 'Six' (swapped)](/additional-features/cms-extensions/cms-blocks/grids/grid-six-swapped)

***

## Add grid block

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

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

![Adding a grid CMS block](/files/00GjWJ74i0xndJ3bGw7V)

***

## Bildgrößen

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.

***

## Bild-Elemente

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.

<figure><img src="/files/YECVPHgFuNyJ9tI81aIX" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**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.
{% endhint %}

***

## CSS-Klassen

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:

{% embed url="<https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-gaps-in-cms-blocks>" %}
ThemeWare® Knowledge Base => Adjusting gaps in CMS blocks
{% endembed %}

***

## Demos

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Grid-blocks/>" %}
ThemeWare® Demoshop => Grid blocks
{% endembed %}


# Grid 'Modern'

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/vrx6ZZgTV7HFjhHPXiJS" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Modern'"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}

#### Standard-Einstellungen

* Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
* Die kleinen Bild-Elemente haben eine minimale Höhe von `300 px`.
* Die beiden großen Bild-Element haben eine minimale Höhe von `640 px`.
* Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Grid-blocks/>" %}
ThemeWare® Demoshop => Grid blocks
{% endembed %}


# Grid 'Modern' (swapped)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/m3WRpZZlAV8Np5L7Jhko" alt=""><figcaption><p>ThemeWare® CMS-Block "Grid 'Modern' (getauscht)"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}

#### Standard-Einstellungen

* Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
* Die kleinen Bild-Elemente haben eine minimale Höhe von `300 px`.
* Die beiden großen Bild-Element haben eine minimale Höhe von `640 px`.
* Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}


# Grid 'One'

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/gaxTFn0qNOhXfNk8YbeX" alt=""><figcaption><p>ThemeWare® CMS block "Grid 'One'"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}

#### Standard-Einstellungen

* Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
* Die kleinen Bild-Elemente haben eine minimale Höhe von `320 px`.
* Das große Bild-Element nutzt die komplette Höhe und sollte eine minimale Höhe 2x der minimalen Höhe der beiden linken Bilde-Elemente haben (z.B. `640 px`).
* Hinweis: In älteren Versionen von ThemeWare® kann es nötig sein noch die Lücke (z.B. `20px`) einem Element zu addieren.

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Grid-blocks/>" %}
ThemeWare® Demoshop => Grid blocks
{% endembed %}


# Grid 'One' (swapped)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/thF42qtj0x9QjIkyLsr1" alt=""><figcaption><p>ThemeWare® CMS block "Grid 'One' (swapped)'"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}

#### Standard-Einstellungen

* Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
* Die kleinen Bild-Elemente haben eine minimale Höhe von `320 px`.
* Das große Bild-Element nutzt die komplette Höhe und sollte eine minimale Höhe 2x der minimalen Höhe der beiden linken Bilde-Elemente haben (z.B. `640 px`).
* Hinweis: In älteren Versionen von ThemeWare® kann es nötig sein noch die Lücke (z.B. `20px`) einem Element zu addieren.

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe "[Adjusting column spacings in CMS blocks](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks)") modifizieren.
{% endhint %}

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Grid-blocks/>" %}
ThemeWare® Demoshop => Grid blocks
{% endembed %}


# Grid 'Two'

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/7U0QXaf3OZSWPFYt0OxX" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Two'</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Grid 'Two' (swapped)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/JzwdKhlSekqMBx63eHoL" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Two' (swapped)</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Grid 'Three'

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/dq17qg8ywCaAPRm3s3Ul" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Three'</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Grid 'Three' (swapped)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/iaWGF6Gu28ijA8WDyY6m" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Three' (swapped)</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Grid 'Four'

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/DLRI1dLjDijzFxIrOzBx" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Four'</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Grid 'Four' (swapped)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/s26paey0xEcdsbf3kAYt" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Four' (swapped)</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Grid 'Five'

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/uFbungkL4fBgZXBuafJ4" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Five'</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Grid 'Five' (swapped)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/Ldekh4j0vOPql7UHnXBW" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Five' (swapped)</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Grid 'Six'

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/1cuDijgmaowvMUUgBvjz" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Six'</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Grid 'Six' (swapped)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/5rQNl01TRvTibQhSFejH" alt=""><figcaption><p>ThemeWare® CMS block Grid 'Six' (swapped)</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Text & images

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="info" %}
**Hinweis**: Mehr zu den ThemeWare® "Text & Bild"-Elementen findest du hier: [Text & images](/additional-features/cms-extensions/cms-elements/text-and-images)
{% endhint %}

***

## Available blocks

* [Image & text layered](/additional-features/cms-extensions/cms-blocks/text-and-images/image-and-text-layered)

***

## Add block

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

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

<figure><img src="/files/JEYXTpy4NfRcMtLgEKf8" alt=""><figcaption><p>"Text &#x26; Bild" CMS-Block hinzufügen</p></figcaption></figure>


# Image & text layered

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

You can find more information about the CMS element here:

{% content-ref url="/pages/2r1S6IiiQmRDw1bc0qsI" %}
[Image & text layered](/additional-features/cms-extensions/cms-elements/text-and-images/image-and-text-layered)
{% endcontent-ref %}

{% hint style="warning" %}
**Important**: This block is only available in the ThemeWare® Pro Edition.
{% endhint %}


# Category teaser

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="info" %}
**Hinweis**: Mehr Informationen zu den ThemeWare® Kategorie-Teaser-Elementen findest du hier: [Category teaser](/additional-features/cms-extensions/cms-elements/category-teaser)
{% endhint %}

***

## Available category teaser blocks

* Kategorie-Teaser
* Kategorie-Teaser (Advanced)
* Kategorie-Teaser (Modern)

{% hint style="warning" %}
**Important**: These cms blocks are available only in the ThemeWare® Pro Edition.
{% endhint %}

***

## Add category teaser block

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]

<figure><img src="/files/tYTe5fjhG2EyjeBLIN8X" alt=""><figcaption></figcaption></figure>


# Listing page

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="info" %}
**Hinweis**: Mehr zu den ThemeWare® Elementen für Kategorien findest du hier: [Listing page](/additional-features/cms-extensions/cms-elements/listing-page)
{% endhint %}

***

## Available blocks

* Listing subcategories
* Listing subcategories (Modern)

{% hint style="warning" %}
**Important**: These blocks are available only in the ThemeWare® Pro Edition.
{% endhint %}

***

## Add block

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

> **Hinweis**: Diese Blöcke findest du in der Rubrik "ThemeWare® Kategorieseite" \[Pro]

<figure><img src="/files/oKvGsNkMK9NzsTIVs6SM" alt=""><figcaption><p>Add a block</p></figcaption></figure>


# Product page

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="info" %}
**Hinweis**: Mehr zu den ThemeWare® Elementen für Produktseiten findest du hier: [Product page](/additional-features/cms-extensions/cms-elements/product-page)
{% endhint %}

***

## Available blocks

* [Product name (without manufacturer logo)](/additional-features/cms-extensions/cms-blocks/product-page/product-name-without-manufacturer-logo)
* [Image gallery and buy box (with product name)](/additional-features/cms-extensions/cms-blocks/product-page/image-gallery-and-buy-box-with-product-name)
* [Image gallery and buy box (with product name & manufacturer logo)](/additional-features/cms-extensions/cms-blocks/product-page/image-gallery-and-buy-box-with-product-name-and-manufacturer-logo)
* [Product description & reviews (Accordion)](/additional-features/cms-extensions/cms-blocks/product-page/product-description-and-reviews-accordion)

{% hint style="info" %}
**Note**: These blocks are available only in the ThemeWare® Pro Edition.
{% endhint %}

***

## Add block

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

> **Hinweis**: Diese Blöcke findest du in der Rubrik "ThemeWare® Produktseite" \[Pro]

<figure><img src="/files/gF4aYh7KVVin2enURmrN" alt=""><figcaption><p>Add a block</p></figcaption></figure>


# Product name (without manufacturer logo)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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

<figure><img src="/files/Q8fKzTBiJNr7hLy5GJwO" alt=""><figcaption><p>ThemeWare® CMS-Block "Produktname (ohne Hersteller-Logo)"</p></figcaption></figure>

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

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

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

#### Example

<figure><img src="/files/vWu49Z1uBPcRaZ8feGwf" alt=""><figcaption></figcaption></figure>

***

## **Demo**

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

> Demo to follow\...


# Image gallery and buy box (with product name)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/5x3jDGk1re1RYM4eXGWS" alt=""><figcaption><p>ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname)"</p></figcaption></figure>

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

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

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

#### Example

<figure><img src="/files/BvPoQRAe9yIOdUmLaIXK" alt=""><figcaption></figcaption></figure>

***

## **Demo**

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

> Demo to follow\...


# Image gallery and buy box (with product name & manufacturer logo)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/r6glrIHL6UuA8YFZ5rlR" alt=""><figcaption><p>ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname &#x26; Hersteller-Logo)"</p></figcaption></figure>

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

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

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

#### Example

<figure><img src="/files/C5AAXIWne3pekOYlLdev" alt=""><figcaption></figcaption></figure>

***

## **Demo**

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

> Demo to follow\...


# Product description & reviews (Accordion)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

<figure><img src="/files/cewbJsVGaGG9clEhktYS" alt=""><figcaption><p>ThemeWare® CMS-Block "Product description &#x26; reviews (Accordion)"</p></figcaption></figure>

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

You can find more information about the CMS element here:

{% content-ref url="/pages/ogSoHAH3788f6xrKd3Yg" %}
[Product description & reviews (Accordion)](/additional-features/cms-extensions/cms-elements/product-page/product-description-and-reviews-accordion)
{% endcontent-ref %}


# Sidebar

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

The **ThemeWare® CMS blocks for the sidebar**.

...

***

## Available sidebar blocks

* [Subcategory navigation (Sidebar)](/additional-features/cms-extensions/cms-blocks/sidebar/subcategory-navigation-sidebar)

***

## Add sidebar block

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

> **Hinweis**: Sidebar-Blöcke findest du in der Rubrik "ThemeWare® Sidebar" \[Pro]

![Adding a sidebar CMS block](/files/4bzRTpR4mlZXzvR7xp5d)


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

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Further information

You can find more information about the CMS element here:

{% content-ref url="/pages/lml49XcESfg7li8hIw7S" %}
[Subcategory navigation](/additional-features/cms-extensions/cms-elements/sidebar/subcategory-navigation)
{% endcontent-ref %}


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

{% hint style="info" %}
**Note**: You can find more information about the ThemeWare® "Sale" elements here: [Sale](/additional-features/cms-extensions/cms-elements/sale)
{% endhint %}

***

## Available "Sale" blocks

* [Hero countdown](/additional-features/cms-extensions/cms-blocks/sale/hero-countdown)
* [Countdown banner](/additional-features/cms-extensions/cms-blocks/sale/countdown-banner)
* [Countdown banner (compact)](/additional-features/cms-extensions/cms-blocks/sale/countdown-banner-compact)
* [Discount banner](/additional-features/cms-extensions/cms-blocks/sale/discount-banner)

***

## Add "Sale" block

Select a CMS block and simply drag'n'drop it into your Shopping Experience.

> **Note**: You can find "Sale" CMS blocks in the "ThemeWare® Sale" section \[Pro].

<figure><img src="/files/awS2gcPzxgGiYWBOJD9i" alt=""><figcaption><p>Add a "Sale" CMS block</p></figcaption></figure>


# Hero countdown

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/Qji3JJgmRbpH9BTax2ne" alt=""><figcaption><p>ThemeWare® "Hero countdown"</p></figcaption></figure>

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

1. [Hero countdown (Heading)](/additional-features/cms-extensions/cms-elements/sale/hero-countdown)
2. [Countdown banner](/additional-features/cms-extensions/cms-elements/sale/countdown-banner)

...

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## **Demo**

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

> Demo to follow\...


# Countdown banner

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/XzE8GmKFn9EFxlIbgQYF" alt=""><figcaption><p>ThemeWare® "Countdown banner"</p></figcaption></figure>

...

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

You can find more information about the CMS element here:

{% content-ref url="/pages/M7ux9TsSLiDABMsyQSTa" %}
[Countdown banner](/additional-features/cms-extensions/cms-elements/sale/countdown-banner)
{% endcontent-ref %}

***

## **Demo**

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

> Demo to follow\...


# Countdown banner (compact)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/th1bIOydeZWZmsDvIwVZ" alt=""><figcaption><p>ThemeWare® "Countdown banner (compact)"</p></figcaption></figure>

...

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

You can find more information about the CMS element here:

{% content-ref url="/pages/TmtZA2j0JXVXuDQC9ocI" %}
[Countdown banner (compact)](/additional-features/cms-extensions/cms-elements/sale/countdown-banner-compact)
{% endcontent-ref %}

***

## **Demo**

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

> Demo to follow\...


# Discount banner

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/zhAOtGjB8GZBPJQpdgFI" alt=""><figcaption><p>ThemeWare® "Discount banner"</p></figcaption></figure>

...

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

You can find more information about the CMS element here:

{% content-ref url="/pages/qFxvdVa4nGvj3rBErqBN" %}
[Discount banner](/additional-features/cms-extensions/cms-elements/sale/discount-banner)
{% endcontent-ref %}

***

## **Demo**

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

> Demo to follow\...


# Other

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

Other ThemeWare® CMS blocks.

...

***

## Available blocks

* [Breadcrumb navigation](/additional-features/cms-extensions/cms-blocks/other/breadcrumb-navigation)
* [Testimonial (Customer review)](/additional-features/cms-extensions/cms-blocks/other/testimonial-customer-review)
* [Testimonials (Four columns)](/additional-features/cms-extensions/cms-blocks/other/testimonials-four-columns)
* [Custom code (HTML/CSS/JS)](/additional-features/cms-extensions/cms-blocks/other/custom-code-html-css-js)


# Breadcrumb navigation

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

You can find more information about the CMS element here:

{% content-ref url="/pages/ezvhikFbHpfSsDHz9DXW" %}
[Breadcrumb navigation](/additional-features/cms-extensions/cms-elements/other/breadcrumb-navigation)
{% endcontent-ref %}

***

## Add block

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

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

<figure><img src="/files/HiG8EWb0EPjvab8jC31g" alt=""><figcaption><p>Add CMS block "Breadcrumb navigation"</p></figcaption></figure>

***

## **Demo**

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

> Demo to follow\...


# Testimonial (Customer review)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/AOb6XYnvgNbmpoj1Lcp2" alt=""><figcaption><p>ThemeWare® CMS block "Testimonial (Customer review)"</p></figcaption></figure>

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

You can find more information about the CMS element here:

{% content-ref url="/pages/EiJQjAMDXDJrBZrHjDDk" %}
[Testimonial (Customer review)](/additional-features/cms-extensions/cms-elements/other/testimonial-customer-review)
{% endcontent-ref %}

***

## Add block

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

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

<figure><img src="/files/93tXkoxVoPkep5ZzuQK9" alt=""><figcaption><p>Add CMS block "Testimonial (Customer review)"</p></figcaption></figure>

***

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Testimonials/>" %}
ThemeWare® Demoshop => Testimonials
{% endembed %}


# Testimonials (Four columns)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/tTycwAwMAlCnHsRm5fTu" alt=""><figcaption><p>ThemeWare® CMS block "Testimonials (Four columns)"</p></figcaption></figure>

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

You can find more information about the CMS element here:

{% content-ref url="/pages/EiJQjAMDXDJrBZrHjDDk" %}
[Testimonial (Customer review)](/additional-features/cms-extensions/cms-elements/other/testimonial-customer-review)
{% endcontent-ref %}

***

## Add block

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

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

<figure><img src="/files/csC8MobgZMrmwAC3JXof" alt=""><figcaption><p>Add CMS block "Testimonials (Four columns)"</p></figcaption></figure>

***

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-blocks/Testimonials/>" %}
ThemeWare® Demoshop => Testimonials
{% endembed %}


# Custom code (HTML/CSS/JS)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

{% hint style="warning" %}
**Wichtig**: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

You can find more information about the CMS element here:

{% content-ref url="/pages/BIyGsjJyLxqAauYLd6Ai" %}
[Custom code (HTML/CSS/JS)](/additional-features/cms-extensions/cms-elements/other/custom-code-html-css-js)
{% endcontent-ref %}

***

## Add block

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

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

<figure><img src="/files/gRsXRjQa9P9hPwqHnbNs" alt=""><figcaption><p>CMS-Block "Breadcrumb-Navigation" hinzufügen</p></figcaption></figure>

***

## **Demo**

Eine Anwendungsbeispiel findest du in unseren Demoshops:

> Demo folgt...


# CMS elements

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

## ThemeWare® CMS elements

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

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

{% hint style="success" %}
**Tip**: If you have further ideas or wishes for existing or new blocks, please send us your [suggestions for improvement](https://service.themeware.design/en/feature-request) via our Service Portal.
{% endhint %}

{% hint style="warning" %}
**Important**: CMS elements are unfortunately not currently possible in the Shopware Cloud! The ThemeWare® Cloud Edition therefore does not currently contain any CMS elements.
{% endhint %}

***

## Add ThemeWare® CMS element

To be able to place a CMS element, you need a suitable CMS block in your Shopping Experience. You can then assign a CMS element to this CMS block. You can find out more about this in the section [CMS blocks](/additional-features/cms-extensions/cms-blocks).

***

## Replace ThemeWare® CMS element

1. Move the mouse over the CMS block
2. Click on the ![](/files/b6gVu58MXtDooQvBy4BB) "Replace" icon (1)
3. The pop-up "Select element" opens
4. Select the desired CMS element (2)

<figure><img src="/files/3R0RiBZA8XfF0CSubBgW" alt=""><figcaption><p>Add or replace CMS element</p></figcaption></figure>

<figure><img src="/files/MUjaVaUlgC6iZQyjNBIQ" alt=""><figcaption><p>CMS element selection</p></figcaption></figure>

***

## Configure ThemeWare® CMS element

1. Click on the corresponding CMS block to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (1) to configure the CMS element
4. The "Element Settings" pop-up will open (2)
5. Make the desired changes
6. Save your changes

<figure><img src="/files/7g82WwhW3XzZeq4bglWc" alt=""><figcaption><p>Configure or edit CMS element</p></figcaption></figure>

<figure><img src="/files/eLul7JxJ5Kmwb816humi" alt=""><figcaption><p>CMS element settings</p></figcaption></figure>

{% hint style="success" %}
**Tip**: Make sure that all mandatory fields "<mark style="color:blue;">\*</mark>" 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.
{% endhint %}

{% hint style="info" %}
**Note**: With Shopware 6.5, an **HTML sanitizer** has been implemented. This sanitizer improves security, reliability and usability of the editor by removing unsafe HTML code.

It also sanitizes styles and attributes for consistent and correct code rendering regardless of platform and browser. (see [HTML sanitizer](https://knowledge.themeware.design/knowledge-base/profi-knowledge/html-sanitizer))
{% endhint %}

***

## General information

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.

<figure><img src="/files/6A7DYNoiueaT719l8BXK" alt=""><figcaption></figcaption></figure>

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

***

### SEO & Pagespeed settings

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.

{% hint style="success" %}
**Tip**: You can define the "alt text" and the "title" attribute of images in Shopware 6 in the media manager.
{% endhint %}

#### Pagespeed

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

***

### Advanced Mode

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

{% hint style="info" %}
**Note**: The additional fields in Advanced Mode are intended for users who want more control over the appearance of a CMS element.
{% endhint %}

***

### Advanced settings

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

#### CSS classes

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

#### Expert settings

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!

{% hint style="info" %}
**Note**: You can find more information on how to use these in the ThemeWare® Knowledge Base in the "[Profi knowledge](https://knowledge.themeware.design/knowledge-base/profi-knowledge/expert-settings-in-cms-elements)" section.
{% endhint %}

***

## Style CMS element individually

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:

<pre class="language-html"><code class="lang-html"><strong>&#x3C;div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
</strong>    &#x3C;div class="cms-element-twt-modern-teaser element ...">
    ...
</code></pre>

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

```css
[data-cms-element-id="019762d3f5ac74cd97043411f86aec36"] {
    /* Custom styles here */
}
```

{% hint style="info" %}
**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.
{% endhint %}

***

## Multilingual

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.

<figure><img src="/files/Qxaplo4GlOv3JqHx0MUw" alt=""><figcaption><p>Shopping Experience: Switch language</p></figcaption></figure>

***

## Further information

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

{% embed url="<https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-element>" %}
ThemeWare® Knowledge Base
{% endembed %}


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

{% hint style="warning" %}
**Important**: This feature is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## How to use

#### Assign data mapping

1. Open the Shopping Experience of a **category page** in the CMS editor
2. Add a supported CMS element (e.g. a teaser)
3. In the element configuration, click the **"Data mapping"** (1) button on the desired field
4. Select the desired entity property (2 – e.g. `category.name` for the category name)
5. Save the Shopping Experience

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

<figure><img src="/files/0lOHsPPDoZpqkvxm17mm" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Tip**: You can also select custom fields from the drop-down menu (depending on the CMS layout type).
{% endhint %}

#### Remove data mapping

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

<figure><img src="/files/lGzVrmD4I4dGSujTDksP" alt=""><figcaption></figcaption></figure>

***

## Supported elements and fields

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.

### Teaser

| CMS element             | Image | Headline/Title | Text |
| ----------------------- | ----- | -------------- | ---- |
| Advanced teaser         | x     | x              | x    |
| Classic teaser          | x     | x              |      |
| Hero teaser             | x     | x              | x    |
| Hover box               | x     | x              | x    |
| Image teaser            | x     |                |      |
| Modern teaser           | x     | x              |      |
| Round teaser            | x     | x              |      |
| Teaser                  | x     | x              |      |
| Text teaser             | x     | x              |      |
| Text teaser (decorated) | x     | x              |      |

### Banner

| CMS element     | Image | Headline/Title | Text |
| --------------- | ----- | -------------- | ---- |
| Advanced banner | x     | x              | x    |
| Hero banner     | x     | x              | x    |
| Image banner    | x     |                |      |
| Parallax banner | x     | x              |      |

### Other

| CMS element          | Image | Headline/Title | Text |
| -------------------- | ----- | -------------- | ---- |
| Image & text layered | x     | x              | x    |

{% hint style="info" %}

#### Tip: Using custom fields

In addition to standard properties (e.g. `product.name` or `category.media`), you can also map **ThemeWare® custom fields** via data mapping. For example, you can use the short description instead of the standard product description.
{% endhint %}

***

## Limitations

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


# Hero slider

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

Die **ThemeWare® Hero slider elements** (slides) sind explizit für die Verwendung im CMS-Block "**Hero slider (...)**" (siehe [Hero slider](/additional-features/cms-extensions/cms-blocks/hero-slider)) vorgesehen. Die Elemente sind nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktionieren nicht in anderen CMS-Blöcken.

## Available slider elements

* [Call-to-Action slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/call-to-action-hero-slider)
* [Text slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/text-hero-slider)
* [Image slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/image-slide-hero-slider)

***

## Add a "Hero slider"

Füge den CMS-Block des gewünschten Hero-Slider einfach per Drag’n’Drop deiner Erlebniswelt hinzu. Mehr Informationen dazu findest du in der folgenden Anleitung: [Hero slider](/additional-features/cms-extensions/cms-blocks/hero-slider)

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

***

## Replace a slider element

Der ThemeWare® Hero-Slider ist mit [Text slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/text-hero-slider) Elementen befüllt. Du kannst diese gegen [Call-to-Action slide (Hero slider)](/additional-features/cms-extensions/cms-elements/hero-slider/call-to-action-hero-slider) austauschen:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Navigiere mit der Pfeil-Navigation zum gewünschten Element (2)
3. Klicke auf das ![](/files/b6gVu58MXtDooQvBy4BB) "Austauschen"-Icon (3) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element auswählen"
5. Wähle das gewünschte CMS-Element (z.B. "Call-to-Action-Slide (Hero-Slider)") aus (4)

Du hast nun das CMS-Element ausgetauscht.

<div><figure><img src="/files/YY9qlPq6jRlOXAtc2IiI" alt=""><figcaption><p>ThemeWare® Hero-Slider: Element austauschen</p></figcaption></figure> <figure><img src="/files/GwsXzKZEZhgpgKFIB0Zw" alt=""><figcaption></figcaption></figure></div>

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Hero-slider/>" %}
ThemeWare® Demoshop => Hero slider
{% endembed %}


# Call-to-Action slide (Hero slider)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/5ib06cT2FYF5tvFLE9Qb" alt=""><figcaption><p>ThemeWare® "Call-to-Action slide (Hero slider)"</p></figcaption></figure>

{% hint style="info" %}
**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.
{% endhint %}

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

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

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Navigate to the desired CMS element using the arrow navigation (2)
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (3) to configure the CMS element
4. The "Element settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/RPh1nxEPU3gOUHr5kqdX" alt=""><figcaption><p>Configuring the ThemeWare® "Call-to-Action slide"</p></figcaption></figure>

***

## Configuration

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.

### General

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.

{% hint style="info" %}
**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.
{% endhint %}

### Layout

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.

<figure><img src="/files/GSG1SGryzhqVowL1gpXn" alt=""><figcaption><p>Elements of the "Call-to-Action slide"</p></figcaption></figure>

{% hint style="info" %}
**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.
{% endhint %}

### Responsive

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.

### Slide

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.

{% hint style="warning" %}
**Important**: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information: [Hero slider](/additional-features/cms-extensions/cms-blocks/hero-slider#autoplay-and-accessibility)
{% endhint %}

### SEO & Pagespeed

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

### Advanced

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.

***

## Breakpoint

### Image

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.

<div><figure><img src="/files/JhPorcUmvRjlE1sDcE78" alt=""><figcaption><p>Disply mode 'contain'</p></figcaption></figure> <figure><img src="/files/6ZkwTLNe8PNe5tmsbtTL" alt=""><figcaption><p>Disply mode 'cover'</p></figcaption></figure> <figure><img src="/files/nfPLhmwTCQqPoqsIlj5W" alt=""><figcaption><p>Disply mode 'cover' in detail</p></figcaption></figure></div>

### Text

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.

<div><figure><img src="/files/YsDkQrIBo0l2phFBj1Ak" alt=""><figcaption><p>Text below the image</p></figcaption></figure> <figure><img src="/files/jYRZ2nuI95dVHLTT5mpX" alt=""><figcaption><p>Text overlays the image</p></figcaption></figure></div>

***

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Hero-slider/>" %}
ThemeWare® Demoshop => Hero slider
{% endembed %}


# Text slide (Hero slider)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/mtNG9UqXyGp0LAItOrFV" alt=""><figcaption><p>ThemeWare® "Text slide (Hero slider)"</p></figcaption></figure>

{% hint style="info" %}
**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.
{% endhint %}

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

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

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Navigate to the desired CMS element using the arrow navigation (2)
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (3) to configure the CMS element
4. The "Element settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/cpDOEuKkUvdRAyXlqTWj" alt=""><figcaption><p>ThemeWare® "Text slide" konfigurieren</p></figcaption></figure>

***

## Configuration

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.

### General

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.

{% hint style="info" %}
**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.
{% endhint %}

### Layout

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.

<figure><img src="/files/f82677uvHD60mDIfIkRL" alt=""><figcaption><p>Elements of the "Text slide"</p></figcaption></figure>

### Responsive

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.

### Slide

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.

{% hint style="warning" %}
**Important**: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information: [Hero slider](/additional-features/cms-extensions/cms-blocks/hero-slider#autoplay-and-accessibility)
{% endhint %}

### SEO & Pagespeed

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

### Advanced

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.

***

## Breakpoint

### Image

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.

<div><figure><img src="/files/JhPorcUmvRjlE1sDcE78" alt=""><figcaption><p>Disply mode 'contain'</p></figcaption></figure> <figure><img src="/files/6ZkwTLNe8PNe5tmsbtTL" alt=""><figcaption><p>Disply mode 'cover'</p></figcaption></figure> <figure><img src="/files/nfPLhmwTCQqPoqsIlj5W" alt=""><figcaption><p>Disply mode 'cover' in detail</p></figcaption></figure></div>

### Text

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.

<div><figure><img src="/files/YsDkQrIBo0l2phFBj1Ak" alt=""><figcaption><p>Text below the image</p></figcaption></figure> <figure><img src="/files/jYRZ2nuI95dVHLTT5mpX" alt=""><figcaption><p>Text overlays the image</p></figcaption></figure></div>

***

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Hero-slider/>" %}
ThemeWare® Demoshop => Hero slider
{% endembed %}


# Image slide (Hero slider)

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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.

<figure><img src="/files/8G3CaEhJVUL3hsp6fqeb" alt=""><figcaption><p>ThemeWare® "Image slide (Hero slider)"</p></figcaption></figure>

{% hint style="info" %}
**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.
{% endhint %}

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

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

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Navigate to the desired CMS element using the arrow navigation (2)
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (3) to configure the CMS element
4. The "Element settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/c2wtLqEXFTRtoepJtQ3w" alt=""><figcaption><p>ThemeWare® "Image slide" konfigurieren</p></figcaption></figure>

***

## Configuration

The configuration of the "Image slide" is quite self-explanatory. The **image** is a mandatory field. That's all you need to configure.

### General

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.

### Layout

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.

<figure><img src="/files/vyIgmXZDnraGdNU0WrYg" alt=""><figcaption><p>Elements of the "Image slide"</p></figcaption></figure>

### Responsive

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.

### Slide

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.

{% hint style="warning" %}
**Important**: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information: [Hero slider](/additional-features/cms-extensions/cms-blocks/hero-slider#autoplay-and-accessibility)
{% endhint %}

### SEO & Pagespeed

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

### Advanced

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.

***

## Breakpoint

### Image

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.

<div><figure><img src="/files/JhPorcUmvRjlE1sDcE78" alt=""><figcaption><p>Disply mode 'contain'</p></figcaption></figure> <figure><img src="/files/6ZkwTLNe8PNe5tmsbtTL" alt=""><figcaption><p>Disply mode 'cover'</p></figcaption></figure> <figure><img src="/files/nfPLhmwTCQqPoqsIlj5W" alt=""><figcaption><p>Disply mode 'cover' in detail</p></figcaption></figure></div>

***

## Demo

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Hero-slider/>" %}
ThemeWare® Demoshop => Hero slider
{% endembed %}


# Teaser

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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](/additional-features/cms-extensions/cms-blocks/columns)) verwenden.

## Available teaser elements

* [Text teaser](/additional-features/cms-extensions/cms-elements/teaser/text-teaser)
* [Text teaser (decorated)](/additional-features/cms-extensions/cms-elements/teaser/text-teaser-decorated)
* [Button teaser](/additional-features/cms-extensions/cms-elements/teaser/button-teaser)
* [Call-to-Action](/additional-features/cms-extensions/cms-elements/teaser/call-to-action)
* [Hover box](/additional-features/cms-extensions/cms-elements/teaser/hover-box)
* [Image teaser](/additional-features/cms-extensions/cms-elements/teaser/image-teaser)
* [Hero teaser](/additional-features/cms-extensions/cms-elements/teaser/hero-teaser)
* [Advanced teaser](/additional-features/cms-extensions/cms-elements/teaser/advanced-teaser)
* [Classic teaser](/additional-features/cms-extensions/cms-elements/teaser/classic-teaser)
* [Modern teaser](/additional-features/cms-extensions/cms-elements/teaser/modern-teaser)
* [Round teaser](/additional-features/cms-extensions/cms-elements/teaser/round-teaser)

***

## Add a teaser element

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: [Teaser](/additional-features/cms-extensions/cms-blocks/teaser)

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

***

## Replace a teaser element

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: [CMS elements](/additional-features/cms-extensions/cms-elements)


# Teaser

The **ThemeWare® "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.

The teaser displays an image with a caption bar at the bottom containing a title, subtitle and optionally an arrow icon.

<figure><img src="/files/WB7JNiuWZD0t2LKoHe33" alt=""><figcaption><p>ThemeWare® "Teaser"</p></figcaption></figure>

{% hint style="success" %}
**Beta**: This feature is currently in beta and may change in a future release. – We'd love to hear your [feedback](https://service.themeware.design/en/feature-request).
{% endhint %}

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

You can configure the ThemeWare® "Teaser" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/3FFEbcW3DvR91aAjkAp3" alt=""><figcaption><p>Configuring the ThemeWare® "Teaser"</p></figcaption></figure>

***

## Configuration

The configuration of the "Teaser" is quite self-explanatory. The **title** and the **image** are mandatory fields. That's all you really need to configure.

### General

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

> **Content**
>
> In the section "Content" you can enter the **title** and the **subtitle** for the teaser. The title is a mandatory field.
>
> **Image**
>
> In the section "Image" you define the **background image** (1) of the teaser. The image is a mandatory field. You can configure the **display mode** (Cover/Contain/Stretch), the **minimum height** (default: `340px`) and the **alignment**.
>
> **Accessibility**
>
> In the section "Accessibility" you can enter an **alt text** for the image and specify whether the image should be treated as a **decorative image**.
>
> **Link**
>
> In the section "Link" you define the target of the teaser when it is clicked. You can specify whether the link should open in a **new tab** and whether the **entire teaser** acts as a link ("Full link").

<figure><img src="/files/EBHggtH6HNUwytKJI6kz" alt=""><figcaption><p>Elements of the "Teaser"</p></figcaption></figure>

### Layout

In the tab "Layout" you can configure the **caption bar** (2), the **title**, the **subtitle**, the **image**, **hover effects** and a **colour overlay**.

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

{% hint style="info" %}
**Note**: When using the hover effect "Grow", the padding is controlled by the effect.
{% endhint %}

> **Title**
>
> In the section "Title" you can configure the **font family**, the **font weight**, the **text transform** and the **text colour** for the title.
>
> **Subtitle**
>
> In the section "Subtitle" you can configure the **font family** and the **text colour** for the subtitle.
>
> **Caption bar**
>
> In the section "Caption bar" you can configure the **background colour** and the **backdrop effect** of the caption bar.
>
> **Icon**
>
> In the section "Icon" you can select an **arrow icon** that is displayed on the right side of the caption bar.
>
> **Image**
>
> In the section "Image" you can configure the desired horizontal **positioning** of the image in display mode 'Cover'.
>
> **Hover effects**
>
> In the section "Hover effects" you can select a **hover effect** and specify whether the **CTA on hover** should be displayed. The following hover effects are available:
>
> * **Grow** - The padding of the caption bar grows on hover
> * **Fade in** - The caption bar fades in
> * **Fade out** - The caption bar fades out
> * **Slide in up** - The caption bar slides in from below
> * **Slide in down** - The caption bar slides in from above
>
> **Colour overlay**
>
> In the section "Colour overlay" a **colour overlay** can be activated and configured. You can set a **colour**, a **gradient** and the **gradient angle**.

### SEO & Pagespeed

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

### Advanced

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.

In the "Advanced" tab, CSS classes for the **element** and the **caption bar** are available. The **element ID** is also displayed.

***

## Data mapping (coming soon)

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


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

<figure><img src="/files/DkHQR1kbCHi51W5ApNea" alt=""><figcaption><p>ThemeWare® "Text teaser"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

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

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/x2iP6fDsrO90dvA7DeuY" alt=""><figcaption><p>Configuring the ThemeWare® "Text teaser"</p></figcaption></figure>

***

## Configuration

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.

### General

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.

### Layout

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

<figure><img src="/files/hQhkoi6ZmR3j3mklZAbW" alt=""><figcaption><p>Elements of the "Text teaser"</p></figcaption></figure>

### SEO & Pagespeed

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

### Advanced

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.

***

## Data mapping (coming soon)

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

***

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Text-teaser/>" %}
ThemeWare® Demoshop => Text teaser
{% endembed %}


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

<figure><img src="/files/ReMid9QxF4lc4oAmGQby" alt=""><figcaption><p>ThemeWare® "Text teaser (decorated)"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

You can configure the ThemeWare® "Text teaser (decorated)" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/7zo2DuWDPhV1TIAObm1N" alt=""><figcaption><p>Configuring the ThemeWare® "Text teaser (decorated)"</p></figcaption></figure>

***

## Configuration

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.

### General

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.

### Layout

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

<figure><img src="/files/8PMFacXCzJLlfYCC9YT3" alt=""><figcaption><p>Elements of the "Text teaser (decorated)"</p></figcaption></figure>

### SEO & Pagespeed

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

### Advanced

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.

***

## Data mapping (coming soon)

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

***

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Text-teaser-decorated/>" %}
ThemeWare® Demoshop => Text teaser (decorated)
{% endembed %}


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

<figure><img src="/files/cJIJq5RJ2ce93GY0yBI7" alt=""><figcaption><p>ThemeWare® "Button teaser"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

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

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/BvUbe2Shtkok5Y8TDusv" alt=""><figcaption><p>Configuring the ThemeWare® "Button teaser"</p></figcaption></figure>

***

## Configuration

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.

### General

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.

### Layout

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.

<figure><img src="/files/UDPGQySemXRZUUirdNZj" alt=""><figcaption><p>Elements of the "Button teaser"</p></figcaption></figure>

### SEO & Pagespeed

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

### Advanced

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.

{% hint style="info" %}
**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.
{% endhint %}

***

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Button-teaser/>" %}
ThemeWare® Demoshop => Button teaser
{% endembed %}


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

<figure><img src="/files/fqeWY9sQ9Jn5mdl6baa1" alt=""><figcaption><p>ThemeWare® "Call-to-Action"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

## Configure element

You can configure the ThemeWare® "Call-to-Action" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/hYAAarNEfR9QXP3UGIkV" alt=""><figcaption><p>Configuring the ThemeWare® "Call-to-Action"</p></figcaption></figure>

## Configuration

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.

### General

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.

{% hint style="info" %}
**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.
{% endhint %}

### Layout

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 colou**r, 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.

<figure><img src="/files/rCg62NcFBSqoCesKAv4E" alt=""><figcaption><p>Elements of the "Call-to-Action"</p></figcaption></figure>

### SEO & Pagespeed

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

### Advanced

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.

{% hint style="info" %}
**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.
{% endhint %}

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Call-to-Action/>" %}
ThemeWare® Demoshop => Call-to-Action
{% endembed %}


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

<figure><img src="/files/DzeLg9ss7KdRgZNnD0OK" alt=""><figcaption><p>ThemeWare® "Hover box"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

You can configure the ThemeWare® "Hover box" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/HWw0bb4NkArsWTXcDCXu" alt=""><figcaption><p>Configuring the ThemeWare® "Hover box"</p></figcaption></figure>

***

## Configuration

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.

### General

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.

{% hint style="info" %}
**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.
{% endhint %}

### Layout

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.

<figure><img src="/files/uc6wSmucrZdxibbvqQFE" alt=""><figcaption><p>Elements of the "Hover box"</p></figcaption></figure>

### SEO & Pagespeed

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

### Advanced

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.

***

## Data mapping (coming soon)

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

***

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Hover-box/>" %}
ThemeWare® Demoshop => Hover box
{% endembed %}


# Hover teaser

The **ThemeWare® "Hover 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.

The hover teaser is a teaser with 11 unique hover effects. Each effect offers a distinct visual treatment with different animations for title, subtitle and decorative elements.

<figure><img src="/files/VIirQrW212xd9TUXiHZG" alt=""><figcaption><p>ThemeWare® "Hover teaser"</p></figcaption></figure>

{% hint style="success" %}
**Beta**: This feature is currently in beta and may change in a future release. – We'd love to hear your [feedback](https://service.themeware.design/en/feature-request).
{% endhint %}

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

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

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/vFPqnstlGgR4iOnZaVCR" alt=""><figcaption><p>Configuring the ThemeWare® "Hover teaser"</p></figcaption></figure>

***

## Configuration

The configuration of the "Hover teaser" is quite self-explanatory. The **image** is a mandatory field. That's all you really need to configure.

### General

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

> **Content**
>
> In the section "Content" you can enter the **title** (2) and the **title (suffix)**. The suffix is appended to the title in bold. With the **space** option you can add a space between the title and the suffix.
>
> **Subtitle**
>
> In the section "Subtitle" you can enter the **subtitle** (3) for the teaser.
>
> **Image**
>
> In the section "Image" you define the **background image** (1) of the teaser. The image is a mandatory field. You can configure the **display mode**, the **minimum height** and the **alignment**.
>
> **Accessibility**
>
> In the section "Accessibility" you can enter an **alt text** for the image and specify whether the image should be treated as a **decorative image**.
>
> **Link**
>
> In the section "Link" you define the target of the teaser when it is clicked. You can specify whether the link should open in a **new tab** and whether the **entire teaser** acts as a link ("Full link").

<figure><img src="/files/J8jKYrEBqqtmAgCc9H50" alt=""><figcaption><p>Elements of the "Hover teaser"</p></figcaption></figure>

{% hint style="info" %}
**Note**: Teasers should always be at least 200 px in height to ensure the hover effects work properly.
{% endhint %}

### Layout

In the tab "Layout" you can configure the **hover effect**, the **title**, the **subtitle**, the **accent colour**, the **image**, **hover behaviour** and a **colour overlay**.

> **General**
>
> In the section "General" you can configure the **hover effect**, the **background colour** and the **max width**.
>
> **Title**
>
> In the section "Title" you can configure the **font family**, the **font weight**, the **text transform**, the **text colour** and the **text shadow** (small/regular/large) for the title.
>
> **Subtitle**
>
> In the section "Subtitle" you can configure the **font family** and the **text colour** for the subtitle.
>
> **Accent colour**
>
> In the section "Accent colour" you can configure the **colour** for the accent elements (lines, borders) of the hover effects.
>
> **Image**
>
> In the section "Image" you can configure the desired horizontal **positioning** of the image, the **background colour** and **image effects**. The following image effects are available: blur, brightness, contrast, greyscale, opacity, saturate and scale.
>
> **Hover**
>
> In the section "Hover" you can configure the **transition duration** (Fast 0.2s / Normal 0.35s / Slow 0.5s), the **image hover effect** and the **colour overlay hover effect**.
>
> **Colour overlay**
>
> In the section "Colour overlay" a **colour overlay** can be activated and configured. You can set a **colour**, a **gradient** and the **gradient angle**.

### SEO & Pagespeed

In the tab "SEO & Pagespeed" you can configure the **HTML tags** for the title and the subtitle, the **fetch priority** and the **lazy loading** of the image.

### Advanced

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.

In the "Advanced" tab, CSS classes for the **element**, the **title** and the **subtitle** are available. The **element ID** is also displayed.

***

## Hover effects

The following hover effects are available for the "Hover teaser":

* Chloe
* Eve
* Holly (no subtitle)
* Luna
* Mia
* Mila
* Olivia
* Ruby
* Sophie
* Stella

<div><figure><img src="/files/7UJEpgmY58DKrcOwcT3c" alt=""><figcaption></figcaption></figure> <figure><img src="/files/omq5lBt9eExfHYxQ10JT" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ga320EcIUoe27TElLayl" alt=""><figcaption></figcaption></figure> <figure><img src="/files/MxaKHyyBjdt3jGUkjkgl" alt=""><figcaption></figcaption></figure> <figure><img src="/files/zJg62UaUeJbRKfYsNZPL" alt=""><figcaption></figcaption></figure> <figure><img src="/files/btt3EkuKljQmqTjLe7hg" alt=""><figcaption></figcaption></figure> <figure><img src="/files/oD22Lu5Nsl8HmtS3Mo72" alt=""><figcaption></figcaption></figure> <figure><img src="/files/6FsUJ6nG5XX0VD7MtLUx" alt=""><figcaption></figcaption></figure> <figure><img src="/files/rPlyibxOLqr6FxpmTfa6" alt=""><figcaption></figcaption></figure> <figure><img src="/files/dKkTW1GVP9SMRA04Za3u" alt=""><figcaption></figcaption></figure></div>


# Image teaser

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.

<figure><img src="/files/xi1YIYVMfJnDJ76l0lVp" alt=""><figcaption><p>ThemeWare® "Image teaser"</p></figcaption></figure>

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

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

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/7S4P9OSMZLXKvZrgiELU" alt=""><figcaption><p>Configuring the ThemeWare® "Image teaser"</p></figcaption></figure>

***

## **Configuration**

The configuration of the "Image teaser" is quite self-explanatory. The **image** is a mandatory field. That's all you really need to configure.

### General

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.

### Layout

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 [#image-effects](#image-effects "mention")) can be selected and it can be determined **when** the image effect (if the teaser has been linked) should be applied.
>
> You can also configure the desired horizontal positioning of the image in display mode 'Cover'.
>
> **Coloured overlay**
>
> In the section "Coloured overlay" a **coloured overlay** can be activated and configured.

### SEO & Pagespeed

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

### Advanced

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.

***

## Image effects

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

* Blur
* Brightness
* Contrast
* Grayscale
* Opacity
* Saturation
* Scale

### Screenshots

<div data-full-width="false"><figure><img src="/files/bZvOxvVQOJAeBPWdsNvZ" alt=""><figcaption><p>Blur</p></figcaption></figure> <figure><img src="/files/g2diJoU2UQq8dmTA9gck" alt=""><figcaption><p>Brightness</p></figcaption></figure> <figure><img src="/files/urV8qpXq0OFVzuuMAMxc" alt=""><figcaption><p>Contrast</p></figcaption></figure> <figure><img src="/files/dSFF5kI0e90REUQF7hU0" alt=""><figcaption><p>Grayscale</p></figcaption></figure> <figure><img src="/files/rlaQEhy6q1R1qkeXCzTd" alt=""><figcaption><p>Opacity</p></figcaption></figure> <figure><img src="/files/OLtSfIKR2QnY2lQk6Yuk" alt=""><figcaption><p>Saturation</p></figcaption></figure> <figure><img src="/files/aPMQuwoal1WqvbmGykG7" alt=""><figcaption><p>Scale</p></figcaption></figure></div>

***

## Data mapping (coming soon)

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

***

## **Demo**

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

{% embed url="<https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-elements/Image-teaser/>" %}
ThemeWare® Demoshop => Image teaser
{% endembed %}




---

[Next Page](/llms-full.txt/1)