# 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.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/promo-grid/

## At a glance

- **In the editor:** Promo grid
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: 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 Tally home page.

## Set it up

1. Choose **Columns on desktop**: 3 or 4.
2. Add **Promo tile** and **Product tile** blocks. Each has a **Size**: *Small* (1 × 1), *Wide* (2 × 1), *Tall* (1 × 2) or *Large* (2 × 2).
3. Tiles fill the grid in order. Reorder them until the mosaic closes neatly – a large tile first, then smaller ones, usually works.
4. 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 grid** (24 settings, in editor order)

| 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*

| Setting | Options | Default |
| --- | --- | --- |
| **Columns on desktop** | 3 · 4 | 4 |
| **Row height** | 160–400px (step 10) | 240px |
| **Row height on mobile** | 120–320px (step 10) | 180px |
| **Color scheme** | Color scheme | Scheme 1 |

*Hover effect*

| Setting | Options | Default |
| --- | --- | --- |
| **Effect** | Zoom and lift · Zoom the image · Lift the tile · Darken the image · None | Zoom and lift |
| **Zoom** | 101–112% (step 1) | 105% |

*Grid spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Use custom spacing** – Otherwise the section keeps its built-in spacing. | Checkbox | Off |
| **Space between columns** | 0–120px (step 2) | 20px |
| **Space between rows** | 0–96px (step 2) | 20px |
| **Space between columns on mobile** | 0–64px (step 1) | 8px |
| **Space between rows on mobile** | 0–64px (step 1) | 8px |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 40px |
| **Bottom padding** | 0–160px (step 4) | 104px |
| **Top padding on mobile** | 0–120px (step 4) | 24px |
| **Bottom padding on mobile** | 0–120px (step 4) | 72px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile 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 ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Promo tile** (17 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Size** | Small · Wide · Tall · Large | Small |
| **Collection** – Fills 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% (step 5) | 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*

| Setting | Options | Default |
| --- | --- | --- |
| **Text** | Color | – |
| **Small text** | Color | – |
| **Background** | Color | – |
| **Color scheme** – Used by the Text on color style. | Color scheme | Scheme 2 |

**Block: Product tile** (9 settings, in editor order)

| 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*

| Setting | Options | Default |
| --- | --- | --- |
| **Text** | Color | – |
| **Small text** | Color | – |
| **Price** | Color | – |
| **Background** | Color | – |
| **Color scheme** | Color scheme | Scheme 2 |

## Related

- [Edits](https://themelab.page/tally/docs/sections/edits.md): Two or three large curated collection cards with a short description and product count.
- [Collection list](https://themelab.page/tally/docs/sections/collection-list.md): Your collections as small tiles, large cards or titles on images, in a grid or carousel – the department tiles of the Tally home page.
- [Featured collection](https://themelab.page/tally/docs/sections/featured-collection.md): Products from one collection – or several as tabs – in a grid or carousel, with quick filters and a products-per-row switch.