Shop the look

A shoppable photograph. One image of the whole outfit fills the frame, each piece carries a numbered mark, and pointing at a mark names the piece and offers it for sale without leaving the page.

What it does: Closes the gap between a picture people like and the products in it. A lookbook photograph makes a customer want the outfit. This one lets them buy it.

Key settings (in the section’s settings):

Setting	What it does	Default
Color scheme	Section colors.	scheme-paper
Full width	Runs the photograph edge to edge.	On
Text sits over the image	On, the heading stands on the photograph itself and the picture is washed to keep it legible. Off, the heading sits above the picture.	On
Overlay strength	Soft, Medium, or Strong, for that wash.	Strong
Heading width	Narrow, Normal, Wide, or Full width.	Wide
Heading alignment	Left, center, or right.	Left
Subheading	The small label above the heading.	”The look”
Heading	The headline. Italicize a word to set it in the emphasis font.	”The whole look, piece by piece.”
Intro text	An optional paragraph under it.	Empty
Image	The photograph. Shoot it with room around the pieces. A mark needs somewhere to sit that is not on a face, or on a seam you are trying to show.	Empty
Image ratio	Natural, Square (1 by 1), Portrait (3 by 4), Landscape (4 by 3), or Wide (16 by 9).	Landscape
Image ratio on mobile	The same list, kept separately. A wide shot usually wants a portrait crop on a phone.	Portrait

The section also carries a Section spacing group. Pick a Device of Desktop or Mobile, then set Top and Bottom.

Blocks: Product pin and Collection pin, plus a Custom Liquid block.

Setting	What it does	Default
Product / Collection	What this mark points to. A product pin offers the piece itself. A collection pin opens the department.	Empty
Horizontal position	0 is the left edge of the photograph, 100 the right.	50%
Vertical position	0 is the top, 100 the bottom.	50%

Marks are numbered in block order, so reordering the blocks renumbers the photograph.

Tip

Place the pins against the mobile crop as well. The positions are percentages of the photograph, and the phone crop is a different shape. A mark at 90% across can fall outside the visible picture. Check both before publishing.

Note

Every mark is a real button. The whole set can be stepped through with the keyboard, and under the photograph the same pieces are listed as plain numbered links, so nobody has to hit a small target to reach a product.

When to use it: Use it on a lookbook or campaign page, once per outfit. To mark up details of a single garment rather than pieces of an outfit, use Image hotspot. To sell the pieces as a set in one click, use Product bundle.

Related: Image hotspot · Product bundle · Media mosaic · Quick view · Lapels support replies within 12 hours.