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


---

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