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

![](https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FhLaICepXZPvgqUruSNDS%2Fcms-extensions--add-cms-block.png?alt=media\&token=ff0069d3-ee47-4dd6-8032-706281892262)

### **Pro Edition**

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

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

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FoLYRlRGmy47V6sTIBvnQ%2Fcms-extensions--pro-edition.png?alt=media&#x26;token=b0dce6c6-2a4f-450a-8787-eb555b08c47f" 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](https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FKSXkWGqBgtdPGo0tuuey%2Fcms-extensions--cloud-edition.png?alt=media\&token=512d0ce8-8dbb-4bfa-9a6b-cc674eab0ad6)

***

## 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="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2F9gtQubeHV1MzzEuGcyaz%2Fcms-extensions--block-settings.png?alt=media&#x26;token=75b0b0b2-638a-4178-9d65-315c035030a0" 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](https://docs.themeware.design/additional-features/cms-extensions/cms-elements "mention").

***

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