CMS block

CMS blocks have one or more slots. The slots (often columns) are each filled with one CMS element.

CMS block

---

Add CMS block

• Click on the plus icon to select a CMS block

• Select the desired CMS block in the "Block category" dropdown

• Drag'n'drop the CMS block into your Shopping Experience

Add CMS block

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 margins of the block.

Block settings

Settings

You can give each block a name and add CSS classes. You can also define margins (technically it is the padding) of the block and assign a background colour and a background image. In the "Visibility" section you can also define on which device the block should be displayed.

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:

CSS spacing classes for Shopping Experiences

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

Shopping Experiences

In addition, you can also use CSS classes: from Bootstrap, since the storefront in Shopware 6 is based on Bootstrap 5.

---

Replace CMS element

You can replace the CMS elements in most CMS blocks. You can learn more about this in the article CMS element.

---

Further information

You can find more information about ThemeWare® CMS blocks in the ThemeWare® Manual:

CMS blocks | ThemeWare® Manualdocs.themeware.design

ThemeWare® Manual

You can find more information about the Shopping Experience in Shopware 6 in the Shopware documentation:

Shopware 6 - Content - Shopping Experiencesdocs.shopware.com

Shopware documentation: Shopping Experiences