> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/introduction/understanding-shopping-experiences.md).

# Understanding Shopping Experiences

Shopping Experiences are the modular content system of Shopware 6 (CMS). With it you design pages freely, without any programming knowledge. ThemeWare® extends this system with numerous additional blocks and elements.

## The structure of a Shopping Experience

| Level       | Meaning                                                                                |
| ----------- | -------------------------------------------------------------------------------------- |
| **Layout**  | The entire Shopping Experience, with a layout type (for example "Shop page")           |
| **Section** | A horizontal area within the layout, either full width or with a sidebar               |
| **Block**   | A building block within a section, for example an image text block or a product slider |
| **Element** | The actual content within a block, for example an image, a text or a product slider    |

## The layout types

When creating a Shopping Experience you select the "**Layout type**". It defines what the layout can be used for:

* "**Shop page**": for pages such as "About us", "Contact" or "Shipping and payment"
* "**Landing page**": for campaign and promotion pages
* "**Listing page**": for categories including the product listing
* "**Product page**": for product detail pages

{% hint style="info" %}
**Note**: You can change the layout type afterwards in the layout settings. The layout type "Product page" is an exception, it cannot be changed anymore.
{% endhint %}

## Creating a Shopping Experience

1. Open the administration of your shop
2. Switch via the main navigation to "**Content**" => "**Shopping Experiences**"
3. Click on "**Create new layout**"
4. Select the "**Layout type**" and a starting layout
5. Enter a "**Layout name**"
6. Build your layout from sections, blocks and elements
7. Save the layout

## Assigning layouts

A layout only becomes visible once you assign it. The assignment always takes place at the respective object:

| Layout type  | Assignment                                                  |
| ------------ | ----------------------------------------------------------- |
| Shop page    | At a category of the type "Page / List" in the tab "Layout" |
| Landing page | At the landing page in the tab "Layout"                     |
| Listing page | At the category in the tab "Layout"                         |
| Product page | At the product in the tab "Layout"                          |

Use the button "**Assign layout**" or "**Change layout**" to select the desired layout.

{% hint style="success" %}
**Tip**: A layout can be assigned several times. If you change the layout, all pages that use it change as well.
{% endhint %}

## ThemeWare® blocks and elements

When editing a Shopping Experience you will find the categories of ThemeWare® next to the Shopware categories in the block selection:

* ThemeWare® General
* ThemeWare® Category teasers
* ThemeWare® Banners
* ThemeWare® Columns
* ThemeWare® Grids
* ThemeWare® Text & images
* ThemeWare® Listing page
* ThemeWare® Product page
* ThemeWare® Sale
* ThemeWare® Sidebar
* ThemeWare® Other

## Configuring Shopping Experiences in the theme

You will find the general settings for Shopping Experiences in the theme configuration:

* Tab "**Shopping Experiences**" => Block "**All types (Shop pages, Landing pages, Listing pages, Product pages)**": spacings and CSS scroll animations
* Tab "**Shopping Experiences**" => Block "**ThemeWare® CMS styling**": here you define among others whether the "**ThemeWare® CMS styling**" is loaded for CMS shop pages, CMS landing pages, CMS listing pages and CMS product pages, and configure spacings, background and border colours of CMS sections and CMS blocks

There are additional separate blocks for individual ThemeWare® blocks, for example "**Image slider (Category 'Images')**", "**Image gallery (Category 'Images')**" or "**Product slider (Category 'Commerce')**".

***

## Further information

* Introduction: [Setting up the home page (ThemeWare® Shopping Experience)](/knowledge-base/introduction/startseite-themeware-erlebniswelt-einrichten.md)
* Introduction: [Editing and creating shop pages](/knowledge-base/introduction/editing-and-creating-shop-pages.md)