Skip to main content
Promo tiles is a flexible content section that renders a grid of image-led tiles. Each tile is its own editable block with an image, an optional eyebrow + headline + body, an optional CTA, and a configurable text alignment. Tiles can link to any URL — collections, products, lookbook pages, journal articles. Use it for:
  • Seasonal collection cards on the homepage
  • Limited-edition drops alongside the standard catalog
  • Curated edits (“The summer wardrobe”, “The travel kit”)
  • Linking out to lookbook chapters or journal articles
  • A 2-column “category split” — men’s / women’s

​
What it looks like

The overlay copy sits on top of the image. A configurable dark overlay between the image and the text keeps the text legible against any background.

​
Adding the section

Theme Customizer:
  1. Choose a page (typically the homepage).
  2. Add section → Promo tiles. The section ships with 3 default tiles.
  3. For each tile block:
    • Upload an Image.
    • Set the Eyebrow, Headline, Body, and CTA label.
    • Add the Link URL the tile points to.
    • Adjust Text alignment within tile (left/center/right) and the Image overlay opacity (0–70%) for legibility.
  4. Add or remove tiles as needed — up to 6 per section.

​
Section settings

​
Tile block settings

​
Recipes

​
Seasonal collection cards

3 columns · Tall tiles. Each tile = one collection. Eyebrow Voyage I · Headline Mediterranean editions · CTA Discover · Link = /collections/mediterranean.

​
Editorial split

2 columns · Square tiles. Tile 1 image = a journal hero · CTA Read · Link = /blogs/journal/article-handle. Tile 2 image = lookbook hero · CTA View lookbook · Link = /pages/lookbook.

​
Category drop

4 columns · Short tiles. Each tile = a category — Shirts, Knitwear, Trousers, Outerwear.

​
Implementation notes

Section: sections/promo-tiles.liquid. No JS — pure Liquid + CSS. Styling lives at the end of assets/premium.css under the .promo-tiles__* and .promo-tile__* namespaces. The grid uses CSS grid-template-columns: repeat(var(--cols), 1fr) for layout flexibility. The image overlay uses a CSS custom property --overlay driven by the merchant-set opacity setting (0–70 → 0.0–0.7).