> 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/tutorials/shopping-experiences/responsive-shopping-experiences.md).

# Responsive Shopping Experiences

With Shopware 6.4.19.0 you can easily set the visibility of sections and blocks in the Shopping Experience editor.

## 1. Shopping Experience

1. Switch to the **Shopping Experiences Management** via the main navigation ("Content" => "Shopping Experiences")
2. Click on the desired Shopping Experience to edit it.
3. The Shopping Experience now opens in the **Shopping Experience editor**

## 2. Section

1. Click on the button ![](/files/DfIYs2l1060vmM8R0PKj) in the top left corner of the CMS section you want to edit (1)
2. The **section settings** open on the right side of the window (2)
3. Open the section "**Visibility**" (3)

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

## 2. Block

1. Click on the CMS block you want to edit (1)
2. The **block settings** open on the right side of the window (2)
3. Open the section "**Visibility**" (3)

<figure><img src="/files/fw4h7PGrka29rwUZ55D3" alt=""><figcaption><p>Block settings</p></figcaption></figure>

## 3. Visability

In the section "Visibility" (3) you can now configure the section or block for three viewports (4).

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Mobile</strong></td><td>0 px bis 767 px</td><td><a href="/files/Zrqt0ijrAypA672fTiNU">/files/Zrqt0ijrAypA672fTiNU</a></td></tr><tr><td><strong>Tablet</strong></td><td>768 px bis 991 px</td><td><a href="/files/4Lfdn4tyd40ErJ3C4axk">/files/4Lfdn4tyd40ErJ3C4axk</a></td></tr><tr><td><strong>Desktop</strong></td><td>ab 992 px</td><td><a href="/files/MjMrvr64MUqrmrD3N20b">/files/MjMrvr64MUqrmrD3N20b</a></td></tr></tbody></table>

In the editor, invisible CMS sections or CMS blocks are "collapsed".

* With a click on the link "**Collapse section**" or "**Expand section**" (5) you can collapse/expand an invisible CMS section in order to edit it.
* With a click on the link "**Collapse block**" or "**Expand block**" (5) you can collapse/expand an invisible CMS block in order to edit it.

<div><figure><img src="/files/b8aHaF6hYx2Q8sr8PihB" alt=""><figcaption><p>Invisible CMS section</p></figcaption></figure> <figure><img src="/files/Kc5tqpIIWdBeA77p6BAP" alt=""><figcaption><p>Invisible CMS block</p></figcaption></figure></div>

{% hint style="info" %}
**Note**: Please note that Shopware just adds a CSS class to the section or block. The element is therefore invisible, the HTML code is still present in the storefront.
{% endhint %}

{% hint style="success" %}
**Tip**: Until Shopware allows more viewports, the Bootstrap CSS classes from ThemeWare® offer you further configuration options for the visibility of CMS sections and CMS blocks: see [Responsive Shopping Experiences with Bootstrap](/knowledge-base/tutorials/shopping-experiences/responsive-shopping-experiences-with-bootstrap.md)
{% endhint %}
