Radian 3.0 is er — bundels, categorie-showcase en filmische animatie.Bekijk wat nieuw is

Documentatie Contact

Promo tiles

Updated 2 min read

Promo tiles is built for a sale or a campaign: a heading with an optional highlight, a countdown and a discount code that copies with one tap, above a row of tiles. Each tile is one block with its own image or video, overlay, heading, button and link. On phones the tiles become a swipe row or two columns.

The Promo tiles section.
The Promo tiles section.

How to set it up

Step 1: Add the section

  1. In the theme editor, open the home page and click Add section in the Template area.
  2. Choose Promo tiles. Drag it to where you want it on the page.

Step 2: Write the heading

  1. Under Heading, write the Heading. Put the words to stress in italic, for example *10% off* this week.
  2. Choose the Heading style, and a Highlight style for the italic words (such as Marker, Brush box or Circle sketch) with its color.
Promo tiles settings.
Promo tiles settings.

Step 3: Add the countdown and code

  1. Under Countdown, turn on Show countdown and enter the End date as DD-MM-YYYY or DD-MM-YYYY HH:MM, for example 31-12-2026 23:59. Choose its size.
  2. Under Discount code, enter the Discount code (1), for example WEEK10. It shows beside the heading with a Copy button. Leave it blank to hide it.
  3. Create the code itself in Shopify Admin under Discounts: the section only shows it.

Step 4: Add the tiles

  1. Click Add block and choose Image or video tile or Text tile.
  2. For an image or video tile: choose Media, select the image or video, and set the Overlay and its opacity. Write an optional heading, the Button label and the Link; the whole tile links there. Choose the Content position, and turn on Show box behind content for a tinted box behind the text.
  3. For a text tile: write an eyebrow and a heading with its own highlight, a button and a link, and choose the alignment. It takes the color of the section.

Step 5: Set the row

  1. Under Layout, set the Columns (desktop), the Tile shape (Tall 9:16, Portrait 2:3, Portrait 3:4 or Square), the gap and the corner radius.
  2. Under Mobile, choose Tiles on mobile: Swipe row, Two columns or Hide section.

Settings reference

Promo tiles

Heading
Highlight style Options: None, Ink slash, Marker, Outline text, Brush box, Soft underline, Circle sketch, Double underline, Corner marks, Soft glow, Ribbon, Brackets, Dotted underline, Shadow pop, Stamp frame, Neon edge, Split tone, Vertical bar, Overline sweep, Pixel block, Spark dots, Slash cut, Capsule fill, Offset plate, Swipe, Sheen, Halo.
Highlight color
Countdown
Show countdown Turns this on or off.
End date Format: DD-MM-YYYY or DD-MM-YYYY HH:MM.
Countdown size Options: Small, Medium, Large.
Discount code
Discount code Shown beside the heading with a button that copies it. Leave blank to hide it.
Layout
Columns (desktop) Slider.
Tile shape Options: Tall 9:16, Portrait 2:3, Portrait (3:4), Square.
Gap between tiles Slider.
Tile corner radius Slider.
Mobile
Tiles on mobile Options: Swipe row, Two columns, Hide section.
Corners
Make section rounded Rounds this section's corners with the radius set for each one.
Top left radius Slider.
Top right radius Slider.
Bottom right radius Slider.
Bottom left radius Slider.

Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.

How it works

  • The Copy button copies the code and shows Copied for a moment. On devices that block copying, shoppers can still select the code.
  • The countdown uses the shopper's time zone. When it ends it stays at zero; remove or change the date after the sale.
  • Videos play muted and loop, and pause while the section is off screen.

Related

Still stuck?

Include your store URL and theme version — we'll get back to you.

Contact support