Live demo
GRID BUILDER PRO
Every layout on this page was built with GRID BUILDER PRO – right inside Shopping Experiences, without a single line of CSS. Each grid has its own arrangement for desktop, laptop, tablet and smartphone.
Tip: make your browser window narrower or open this page on your phone – the grids rearrange per device. Below each example you can read what changes.
1 · Hero with two teasers
Desktop & laptop: large image left, teasers stacked on the right · Tablet: image on top, teasers side by side · Smartphone: image teaser hidden
2 · Lookbook mosaic
Desktop & laptop: five tiles in three sizes, portraits spanning two rows · Tablet: two columns · Smartphone: one column, last tile hidden
3 · Shop the look
Desktop: portrait look next to four products in a 2×2 grid · Laptop, tablet & smartphone: the portrait is hidden and replaced by a flat landscape image above the products
4 · Tiles with their own style
Background colour, corner radius, padding and vertical alignment per tile · Desktop: four in a row · Laptop & tablet: 2×2 · Smartphone: stacked
Your try-out area
Add your own test grids here: in the administration open Content › Shopping Experiences, edit the layout “GRID BUILDER Demo” and add a block from the “Grid Builder” category below this text.
Please leave the examples above unchanged so other visitors can see them too.