ThemeWare® CSS classes for Shopping Experiences

In this tutorial you will find an overview of the 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:

Block settings in the Shopping Experience editor

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.

Tip: It is possible to combine different effects by applying several classes in one block.

Note: If you are missing a CSS class, update ThemeWare® to the latest version.

---

---

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

Left: with ThemeWare® CMS styling | Right: without ThemeWare® CMS styling

Please find more information in our article:

ThemeWare® CMS styling for Shopping Experiences

---

Spacing classes

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

Left: Default spacing | Right: Spacing class "twt-mb-5"

Please find more information in our article:

CSS spacing classes for Shopping Experiences

---

Full-width sections

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

Left: "Full width" section | Right: "Full width" section with a boxed CMS block

Please find more information in our article:

CSS classes for full-width sections

---

Decoration classes for images

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

Right: Decoration class "twt-cms-image-border-semi"

Please find more information in our article:

Embellishing images in CMS blocks

---

Hover effects for images

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

Examples

Right: Hover effect "twt-cms-image-hover-grayscale"

Please find more information in our article:

Embellishing images in CMS blocks with hover effects

---

CSS scroll animations

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

Class	Block/Section	Description
twt-cms-animation	Block	Animates a CMS block and HTML elements with an animation selected in the theme configuration as soon as the element is being scrolled into the visible area.

Example

Right: CSS scroll animation "Fade-in"

Please find more information in our article:

Embellishing Shopping Experiences with CSS animations

Animations (for experienced users)

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

---

Column spacings in CMS blocks

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

Example

Left: Default column spacing | Right: twt-cms-col-padding-10

Please find more information in our article:

Adjusting column spacings in CMS blocks

---

Headlines in CMS blocks

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

Headlines in CMS blocks

Please find more information in our article:

Designing headlines in CMS blocks

---

Demoshops

Start pages of the demoshops (Home)

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.

Note: You may get a "step-by-step PDF guide" for our Shopping Experiences via the ThemeWare® Utilities free of charges.

CSS clsses

Class	Block/Section	Description
twt-custom-cms-text-two-column-usp-list	Block	Highlights a list of benefits in the right block of a "two column element" with green check marks.
twt-custom-cms-imagetext-teaser-1	Section	Improved representation and text alignment for a "two column element" (image on the left and text on the right) in the section size mode "Full width". Optimal for displaying a teaser/banner.
twt-custom-cms-about-photo	Block	Improved representation and text alignment for a "two column element" with an image on the left and additional text information on the right. Optimal for presenting a contact person. In addition, the class "dark" can be used in order to display the background of a very dark Shopping Experience in a light colour.

Overlay banner (Mountain air)

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

Note: Please find an example in the category "Mountain air & Adventure" in ourdemoshops: Mountain air & Adventure

CSS classes

Class	Block/Section	Description
twt-custom-cms-element-overlay-primary	Section	Overlays the background image of a section with the primary colour (opacity 85%). Optimal for showing text information on a background image.
twt-custom-cms-element-overlay-secondary	Section	Overlays the background image of a section with the secondary colour (opacity 85%). Optimal for showing text information on a background image.
twt-custom-cms-element-overlay-success	Section	Overlays the background image of a section with the status colour "Success" (opacity 85%). Optimal for showing text information on a background image.
twt-custom-cms-element-overlay-info	Section	Overlays the background image of a section with the status colour "Information" (opacity 85%). Optimal for showing text information on a background image.
twt-custom-cms-element-overlay-warning	Section	Overlays the background image of a section with the status colour "Notice" (opacity 85%). Optimal for showing text information on a background image.
twt-custom-cms-element-overlay-danger	Section	Overlays the background image of a section with the status colour "Error" (opacity 85%). Optimal for showing text information on a background image.
twt-custom-cms-element-overlay-light	Section	Overlays the background image of a section with the colour white (opacity 85%). Optimal for showing text information on a background image.
twt-custom-cms-element-overlay-dark	Section	Overlays the background image of a section with the colour black (opacity 85%). Optimal for showing text information on a background image.

Example

CSS-Klasse: twt-custom-cms-element-overlay-primary

---

Miscellaneous

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

CSS classes

Class	Block/Section	Description
container	Block, Section	In Shopping Experience sections with the "Full width" layout, it sometimes is useful to place a content block in the "Boxed" layout. You may realize this with the class "container". An example of this is the category banner in the category "Höhenluft & Abenteuer" of our demoshops.

Examples

Example with "container" class

Example without "container" class