From Shopware 6.4.19.0 onwards you can mark CMS blocks as favourites.

Simply click on the heart symbol . Filter in the dropdown menu by favourites to quickly find the blocks you often use.

For maximum flexibility and compatibility, the "ThemeWare® CMS styling" is based on CMS blocks and can be activated/deactivated for different page types in the "Shopping Experiences" tab.

The "ThemeWare® CMS styling" will only be applied in Shopping Experiences with the size mode "Boxed content".

ThemeWare® CMS styling

On CMS pages with active "ThemeWare® CMS styling", CMS blocks get a basic configuration. This currently consists of a border colour (or border-color), a background colour (or background-color), and an outer distance to the bottom.

These colours are also configurable via the tab "Shopping Experience" and are applied to all pages with active "ThemeWare® CMS styling".

Individual customization with CSS classes

Since the "ThemeWare® CMS styling" is practically the same for all CMS blocks, there are new CSS classes in addition to the global styling to specifically "reset" desired blocks. This allows you to remove or reset the complete "ThemeWare® CMS styling" for a CMS block or each the border colour (or border-color), the background colour (or background-color) or the outer distance.

Conversely, there are of course also cases where CMS blocks should still be styled appropriately on pages without "ThemeWare® CMS styling". We have also thought of this: Using additional new CSS classes, the "ThemeWare® CMS styling" can be added manually to any desired CMS block. This allows to apply the whole "ThemeWare® CMS styling" or each for the border colour (or border-color), the background colour (or background-color) or the outer distance on a CMS block.

CSS classes

Starting from ThemeWare® 0.3.1, there are two layout variants for the sidebar section. Please find the corresponding configuration in the tab "Shopping Experiences".

• Variant 1

  • The sidebar section and the content section will be combined (as usual) to one container with "ThemeWare® CMS styling".

• Variant 2

Tip: You will find the configuration "Combine sidebar sections (CMS Pages)" in the Tab "Shopping Experiences" => Block "ThemeWare® CMS styling" => Section "Basic configuration".

Examples

The CMS styling adds a border, a background colour and the margin at the bottom to the respective CMS block – as explained above.

Shopware has removed !important instructions from Bootstrap utility classes with version 6.6.0 (see ). As a result, some CSS classes available in Bootstrap are now overwritten by the CMS styling due to the corresponding CSS hierarchy.

For example, the following CSS classes and their variants are affected:

If you want to use these Bootstrap CSS classes for the border, the background or the margin-bottom, please remove the CMS styling for the corresponding CMS block with the CSS class twt-cms-block-reset.

Shopping Experiences are a core feature of Shopware 6 and replace the Shopping Worlds from Shopware 5. With Shopping Experiences you can create and design content pages like landing pages, shop pages, category pages and product pages.

In this section you will find many useful tutorials about Shopping Experiences.

Further information

You can find more basics and information about the Shopping Experiences here:

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.

Adding a CSS class to a ThemeWare® CMS element

1. Click on the corresponding CMS block to activate the "edit mode"

2. Hover the mouse over the desired CMS element (1)

3. Click on the "gear" icon (2) to configure the CMS element

4. The "Element Settings" pop-up will open

5. Switch to the "Advanced" tab (3)

6. Enter your own CSS class in the "CSS classes (Element)" configuration field (4)

   • Tip: Separate multiple classes with a space.

7. Save your changes

Shopware automatically creates a unique element ID for each CMS element. You can use this to style the element individually using CSS - especially if no separate CSS class can be assigned.

You can find this element ID in the HTML code of the storefront. It is stored in the data-cms-element-id attribute of the corresponding container:

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

You can find more information on how to add CSS styles in the following instructions:

The Shopware 6 storefront is based on the Bootstrap framework. Due to our HC-Architecture® ThemeWare® as well is completely compatible with Bootstrap.

In the following we will introduce the corresponding CSS classes and show you a few application examples.

Show/hide elements for viewports

To show or hide Shopping Experience blocks in specific viewports, the following Bootstrap Display CSS classes can be used. This allows, for example, to optimize image elements for different viewports.

Overview of Bootstrap display CSS classes:

Always hide element:        d-none

Show element up to 576px:   d-block d-sm-none
Show element up to 768px:   d-block d-md-none
Show element up to 992px:   d-block d-lg-none
Show element up to 1200px:  d-block d-xl-none

Show element from 576px:   d-none d-sm-block
Show element from 768px:   d-none d-md-block
Show element from 992px:   d-none d-lg-block
Show element from 1200px:  d-none d-xl-block

Show element from 0px up to 576px:       d-block d-sm-none
Show element from 578px up to 768px:     d-none d-sm-block d-md-none
Show element from 769px up to 992px:     d-none d-md-block d-lg-none
Element anzeigen von 993px up to 1200px: d-none d-lg-block d-xl-none

You can add these CSS classes in the Shopping Experiences editor via the "CSS classes" field in the block settings or section settings.

Example: Hide image element in sidebar on smartphones

In this passage, we integrate an image element into the sidebar, which draws attention to a discount. In the smartphone viewport, the image would take too much space, so we hide it for this viewport.

Step 1: Edit the Shopping Experience

• Switch via the main navigation to the item "Content" => "Shopping Experiences".

• Select the landing page of the corresponding category with sidebar or create and edit the Shopping Experience.

• Select "Images" as the block category and insert the block named "Image, boxed" to the sidebar using drag and drop.

• Now click onto the block you just added, so that the block settings will open on the right . Do the following settings here:

  • Block name: Banner

Now configure the element in this block.

• Image: Choose the desired motif with a width of about 400px.

• Display mode: Stretch

Tip: With the CSS classes d-none d-lg-block you can also hide the sidebar navigation for mobile viewports.

In this section we create two variants of a banner each with different image sizes for two different viewports.

• Switch via the main navigation to the section "Contents" => "Shopping Experiences".

• Select the landing page of the appropriate category with sidebar or create and edit the Shopping Experience.

• Select "Images" as the block category and insert the block named "Image, boxed" to add it to the Shopping Experience by using drag and drop.

• Now click on the block you just added and the block settings will open on the right. Do the following settings here:

  • Block name: Banner

Now configure the element in this block.

• Image: Select the desired motif with a width of about 1920px.

• Display mode: Standard

• Select "Images" as the block category and insert the block named "Image, boxed" it into the experience using drag and drop.

• Now click on the block you just added, and the block settings will open on the right. Do the following settings here:

• Block name: Banner Mobil

Now configure the element in this block.

• Image: Select the desired motif with a width of about 580px.

• Display mode: Strech

Tip: You may also add a third image element for the tablet viewport.

With spacing classes you are able to define spacings of Shopping Experience elements per viewport. In the following we will show you an example of use:

This part will follow...

As the CSS class container is not the perfect solution in every scenario, ThemeWare® 1.1.3 includes new CSS classes for "boxed" CMS blocks and CMS sections in Shopping Experiences.

CSS classes

From Shopware 6.4.19.0 onwards you can mark CMS elements as favourites.

Simply click on the heart symbol . You will now find your favourites at the top of the "Replace element" overlay.

ThemeWare® provides you with individual CSS classes that allow you to create the headlines for your Shopware 6 themes, as already known from our Shopware 5 themes.

ThemeWare® CSS headlines

CSS classes

Example

With Shopware 6.4.19.0 you can easily set the visibility of sections and blocks in the Shopping Experience editor.

1. Switch to the Shopping Experiences Management via the main navigation ("Content" => "Shopping Experiences")

2. Click on the desired Shopping Experience to edit it.

3. The Shopping Experience now opens in the

ThemeWare® provides you with a comprehensive selection of CSS classes with which you can modify the column spacing in CMS blocks - i.e. the spacing between two columns.

ThemeWare® "Column" CMS block

Columns in CMS blocks have a fixed padding of 40px (2x 20px) in Shopware 6. ThemeWare® provides you with various CSS classes to change this spacing.

The ThemeWare® CSS column spacing classes work for ThemeWare® "Column" CMS blocks as well as most standard CMS blocks from Shopware.

CSS classes

In mobile viewports, columns are represented one below the other. They have a fixed defined margin of 0px. ThemeWare® version 2.1 and higher provides you with various CSS classes: you can change this spacing.

The CSS classes work for ThemeWare® "Column" CMS blocks as well as most standard CMS blocks from Shopware.

You can also use the above-mentioned CSS classes for "Column" blocks in "Grid" blocks from ThemeWare®, but we have introduced new, more intuitive CSS classes for these with ThemeWare® 3.2.0 and recommend using these new CSS classes in future.

You can find more information on this in the following article:

With ThemeWare® 3.2 we have added new CSS spacing classes for ThemeWare® "Grid" and "Columns" CMS blocks. These combine the functionality of the two CSS classes twt-cms-col-padding and twt-cms-col-margin mentioned above.

The new CSS "Gap" classes work in "Grids" and in the "Columns" blocks of ThemeWare®.

You can find more information on this in the following article:

The Shopware 6 Storefront is based on the Bootstrap framework. Due to our HC-Architecture® ThemeWare® of course it is also completely compatible with Bootstrap.

On this page you will find the most common Bootstrap classes which you can apply to CMS blocks in your Shopping Experiences.

In Shopware 6.4, the Storefront uses .

In Shopware 6.5, the Storefront uses .

Please note that the HTML editor of Shopware 6 (e.g. in CMS elements) does not allow all HTML tags in individual HTML code and automatically sanitises the code for security reasons. This does not mean that Shopware or ThemeWare® are not compatible with Bootstrap. Everything you find on this page was implemented with the Shopware HTML editor. Some of the actual Bootstrap code has been modified for this purpose.

You can use Bootstrap in template files according to the Bootstrap documentation. The only restriction here is that Shopware does not provide all elements.

In terms of Shopping Experiences, there are special CMS elements in the Shopware Store that provide alternative HTML editors

ThemeWare® offers various CSS decoration classes for images in CMS blocks. This instruction page will introduce all CSS classes to you.

ThemeWare® CSS decoration classes for images

Border

Adds a 12px thick border to images in a CMS block.

CSS classes

Example

Adds a drop shadow to images in a CMS block.

CSS classes

Example

Adds a drop shadow to images in a CMS Block.

CSS Classes

Example

Rounds off images in a CMS block.

CSS classes

Example

With ThemeWare® you receive a wide range of CSS classes enabling you to create various hover effects for images in CMS blocks.

ThemeWare® CSS hover effects for images

Status: Classes on this page have been enhanced with ThemeWare® 0.3.4 und 0.5.0.

CSS classes

Example

ThemeWare® version 0.3.0 and higher provides you with an extensive selection of CSS animations to embellish your Shopping Experience. In the following we will explain how to activate and use the "CSS scroll animations" in 2 steps only.

1. Open the administration of your shop

2. Switch to the Theme Management ("Contents" => "Themes") via the main navigation.) Note: In the Shopware Cloud please find the section "Themes" directly in the main navigation.

With ThemeWare® you have access to many additional CSS classes for Shopping Experiences which provides you with even more layout possibilities.

These CSS classes can be used in the Shopping Experiences (main navigation "Content" => "Shopping Experiences") via the section and block settings:

For the sake of clarity, there are separate articles on some topics. Please find the links in the corresponding paragraph.

In addition, you will find application examples for all topics in our demoshops.

ThemeWare® CMS styling

ThemeWare® utilizes a predefined styling for CMS blocks. With this so-called "ThemeWare® CMS styling", all CMS blocks in Shopping Experiences with the size mode "Boxed content" receive a border colour (or border-color), a background colour (or background-color) and an outer distance to the bottom.

This styling can be configured (from version 0.3.1 on), and you can even activate or deactivate the "ThemeWare® CMS styling" for different page types in the configuration.

But that's not all: It is also possible to use the "ThemeWare® CMS styling" via CSS classes for certain blocks or to specifically not use it. The following classes are available for this purpose:

Examples

Please find more information in our article:

In addition to the Bootstrap distance classes, ThemeWare® offers you an extended collection of distance classes based on pixel values.

Our classes are named according to the following pattern:

Please find more information in our article:

As the CSS class container is not the perfect solution in every scenario, there are CSS classes: in ThemeWare® you can use them to "box" CMS blocks or CMS sections in your Shopping Experiences.

Example

Please find more information in our article:

ThemeWare® provides you with various CSS decoration classes for images in CMS blocks. With these CSS classes you can decorate images with borders or shadows or round off the images.

Examples

Please find more information in our article:

With ThemeWare® you receive a wide range of CSS classes that allow you to create various hover effects for images in CMS blocks.

Examples

Please find more information in our article:

ThemeWare® offers a wide range of CSS animations for your Shopping Experiences. For this purpose, use the appropriate CSS class on CMS blocks or the desired HTML elements.

CSS classes

Please find more information in our article:

ThemeWare® also provides you with a collection of CSS classes for animations for experienced users.

Please find more information in our article:

Article will follow soon...

ThemeWare® provides you with a wide range of CSS classes with which you can modify the column spacings in CMS blocks.

Example

Please find more information in our article:

With ThemeWare® you receive individual CSS classes to be able to use the headlines known from our Shopware 5 Themes as well in your Shopware 6 Shopping Experiences.

Example

Please find more information in our article:

For the Shopping Experiences of the start pages of our demoshops we partly use individual CSS classes to enable certain layouts. In this section we will introduce these CSS classes.

CSS clsses

This overlay banner is possible using the standard CMS elements of Shopware and does not require a special CMS element.

CSS classes

Example

In this section you will find more classes that can be helpful in designing your individual Shopping Experiences.

CSS classes

Examples

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.

Adding a CSS class to a CMS block

1. Click on the desired CMS block to select the CMS block (1).

2. Switch to the "Block settings" tab in the sidebar on the right (2).

3. Open the "Layout" section (3).

4. Enter your own CSS class in the "CSS classes" configuration (4).

   • Tip: Separate multiple classes with a space.

5. Save the changes to your Shopping Experience.

After reloading the storefront, your styling should now be applied to the CMS block.

You can find more information on how to add CSS styles in the following instructions:

By default, a product slider ends at the edge of its container. Instead, you can have the neighbouring products displayed cropped — so your customers can see at a glance that there is more to discover.

In these instructions you will learn how to set the overflow globally and how to configure it individually for single CMS blocks.

Step 1: Choose the layout type

1. Open the theme configuration of your theme

2. Go to the tab "Shopping Experiences"

3. Expand the block "Product slider (Category 'Commerce')"

4. Select the desired "Layout type" in the section "Design"

5. Save your changes

Four layout types are available:

You can further adjust the crop in the section "Basic configuration".

Cropped products

Controls whether the cropped neighbouring products are dimmed. Dimmed products are not clickable — as soon as a product is fully visible, it becomes clickable again.

Crop width

You define how much of the neighbouring products is visible separately for desktop and mobile devices:

• "Crop width @Desktop (>=992px)" — default: 30 pixels

• "Crop width @Mobile (<992px)" — default: 20 pixels

You do not have to commit to one setting for your entire shop. Using a CSS class on the CMS block, you can display individual product sliders differently.

1. Open the shopping experience in the CMS editor

2. Click the CMS block containing the product slider to select it

3. Go to the tab "Block settings" in the sidebar on the right

4. Expand the section "Layout" there

In two cases the overflow is suppressed on purpose, because the neighbouring products would otherwise extend into adjacent content. The peek remains in place:

• The product slider is placed in a multi-column CMS block — the products would otherwise run into the other column

• The product slider is placed in a sidebar section

If you want to see the overflow at this position, place the product slider in a single-column CMS block.

You can find more information on how to assign a CSS class to a CMS block in the following instructions:

The Shopware 6 storefront is based on the Bootstrap framework. Due to our HC-Architecture® ThemeWare® of course it is also completely compatible with Bootstrap.

On this page you will find the most common Bootstrap classes which you can apply to CMS blocks in your Shopping Experiences . Without any programming knowledge!

Shopware 6.4

• In Shopware 6.4, the Storefront uses Bootstrap 4.

Shopware 6.5

• In Shopware 6.5, the Storefront uses Bootstrap 5.

Text alignment

For aligning texts Bootstrap already provides some CSS classes you can use. Please find more about this .

CSS classes

Examples

For colouring texts, Bootstrap already provides some classes for different colours. In the following you will find examples of the available colour variants. Please find more about this .

CSS classes

Examples

The Bootstrap framework also provides you with classes for adding backgrounds to Shopping Experience elements in different colours. For dark backgrounds it is recommended to choose a light text colour (see above). Please find more about this .

CSS classes

Examples

Bootstrap classes can also be used to define the borders of CMS blocks. For example, the class "border-0" removes borders from elements. Please find more about it .

CSS classes

CSS classes

Examples

Change the border colour (or border-color) of CMS blocks using the following CSS classes. Please find more about this .

CSS classes

Examples

Add the following CSS classes to a CMS block to easily round off its corners. Please find more about it .

CSS-Classes

Example

Adding or removing shadows to CMS blocks. Please find more .

CSS-Classes

Examples

Shopware has removed !important instructions from Bootstrap utility classes with version 6.6.0 (see ). As a result, some CSS classes available in Bootstrap are now overwritten by the CMS styling due to the corresponding CSS hierarchy.

If you would like to apply Bootstrap CSS classes to CMS blocks, please note that the ThemeWare® CMS styling overrides the border (border, border-radius), the background colour (background-color) and the margin at the bottom (margin-bottom).

Therefore, remove the CMS styling for the corresponding CMS block with the CSS class twt-cms-block-reset so that the bootstrap classes take effect.

In Shopware 6, CMS blocks as well as CMS sections can be hidden in various viewports.

Learn how this works in the following instructions:

In addition to the Bootstrap distance classes, ThemeWare® offers you an extended collection of distance classes based on pixel values.

Our classes are named according to the following pattern:

// Spacing classes:
twt-{property}{sides}-{size} // for xs

// Extended spacing classes:
twt-{property}{sides}-{breakpoint}-{size} // for sm, md, lg und xl

Example

Bootstrap 4 vs. Bootstrap 5

When updating from Bootstrap 4 to Bootstrap 5 (as of Shopware 6.5), some classes were renamed to use logical property names instead of direction names.

Starting with Shopware 6.5, you have the option in ThemeWare® to choose whether you want to use the old Bootstrap 4 or the new Bootstrap 5 notation:

• Tab "More" => Block "Advanced settings" => Section "Additional CSS classes" => Field "Load CSS spacing classes (optional)"

  • (default)

If you are using the old writing and don't want to change it everywhere, just load the CSS spacing classes for Bootstrap 4. New ThemeWare® installations automatically load the Bootstrap 5 spacing classes.

Below you will find the syntax for both variants:

CSS classes

Examples

CSS classes

Examples

This tutorial is divided into 4 sections, these correspond to the categories in our demoshops: Mountain air & Adventure, Cooking pleasure & Provence und Craft & Tradition.

Mountain air & Adventure

Element "Banner with Text"

Step 1: Editing Shopping Experience

• Switch via the main navigation to the section "Contents" => "Shopping Experiences".

• Select the landing page of the corresponding category and edit it.

• Add a new section "Full width" above the existing section.

Now configure the new section for the banner element.

• Section name: Teaser

• CSS classes: twt-custom-cms-element-overlay-primary twt-mt-n2

• Sizing mode: Full width

Tip: Depending on the theme, you can replace the CSS class "twt-custom-cms-element-overlay-primary" with "twt-custom-cms-element-overlay-secondary" in the section.

• Select "Text" as the block category and insert the block named "Text" to the new section using drag and drop.

• Now click onto the block you just added and the block settings will open on the right. Do the following settings:

  • Block name: Category text

Now configure the element in this block.

• Click onto the link "Data mapping" on the top right above the image upload field

• Select the option "category.name" in the dropdown.

• Select "Text" as the block category and insert the block named "Text" to the new section using drag and drop.

• Now click onto the block you just added and the block settings will open on the right. Do the following settings:

  • Block name: Category description

Now configure the element in this block.

• Click onto the link "Data Mapping" in the upper right above the image upload field.

• Select the option "category.description" in the dropdown.

For moving the listing a bit above the banner now configure the section with the listing element.

• CSS classes: twt-mt-n9 position-relative

Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate.

• Switch via the main navigation to "Content" => "Shopping Experiences".

• Select the landing page of the corresponding category and edit it.

• Add a new section "Full width" above the existing section.

Now configure the new section for the banner element.

• Section name: Highlights slider

• CSS classes: twt-mt-n7 twt-pt-9 bg-primary

• Sizing mode: Boxed content

Tip: Depending on the theme, you can replace the CSS class "bg-primary" by " bg-secondary" in the section.

• Select "Text" as the block category and insert the block named "Text" to the new section using drag and drop.

• Now click onto the block you just added and the block settings will open on the right. Do the following settings here:

  • Block name: Headline

Now configure the element in this block.

• Add your desired headline (e.g. "Current Highlights") via the text editor.

• Choose a centered text alignment

• Select "Commerce" as the block category and insert the block named "Product Slider" to the new section using drag and drop.

• Now click onto the block you just added and the block settings will open on the right. Do the following settings:

  • Block name: Product slider

Now configure the element in this block.

• Product assignment: manual

• Products: Select the desired products here

• Switch via the main navigation to the section "Content" => "Shopping Experiences".

• Choose the landing page of the corresponding category and edit it.

• Add a new section "Full width" above the existing section.

Now configure the new section for the banner element.

• Section name: SEO text

• Sizing mode: Boxed content

• Background colour: #fff

• Choose "Text" as the block category and insert the block named "Text" into the new section using drag and drop.

• Now click onto the block you just added and the block settings will open on the right. Do the following settings here:

  • Block name: SEO-Text

Now configure the element in this block.

• Add your desired SEO text for the corresponding category via the text editor.

Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate.

• Switch via the main navigation to the section "Content" => "Shopping Experiences".

• Select the landing page of the corresponding category and edit it.

• Choose "Text" as the block category and insert the block named "Text" to the existing section using drag and drop.

• Now click onto the block you just added and the block settings will open on the right. Do the following settings here:

  • General

Now configure every single element in this block.

• Add the text navigation using the text editor.

Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate.

Now the display image assigned to a category and the corresponding description are automatically loaded into the CMS element.

• Switch via the main navigation to the section "Contents" => "Shopping Experiences".

• Choose the landing page of the corresponding category and edit it.

• Select "Text" as the block category and insert the the block named "Text" to the existing section using drag and drop.

• Now click onto the block you just added and the block settings will open on the right. Do the following settings here:

  • General

Now configure the element in this block.

• Use the text editor to add your desired SEO text for the appropriate category.

Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where applicable.

• Switch via the main navigation to the section "Content" => "Shopping Experiences".

• Select the landing page of the corresponding category and edit it.

• Select "Text & Image" as the block category and add the block named "Two columns, boxed image & text" to the existing section using drag & drop.

• Now click on the block you just added, and the block settings will open on the right. Do the following settings here:

  • General

Now configure each element in this block.

• Element on the left, image

  • Click on the link "Data mapping" on the top right above the image upload field

  • Choose the option "category.media" from the dropdown list.

Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate.

Now the display image assigned to a category and the corresponding description will be automatically loaded into the CMS element.

• Switch via the main navigation to the section "Contents" => "Shopping Experiences".

• Choose the landing page of the corresponding category and edit it.

• Add a new section "Full width" above the existing section.

Now configure the new section for the banner element.

• Section name: SEO text

• Sizing mode: Boxed content

• Select "Text" as the block category and add the block named "Text" to the new section using drag and drop.

• Now click onto the block you just added and the block settings will open on the right. Do the following settings here:

  • Block name: SEO text

Now configure the element in this block.

• Add the desired SEO text for the corresponding category using the text editor.

Finally, save your changes of the Shopping Experience and assign them to the desired category(ies) where appropriate.

ThemeWare® "Grid" CMS blocks

Elements in "Grid" CMS blocks have a fixed spacing of 40px in Shopware 6. ThemeWare® provides you with various CSS classes to change this spacing.

With ThemeWare® 3.2 we have added the following CSS gap classes for ThemeWare® "Grid" CMS blocks as well as the standard "Grid" CMS blocks from Shopware.

CSS classes

The new CSS "Gap" classes also work in the "Columns" blocks of ThemeWare®.