Lookbook

A stack of large shots, each with its own kicker, heading, paragraph and link beside the picture — and up to three product hotspots pinned onto the image itself. Hover a hotspot and the product’s name and price appear; click it and you either open the product’s quick view or go straight to the product page.

This is the section for an editorial page that still has to sell. It powers the lookbook page template that ships with the theme.

Section settings

Setting	Type	Default	What it does
Heading	Text	The lookbook	Section heading above the first shot.
Side note	Text	Shop the shots	Side note on the right of the header row.
Side note link	URL	—	Makes the side note a link. Without it, the side note is plain text.
Colour scheme	Select — Default / Light / Deep	default	Which ground the whole section sits on.
Top spacing	Range, 0–160 px	48	Top spacing.
Bottom spacing	Range, 0–160 px	48	Bottom spacing.

Shot blocks

Up to eight shots. Each one is a full-width row.

Setting	Type	Default	What it does
Image	Image	—	The shot. Placeholder frame when unset.
Image side	Select — Left / Right	left	Which side the image sits on. Alternate it down the page.
Shape	Select	4 / 5	Portrait (4:5), Square (1:1), Landscape (3:2), Panorama (21:9).
Image focal point	Select — Top / Upper / Centre / Lower / Bottom	center	What stays in frame when cropped.
Kicker	Text	Look 01	Accent eyebrow above the heading.
Heading	Text	Field test	Shot heading.
Text	Rich text	<p>Shot on the same morning the run came off the table…</p>	The paragraph beside the shot, capped at a 42-character measure.
Button link	URL	—	Destination for the underlined link.
Button text	Text	Shop the look	The link’s label. Both this and link must be set for it to render.
Product 1	Product	—	First hotspot’s product.
Product 1 — across	Range, 0–100 %	30	Hotspot 1 position across the image, from the left.
Product 1 — down	Range, 0–100 %	35	Hotspot 1 position down the image, from the top.
pin_2_product / pin_2_x / pin_2_y	Product / Range / Range	— / 55 / 60	Second hotspot.
pin_3_product / pin_3_x / pin_3_y	Product / Range / Range	— / 45 / 82	Third hotspot.

The preset ships with two shots.

Behaviour worth knowing

A shot with no copy goes full width. If a shot has no kicker, no heading and no text, the copy column disappears and the photograph takes the whole row. That is how you mix a full-bleed image into a lookbook without a second section.

Hotspots are real links. Each pin is an anchor pointing at the product URL. When the theme’s Quick view setting is on, clicking a pin opens the quick-view drawer instead of navigating; when it is off, no handler is attached and the link just works. Either way a middle-click or a right-click behaves like a normal product link.

The tooltip picks its own side. A pin near the top of the image (above 22 %) drops its label downwards; one near the left or right edge (below 22 % or above 78 %) shifts its label inwards, so a label never runs off the picture. You do not configure this — just place the pin.

On phones the tooltips are hidden and the shot stacks above its copy regardless of align. The pins remain tappable links. If a product is important enough to need its name visible on a phone, put it in a Product rail underneath instead.

Placing a pin:

1. Pick the product on the shot block.
2. Set across roughly — it is a percentage from the left edge of the image, not of the page.
3. Set down — a percentage from the top of the image.
4. Watch the editor preview as you drag the sliders; the pin moves live.

Tip

Pin the hero piece and at most one supporting item per shot. Three pins on one image turns a photograph into a diagram, and the third pin is almost never clicked. If three products genuinely matter, give them a shot each.

Caution

A hotspot sitting over a dark area of a photograph is nearly invisible. Before you publish, look at each pin against the actual image — nudging down by five percent onto a lighter patch costs nothing and doubles the number of people who see it.