# Shopping Experiences

Shopping Experiences are a core feature of Shopware 6 and replace the Shopping Worlds from Shopware 5. With Shopping Experiences you can create and design **content pages** like **landing pages**, **shop pages**, **category pages** and **product pages**.

{% hint style="info" %}
**Note**: You can find all the information about ThemeWare® features and extensions for Shopping Experiences in Shopware 6 in the ThemeWare® Manual: [Shopping Experiences](https://docs.themeware.design/more-knowledge/shopping-experiences).
{% endhint %}

***

## Basics

Each Shopping Experience is based on a "layout". There are different layout types (landing page, shop page, category page and product page).

### Shopping Experience management

You can create or open a layout using the Shopware 6 Shopping Experiences management. You can access this via the menu item **Content** => **Shopping Experiences** in your administration.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fv3ZNOJDkW8lnfELtWEkA%2Fimage.png?alt=media&#x26;token=f19e7c1d-a9d1-4554-9a44-1d6c6554bb49" alt=""><figcaption><p>Shopping Experience management</p></figcaption></figure>

### CMS editor (Shopping Experience editor)

When you create or open a layout, you will be taken to the Shopping Experience editor (CMS editor for short). In this WYSIWYG editor (1), you can edit your Shopping Experience layout and get a rough preview at the same time.&#x20;

You can also make general settings in the sidebar (2), such as the name of the layout or the CSS class of the experience world in the storefront.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2F82cPXsOadByop5AW4PI9%2Fimage.png?alt=media&#x26;token=246c4803-1f7e-461e-b1b8-f0f4cfc6af28" alt=""><figcaption><p>Shopping Experience editor</p></figcaption></figure>

### CMS layout (Shopping Experience layout)

A **layout** (see [cms-layout](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-layout "mention")) consists of one or more **sections** (1, see [cms-section](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-section "mention")) into which individual **blocks** (2, see [cms-block](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-block "mention")) are added, which themselves consist of one or more **elements** (3, see [cms-element](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-element "mention")) such as texts or images.

Below you can see a layout of type "Landingpage" in the Shopping Experience editor of Shopware 6:

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FAy7MfKxlWu2mLwgRUc7r%2Fthemeware--elements-cms-layout.png?alt=media&#x26;token=0611c8df-f82e-4475-981b-690e103a6049" alt=""><figcaption><p>CMS layout in editor: (1) CMS section - (2) CMS block - (3) CMS element</p></figcaption></figure>

{% content-ref url="shopping-experiences/cms-layout" %}
[cms-layout](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-layout)
{% endcontent-ref %}

### CMS section

A **CMS section** (1) consists of one or more CMS blocks. You can make basic settings (2) for each section in the sidebar, such as the name of the section, the CSS class or the background colour of the section in the storefront.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FfE54r3R6J2g0ohYdPZlY%2Fimage.png?alt=media&#x26;token=361bc7e3-d43d-4601-bcf9-eeac15f40245" alt=""><figcaption><p>CMS section</p></figcaption></figure>

{% content-ref url="shopping-experiences/cms-section" %}
[cms-section](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-section)
{% endcontent-ref %}

### CMS block

A **CMS block** (1) contains one or more CMS elements. You can make basic settings (2) for each block in the sidebar, such as the name of the block, the CSS class, the background colour or the spacing of the block in the storefront.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fqnu4LilCDoAJ8rEBzxn5%2Fadmin--cms-block.png?alt=media&#x26;token=f253c239-0d31-42ec-aae7-c3cc2c9566a5" alt=""><figcaption><p>CMS block</p></figcaption></figure>

{% content-ref url="shopping-experiences/cms-block" %}
[cms-block](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-block)
{% endcontent-ref %}

### CMS element

You can configure a **CMS element** (1) by clicking on the corresponding element and then on the cogwheel symbol (2) (top right of the element).

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FQbGE4C3cU34ql9CBVGBn%2Fimage.png?alt=media&#x26;token=bedeb9f1-8ddd-42c8-b58d-077bec962fb0" alt=""><figcaption><p>CMS element</p></figcaption></figure>

{% content-ref url="shopping-experiences/cms-element" %}
[cms-element](https://knowledge.themeware.design/knowledge-base/basic-knowledge/shopping-experiences/cms-element)
{% endcontent-ref %}

### CMS element configuration

Configuring a CMS element is fairly intuitive. Like our theme itself, ThemeWare® CMS elements offer you a wide range of configuration options. Just try them out or look at the relevant help texts. You can also find more information about our elements in the **ThemeWare® Manual**.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2F5jYUQ3zPdfLUo248b5ac%2Fimage.png?alt=media&#x26;token=5ca6c8e2-ed7a-47c5-adb6-ee2c33286d03" alt=""><figcaption></figcaption></figure>

### CMS extensions

With **ThemeWare®** you get an extensive collection of sales promoting CMS blocks and CMS elements.&#x20;

Since an element does not have to belong to every block and vice versa, we speak of **CMS extensions**.

{% hint style="info" %}
**Tip**: Before you start editing your Shopping Experiences, we recommend you take a look at the official **Shopware documentation**: [Shopping Experiences](https://docs.shopware.com/en/shopware-6-en/content/ShoppingExperiences)
{% endhint %}

***

#### Tip: Background colour/image

You can configure a **background colour** and/or a **background image** for CMS sections as well as for CMS blocks. This already offers you various design options. Even more design options are provided by the corresponding CMS elements from Shopware and ThemeWare® Pro.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FTDB0Vg1KSfGsaZsGzeOB%2Fcms-section-in-the-storefront.png?alt=media&#x26;token=d8210f7d-2646-46f1-ace8-4748174ff4a4" alt=""><figcaption><p>Storefront: (1) CMS section - (2) CMS block - (3) CMS element</p></figcaption></figure>

***

## Multilingual

If you want to configure an alternative language in a CMS element, you can simply change the language in the top right corner of the editor of the corresponding Shopping Experience.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2F8D95bwqC3PfP7B4TKtoZ%2Fcms-extensions--change-language.png?alt=media&#x26;token=b63be131-9e2c-4662-915d-ff3f6ef4be37" alt=""><figcaption><p>Shopping Experience: Switch language</p></figcaption></figure>

***

#### Further information

You can find all information about features and extensions of ThemeWare® for Shopping Experiences in Shopware 6 in the ThemeWare® Manual:

{% embed url="<https://docs.themeware.design/additional-features/cms-extensions>" %}
ThemeWare® Manual: Sales promoting Shopping Experiences with ThemeWare®
{% 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 %}