Promo grid
A dense mosaic of promotions: collections, single products and offers in tiles of four sizes. Each tile can have its own image, text and colors.
- In the editor
- Promo grid
- Where it goes
- Any page template, with Add section
- In the presets
- Index: Home page
- Settings
- 24
- Blocks
- Promo tile, Product tile
- App blocks
- Yes
When to use it
The promo grid puts many offers on one screen without feeling crowded – this month's deals, new arrivals, a seasonal collection and a hero product side by side. It is the This month's offers section on the Index home page.
Set it up
- Choose Columns on desktop: 3 or 4.
- Add Promo tile and Product tile blocks. Each has a Size: Small (1 × 1), Wide (2 × 1), Tall (1 × 2) or Large (2 × 2).
- Tiles fill the grid in order. Reorder them until the mosaic closes neatly – a large tile first, then smaller ones, usually works.
- Set Row height for desktop and mobile.
Promo tile
Pick a Collection to fill the image, title, link and product count, or set your own Image, Small text above the heading, Heading, Text and Link label.
- Style: Text on image, with Image darkness for contrast, or Text on color, which uses the tile's Color scheme – a calm color block between photos.
- Text position: bottom left, top left or center.
- Show placeholder when there is no image keeps the layout while you prepare photos.
Product tile
One product with its photo and price. Image fit: Whole product (on the tile's background – best for cut-outs) or Fill the tile.
Colors per tile
Every tile has its own Text, Small text, Price and Background colors under Colors. Use them when a color scheme does not suit a particular photo – for example dark text on a pale image.
Hover effect
Zoom and lift, Zoom the image, Lift the tile, Darken the image or None, with a Zoom amount. Only tiles with a link react, and only with a mouse.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Promo grid24 settings
| Setting | Options | Default |
|---|---|---|
| Heading | Rich text (one line) | Sample text |
| Text | Rich text | – |
| Heading size | Large · Medium · Small | Medium |
| Link next to the heading | Text | – |
| Link | Link | – |
| Grid | ||
| Columns on desktop | 3 · 4 | 4 |
| Row height | 160–400px | 240px |
| Row height on mobile | 120–320px | 180px |
| Color scheme | Color scheme | Scheme 1 |
| Hover effect | ||
| Effect | Zoom and lift · Zoom the image · Lift the tile · Darken the image · None | Zoom and lift |
| Zoom | 101–112% | 105% |
| Grid spacing | ||
| Use custom spacingOtherwise the section keeps its built-in spacing. | Checkbox | Off |
| Space between columns | 0–120px | 20px |
| Space between rows | 0–96px | 20px |
| Space between columns on mobile | 0–64px | 8px |
| Space between rows on mobile | 0–64px | 8px |
| Section spacing | ||
| Top padding | 0–160px | 40px |
| Bottom padding | 0–160px | 104px |
| Top padding on mobile | 0–120px | 24px |
| Bottom padding on mobile | 0–120px | 72px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Promo tile17 settings
| Setting | Options | Default |
|---|---|---|
| Size | Small · Wide · Tall · Large | Small |
| CollectionFills the image, title, link and product count. Settings below replace them. | Collection | – |
| Image | Image | – |
| Style | Text on image · Text on color | Text on image |
| Show placeholder when there is no image | Checkbox | On |
| Image darkness | 0–80% | 30% |
| Text position | Bottom left · Top left · Center | Bottom left |
| Small text above the heading | Text | – |
| Heading | Text | – |
| Text | Text | – |
| Link label | Text | Sample text |
| Link | Link | – |
| Show product count | Checkbox | Off |
| Colors | ||
| Text | Color | – |
| Small text | Color | – |
| Background | Color | – |
| Color schemeUsed by the Text on color style. | Color scheme | Scheme 2 |
Block: Product tile9 settings
| Setting | Options | Default |
|---|---|---|
| Size | Small · Wide · Tall · Large | Small |
| Product | Product | – |
| Small text above the title | Text | Sample text |
| Image fit | Whole product · Fill the tile | Whole product |
| Colors | ||
| Text | Color | – |
| Small text | Color | – |
| Price | Color | – |
| Background | Color | – |
| Color scheme | Color scheme | Scheme 2 |