Insert grid blocks in shopping experiences

You insert grid layouts like any other CMS block – via an additional selector in the left sidebar of the shopping experience editor.

The custom block category

Below the standard category selector in the block picker, the plugin adds a second dropdown: Custom block category. It gives you access to all grid blocks, grouped by layout type:

Group	Contents
Columns (equal)	Single-row layouts with equal-width columns (full width, 2–8 columns).
Columns (unequal)	Single-row layouts with unequal columns (e.g. 1/3, 2/3).
Multi-row	Layouts across several rows (e.g. "6 columns, 3 top, 3 bottom").
Custom blocks	Your own saved grid templates.

In total there are 23 ready-made presets available with no setup. Your own templates appear additionally under Custom blocks.

Standard and custom selectors work together

As soon as you pick a group from the Custom block category, the block list shows the matching grid blocks. Pick a standard category again (or clear the custom selector via the ×) and the normal block list returns. Grid blocks deliberately do not appear in the standard category to avoid duplication.

Insert and fill a grid

1. Open a shopping experience under Content → Shopping Experiences for editing.
2. Open the block picker (left sidebar).
3. Under Custom block category, pick a group and the layout you want.
4. Drag the block onto the canvas.
5. The block now contains empty Grid Slots. Each slot is a placeholder with the note:

   "This slot is a placeholder. Replace it with another element to add content."

6. Replace each placeholder with any CMS element (text, image, product slider …) and edit the content as usual.

Layout only settles in the preview

In the editor you see the slots as a placeholder grid. Check the final responsive behavior (e.g. the stacked mobile layout) best in the storefront preview.

Create a template right from the editor

You don't have to leave the shopping experience editor to create a new template:

1. Use the Create grid action in the sidebar. A dialog with the familiar grid editor opens.
2. Enter a Name and configure the grid.
3. Click Save. The new template is then available under Custom blocks.

Use Go to Grid Overview to jump into the full template list under Content → Dynamic Grids when needed.

Screenshot checklist

• [ ] Block picker with Custom block category and expanded groups
• [ ] Inserted grid block with Grid Slot placeholders
• [ ] Slot replaced with a real CMS element
• [ ] Create new grid dialog from the sidebar