# CMS section

Each [CMS layout](/knowledge-base/basic-knowledge/shopping-experiences/cms-layout.md) is made up of one or more CMS sections. This allows many different designs to be implemented with fullwidth and/or boxed sections.

There are currently two types of CMS sections: "Sidebar" and "Full width". In other words, a section with a sidebar and a section without a sidebar.

<figure><img src="/files/Cf6Ygy80MBPJh8bL2PDm" alt="" width="289"><figcaption><p>Section types (Sizing mode)</p></figcaption></figure>

A CMS section is filled with one or more CMS blocks. Read more about this in the following article.

<figure><img src="/files/3aFapQ9hOxtUgSHQk6s2" alt=""><figcaption><p>CMS section</p></figcaption></figure>

***

## Add CMS section

A new layout already contains a CMS section. To add another section before an existing section, click on the ![](/files/IFt2YC3goQKh0HgQ1X0W) "plus" icon (1) above the section. To add a section after an existing section, click on the "plus" icon (2) below the section.

<figure><img src="/files/0D5KT2q14bAWAbOCYRSD" alt=""><figcaption><p>Add a CMS section</p></figcaption></figure>

Now you can choose between the two available types of CMS sections ("Sidebar" and "Full width").

<figure><img src="/files/B6d666Wow4WW9Rh6eJLx" alt=""><figcaption><p>CMS sections</p></figcaption></figure>

***

## Section settings

You can access the settings for a CMS section via the ![](/files/UsWuCMGNSlKSAKPJ9OY4) "layout" icon (1) on the left edge of the corresponding section. Clicking on it opens the sidebar (2) in which you will find the section settings. Here you can change the name and the sizing mode of the section.

<figure><img src="/files/N24NvIMfVe43HU2iCvc3" alt=""><figcaption><p>Section settings</p></figcaption></figure>

### Settings

You can give each section a **name** and assign **CSS classes**. You can select the **sizing mode** for each section and set a **background colour** and a **background image**. In the "**Visibility**" section you can define on which device the section should be displayed.

***

## Section in the editor an the Storefront

The representation of CMS sections in the Shopping Experience editor in Shopware 6 differs slightly from the actual representation in the Storefront. A CMS section always extends over the full width (unless you use the ThemeWare® boxed layout) of the Shopping Experience. The content of a section can then be displayed "full width" or "boxed".

Below you can see a comparison of a CMS section in the Shopping Experience editor and in the Storefront.

1. CMS section (1) \[Background colour: ![](/files/JX7IBDILvd44sCegrK6g) #ffd181]
2. CMS block (2) \[Background colour: ![](/files/hEMv8MqnMYaHMUdFRlEf) #ff8d30]
3. CMS element (3)

<figure><img src="/files/Sjfw7KuRqTC3QEoXy0H5" alt=""><figcaption><p>Section in the Shopping Experience editor</p></figcaption></figure>

<figure><img src="/files/H0t3dvVCpACeNQ46HmkG" alt=""><figcaption><p>Section in the Storefront (Boxed)</p></figcaption></figure>

<figure><img src="/files/DK9GIbJ4tIlEEaLTwXhv" alt=""><figcaption><p>Section in the Storefront (Full width)</p></figcaption></figure>

***

#### Further information

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