> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-block.md).

# CMS block

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

<figure><img src="/files/Osj3QdO5597rnCIjekk7" 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="/files/e0aMO8IhzzwTsnADDBan" 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="/files/R0A4s8Bf2QFVoUd5MShK" 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="/pages/36GIQa5eP4A8ff8MfCaO" %}
[CSS spacing classes for Shopping Experiences](/knowledge-base/tutorials/shopping-experiences/css-spacing-classes-for-shopping-experiences.md)
{% endcontent-ref %}

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

{% content-ref url="/pages/UB5aPw43IAjmOPecUP9g" %}
[Shopping Experiences](/knowledge-base/tutorials/shopping-experiences.md)
{% 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](/knowledge-base/basic-knowledge/shopping-experiences/cms-element.md).

***

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