How to configure responsive layouts
CMS Block Builder lets you define independent grid layouts for desktop, tablet, and mobile. The storefront automatically shows the correct layout for the visitor's viewport. This guide explains how to set up and adjust these responsive breakpoints.
Prerequisites
- A custom block has been created and opened in the Block Builder detail view.
- The Desktop layout is already defined (responsive layouts are based on the desktop layout).
Understanding breakpoints
The composer has three breakpoint tabs:
| Tab | Shopware breakpoint | When it applies |
|---|---|---|
| Desktop | > md (> 768 px) | Default — always visible unless overridden |
| Tablet | md and below (≤ 768 px) | Shown only when a tablet layout is configured |
| Mobile | sm and below (≤ 576 px) | Shown only when a mobile layout is configured |
Element assignments (which element type goes in which slot) are always set on the Desktop tab and shared across all breakpoints. Tablet and Mobile tabs only control where each slot is positioned on the grid — not what element it contains.
If you do not configure a tablet or mobile layout, the desktop layout is used at all viewport sizes.
Step 1 — Switch to the Tablet tab
Click the Tablet icon in the breakpoint tab bar at the top of the Block Composer.
The grid is empty if you have not configured a tablet layout yet. You see an empty-state message.
Step 2 — Copy the desktop layout as a starting point
Click Copy layout from Desktop. The tablet grid now shows the same areas as the desktop.
Step 3 — Reposition areas for tablet
On the tablet tab, you can reposition each slot but cannot add new slots or change element types.
To move a slot:
- In the slot selector above the grid, click the slot you want to reposition (e.g.
slot-0 (Image)). - The slot is highlighted as the one to draw.
- First remove its current area by hovering over it and clicking the × button. The area disappears and the slot returns to the unplaced list.
- Draw a new area on the grid for that slot — click and drag to the desired position and size.
- The slot is placed at the new position.
Repeat for each slot that needs a different position on tablet.
Step 4 — Configure the mobile layout
Switch to the Mobile tab and repeat steps 2–3. A common mobile layout stacks all slots vertically (each spanning all 12 columns, one row each).
Step 5 — Save
Click Save. The storefront now renders:
- The desktop grid at
> 768 px. - The tablet grid at
≤ 768 px(if configured). - The mobile grid at
≤ 576 px(if configured).
If tablet or mobile is not configured, the desktop layout is used as a fallback.
Testing the responsive behaviour
Open the page in the storefront and use your browser's developer tools (responsive design mode) to simulate different viewport widths. Verify that the block switches to the correct layout at each breakpoint.
What you cannot do on tablet/mobile tabs
- Add new slots (areas can only be placed for existing desktop slots).
- Assign or swap element types (always done on the Desktop tab).
- Apply presets (presets only apply on the Desktop tab).
- Add or remove rows (row count is set on the Desktop tab).
If you need a fundamentally different layout for a breakpoint, create a separate block designed for that viewport and conditionally place it on the page using Shopware's section visibility settings.