Section reference · Piéra & Émeraude

Shop the outfit

Connect complete photographed looks to up to six products per look.

Source: theme/sections/shop-the-outfit.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

Outfit images: portrait 4:5, recommended minimum 2000 × 2500 px desktop and 1200 × 1500 mobile. Show the actual linked pieces.

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

Set it up

Add one Look block per outfit, choose desktop and optional mobile images, and connect Piece 1 through Piece 6.
For each visible piece, enable its marker and set horizontal/vertical percentages measured from the top-left. Keep a product in the list but disable its marker if it is not visible in the photo.
One set of coordinates serves both image versions; keep mobile subjects aligned. Test variant selection, inclusion checkboxes and Add the look against the cart.

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 outfit. 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 look.. 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: Select a piece in the picture or in the list, choose your sizes and add the whole outfit at once.. 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.

Blocks

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

Look

Maximum of this block type: 3.

Image

image

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

Supplies image for this section or block.

Editor note: A model or a couple wearing the outfit. Portrait 4:5 recommended.

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.

Mobile image

image_mobile

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

Supplies mobile 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.

Label

label

Schema default: Look. Presets can override it.

Sets the visible label.

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

Heading

heading

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

Sets the visible heading with inline emphasis.

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

Pieces in the picture

Positions are percentages of the image, from the top left corner.

Piece 1

product_1

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.

Piece 1: marker on the image

show_1

Schema default: true. Presets can override it.

Shows this piece’s numbered marker on the outfit image; the product remains in the list.

Editor note: Turn off when the piece is not visible in the picture; it stays in the list.

Recommended: Enable only when this piece is visible in the photograph.

Piece 1 horizontal

x_1

Schema default: 50%. Presets can override it.

Range: 3–97%; 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.

Piece 1 vertical

y_1

Schema default: 15%. Presets can override it.

Range: 3–97%; 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.

Piece 2

product_2

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.

Piece 2: marker on the image

show_2

Schema default: true. Presets can override it.

Shows this piece’s numbered marker on the outfit image; the product remains in the list.

Editor note: Turn off when the piece is not visible in the picture; it stays in the list.

Recommended: Enable only when this piece is visible in the photograph.

Piece 2 horizontal

x_2

Schema default: 45%. Presets can override it.

Range: 3–97%; 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.

Piece 2 vertical

y_2

Schema default: 40%. Presets can override it.

Range: 3–97%; 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.

Piece 3

product_3

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.

Piece 3: marker on the image

show_3

Schema default: true. Presets can override it.

Shows this piece’s numbered marker on the outfit image; the product remains in the list.

Editor note: Turn off when the piece is not visible in the picture; it stays in the list.

Recommended: Enable only when this piece is visible in the photograph.

Piece 3 horizontal

x_3

Schema default: 55%. Presets can override it.

Range: 3–97%; 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.

Piece 3 vertical

y_3

Schema default: 30%. Presets can override it.

Range: 3–97%; 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.

Piece 4

product_4

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.

Piece 4: marker on the image

show_4

Schema default: true. Presets can override it.

Shows this piece’s numbered marker on the outfit image; the product remains in the list.

Editor note: Turn off when the piece is not visible in the picture; it stays in the list.

Recommended: Enable only when this piece is visible in the photograph.

Piece 4 horizontal

x_4

Schema default: 40%. Presets can override it.

Range: 3–97%; 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.

Piece 4 vertical

y_4

Schema default: 62%. Presets can override it.

Range: 3–97%; 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.

Piece 5

product_5

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.

Piece 5: marker on the image

show_5

Schema default: true. Presets can override it.

Shows this piece’s numbered marker on the outfit image; the product remains in the list.

Editor note: Turn off when the piece is not visible in the picture; it stays in the list.

Recommended: Enable only when this piece is visible in the photograph.

Piece 5 horizontal

x_5

Schema default: 50%. Presets can override it.

Range: 3–97%; 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.

Piece 5 vertical

y_5

Schema default: 90%. Presets can override it.

Range: 3–97%; 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.

Piece 6

product_6

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.

Piece 6: marker on the image

show_6

Schema default: true. Presets can override it.

Shows this piece’s numbered marker on the outfit image; the product remains in the list.

Editor note: Turn off when the piece is not visible in the picture; it stays in the list.

Recommended: Enable only when this piece is visible in the photograph.

Piece 6 horizontal

x_6

Schema default: 70%. Presets can override it.

Range: 3–97%; 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.

Piece 6 vertical

y_6

Schema default: 55%. Presets can override it.

Range: 3–97%; 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