Section reference · Piéra & Émeraude

Shoppable lookbook

Attach individual product cards to points on one editorial image.

Source: theme/sections/shoppable-lookbook.liquid

Where to find it

In the theme editor, open the appropriate template and use Add section.

Unavailable in: header, footer section groups.

Images & video

Portrait 4:5, recommended minimum 2000 × 2500 px. One shared source; no mobile-image picker.

Sizes are recommended source minimums, not upload restrictions. Prepare and crop media.

Set it up

Choose Lookbook image, then add Product hotspot blocks with products and descriptive Accessible labels.
Set horizontal and vertical percentages. Editor placeholder note explains an unassigned spot in the editor; choose a real product before launch.
Check every hotspot on mobile and with a keyboard. This is individual product discovery; use Shop the outfit for a multi-item purchase.

Read the step-by-step guide →

Section settings

Names match the English theme editor. The installed preset may override schema defaults. A conditional field appears only when its related control is enabled.

Color scheme

color_scheme

Schema default: scheme-1. Presets can override it.

Applies a coordinated set of background, text, accent and button colors.

Recommended: Start with the preset scheme. Check contrast after changing colors or photography.

Keep this section still

still

Schema default: false. Presets can override it.

Disables animation for this section only.

Editor note: Turns off the animations of this section only. The switch for the whole theme is in Theme settings, Motion.

Recommended: Enable for a calm chapter or to isolate a motion issue. Global motion and visitor reduced-motion preferences also apply.

Eyebrow

eyebrow

Schema default: Shop the look. Presets can override it.

Sets the visible eyebrow.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Heading

heading

Schema default: The complete silhouette.. Presets can override it.

Sets the visible heading with inline emphasis.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Text

text

Schema default: Connect editorial imagery directly to the products in the scene.. Presets can override it.

Sets the visible text with rich-text formatting.

Recommended: Replace demonstration copy with concise, accurate store content. Avoid unsupported claims and translate it for active languages.

Lookbook image

image

No schema default; the installed preset may supply a value.

Supplies lookbook image for this section or block.

Recommended: Use the image dimensions on this page; choose a focal point where supported and inspect the actual crop. Leave optional images blank when they add no value.

Blocks

Add and reorder supported blocks within this section. Settings below apply to each block instance.

Product hotspot

Maximum of this block type: 6.

Product

product

No schema default; the installed preset may supply a value.

Connects a Shopify product as the content source.

Recommended: Select the real store resource. Confirm it is available to the storefront; a theme ZIP does not create it.

Accessible label

label

Schema default: View product. Presets can override it.

Sets the visible accessible label.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Editor placeholder note

note

Schema default: Choose a product. Presets can override it.

Sets the visible editor placeholder note.

Recommended: Replace demonstration copy with concise, accurate store content. Avoid unsupported claims and translate it for active languages.

Horizontal position

x

Schema default: 50%. Presets can override it.

Range: 5–95%; step 1.

Positions the marker or card horizontally from the left as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

Vertical position

y

Schema default: 50%. Presets can override it.

Range: 5–95%; step 1.

Positions the marker or card vertically from the top as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

← All sections · Theme settings · Get support