ThemeWare® CSS classes for Shopping Experiences

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