# CMS blocks

In this section you will find everything about the **ThemeWare® CMS blocks** which you can select in the "Block categories" and add to your Shopping Experiences.

## ThemeWare® CMS blocks

With ThemeWare® you get an extensive and growing selection of CMS blocks to customize your shop. The ThemeWare® CMS blocks are available from version 0.5.0 in the **Pro Edition** and some of them in the **Cloud Edition**.

More CMS blocks are in the pipeline for both the Pro Edition and the Cloud Edition and will follow with upcoming updates. Be curious!

{% hint style="success" %}
**Tip**: If you have further ideas or wishes for existing or new blocks, please send us your [suggestions for improvement](https://service.themeware.design/en/feature-request) via our Service Portal.
{% endhint %}

***

## Add a ThemeWare® CMS block

1. Click on the plus icon to select a CMS block.
2. Select the desired CMS block in the "Block category" dropdown.
3. Drag'n'drop the CMS block into your Shopping Experience.

![](/files/jie8fuWh9cAPvSf8EqRn)

### **Pro Edition**

In the ThemeWare® Pro Edition, the ThemeWare® CMS blocks have their own categories and are structured according to the following pattern:

* **ThemeWare® General**
  * Contains basic design blocks such as sliders, teasers and banners.
* **ThemeWare® Columns**
  * Contains column blocks that can be filled as desired.
* **ThemeWare® Grids**
  * Contains grid blocks that can be filled with picture elements.
* **ThemeWare® Listing page**
  * Contains CMS blocks for listing pages.
* **ThemeWare® Product page**
  * Contains CMS blocks for product pages.
* **ThemeWare® Sidebar**
  * Contains CMS blocks for the sidebar.
* **ThemeWare® Other**
  * Contains further cross-page CMS blocks.

<figure><img src="/files/NYPyYkrcgvGkuSrpkJm4" alt="" width="336"><figcaption><p>ThemeWare® Pro Edition</p></figcaption></figure>

### **Cloud Edition**

In the ThemeWare® Cloud Edition you will find the ThemeWare® CMS blocks in the default Shopware categories (see "Text & Images").

![ThemeWare® Cloud Edition](/files/68DMJ2SsBuIdx1sKeXkc)

***

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

<figure><img src="/files/tuvMnikOxpgWzYomYUSl" alt="" width="347"><figcaption><p>Block settings</p></figcaption></figure>

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

{% embed url="<https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/css-spacing-classes-for-shopping-experiences>" %}
ThemeWare® Knowledge Base => CSS spacing classes for Shopping Experiences
{% endembed %}

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

{% embed url="<https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences>" %}
ThemeWare® Knowledge Base => Shopping Experiences
{% endembed %}

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.

***

## Style CMS block individually

You can style a specific CMS block using CSS by assigning a custom CSS class in the block settings and defining the desired styles either in your stylesheet or within your theme configuration.

***

## Replace CMS element

You can replace the CMS elements in most CMS blocks. You can learn more about this in the article [CMS elements](/additional-features/cms-extensions/cms-elements.md).

***

## Further information

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

{% embed url="<https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-block>" %}
ThemeWare® Knowledge Base
{% 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://docs.themeware.design/additional-features/cms-extensions/cms-blocks.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.