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!

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.

Replace ThemeWare® CMS element

1. Move the mouse over the CMS block

2. Click on the "Replace" icon (1)

3. The pop-up "Select element" opens

4. Select the desired CMS element (2)

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

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.

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.

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

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:

<div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
    <div class="cms-element-twt-modern-teaser element ...">
    ...

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

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

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.

Further information

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

CMS elementThemeWare® Knowledge Base