# CMS block

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

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FSesPaBhpp43K9JYnhZI8%2Fimage.png?alt=media&#x26;token=42ae7b85-ba53-4e0e-838a-a75bc3fcbd0d" alt=""><figcaption><p>CMS block</p></figcaption></figure>

***

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

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FSHoVHcHjQf5UHFxPM8JW%2Fcms-extensions--add-cms-block.png?alt=media&#x26;token=bdb81831-9826-4208-a5b4-bdfaa96db958" alt=""><figcaption><p>Add CMS block</p></figcaption></figure>

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

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-de29f7eb6d07134c991316743ca2def3e9ed6429%2Fcms-extensions--block-settings.png?alt=media" alt="" width="231"><figcaption><p>Block settings</p></figcaption></figure>

### 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:

{% content-ref url="../../tutorials/shopping-experiences/css-spacing-classes-for-shopping-experiences" %}
[css-spacing-classes-for-shopping-experiences](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/css-spacing-classes-for-shopping-experiences)
{% endcontent-ref %}

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

{% content-ref url="../../tutorials/shopping-experiences" %}
[shopping-experiences](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences)
{% endcontent-ref %}

In addition, you can also use CSS classes: from [Bootstrap](https://getbootstrap.com/docs/5.1/getting-started/introduction/), 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](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-element "mention").

***

#### Further information

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

{% embed url="<https://docs.themeware.design/additional-features/cms-extensions/cms-blocks>" %}
ThemeWare® Manual
{% endembed %}

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

{% embed url="<https://docs.shopware.com/en/shopware-6-en/content/ShoppingExperiences>" %}
Shopware documentation: Shopping Experiences
{% endembed %}