Product mosaic

Signal’s signature layout, and the section the whole design language was drawn around: seven product plates in two rows of unequal proportions. The top row is a tall plate, a stacked pair, and another tall plate; the bottom row is short, tall, short. Nothing is square, nothing lines up with a regular grid, and the result reads as a composed page rather than a catalogue.

Use it once, high on the homepage, for the seven pieces you most want seen. It is not a product grid — for that, see the collection page.

Section settings

Setting	Type	Default	What it does
Heading	Text	—	Section heading. Leave both this and the side note empty to drop the header row and let the plates run.
Side note	Text	—	Side note on the right of the header row.
Side note link	URL	—	Makes the side note a link.
Fallback collection	Collection	—	Fallback collection — see the note below, because it does not work the way you might expect.
Top spacing	Range, 0–160 px	48	Top spacing.
Bottom spacing	Range, 0–160 px	48	Bottom spacing.

This section has no colour-scheme setting; it always sits on the page ground.

Plate blocks

Up to seven plates. They fill the layout in order: blocks one to four across the top row, blocks five to seven across the bottom.

Setting	Type	Default	What it does
Product	Product	—	The product shown on this plate.
Eyebrow	Text	—	Caption override. Leave it empty to show the product name and price.
Corner flag	Text	—	Corner flag copy — e.g. Best seller, New. Leave empty for none.

The preset ships with seven plates, the first flagged Best seller and the sixth flagged New.

How the fallback collection really works

The collection is used only when the section has no plate blocks at all. With even one plate block present, the blocks decide everything and the collection is ignored — a plate with no product set shows a placeholder, not a product from the collection.

So there are two ways to use the section:

• Curated (the default): keep the seven plate blocks and set a product on each.
• Automatic: delete every plate block and set a collection. The collection’s first seven products fill the layout, with no captions overridden and no flags.

Caution

Because the preset ships with seven plates, the fallback collection does nothing until you remove them all. If you set a collection and nothing changed, that is why.

What a plate shows

Each plate is the theme’s product plate, shared with the Product rail:

• The product’s featured image, cropped to fill the plate.
• A corner flag — yours if you set one, otherwise an automatic Sold out flag when the variant is unavailable, or On sale when there is a compare-at price. Setting your own flag replaces the automatic one.
• On hover, Add + for a single-variant product (which adds straight to the bag) or Choose + for anything with options, which takes the shopper to the product page.
• A Peek quick-view button, when the theme’s Quick view setting is on.
• A caption line underneath reading Product name – price, with a struck-through compare-at price when there is one. A label replaces the whole caption, price included.

Behaviour worth knowing

The proportions are fixed. The row geometry is not configurable — that is what makes it the signature layout rather than a settings exercise. The top row is capped at 640 px tall and the bottom row’s plates at 326 px and 506 px, so the mosaic never dominates a large monitor.

Below 900 px it becomes a two-column grid of uniform tiles. Three columns need about 240 px each to hold a caption with a price, which a tablet in portrait does not have.

Tip

Give the two tall plates — top-left and top-right — your two strongest images, ideally portrait-shot. They get the most pixels and they are what the eye lands on. Save the flags for the pieces where scarcity is the actual story; a page where all seven plates carry a flag has none.