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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-block.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.