Section reference · Piéra & Émeraude

Before / after

Compare two views with a draggable divider.

Source: theme/sections/before-after.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

3:2 at 2400 × 1600 px; 16:9 at 2560 × 1440; square at 2000 × 2000; portrait at 1600 × 2000. Both images need a usable central 4:5 crop on mobile.

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

Set it up

Upload a matched image pair with identical dimensions, viewpoint and subject position.
Choose the desktop ratio and a starting divider position. Compare on mobile, where the stage is portrait.

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: See the difference. 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: Compare every detail.. 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: Show a transformation, finish, styling option, or product detail with one tactile control.. 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.

Before image

before_image

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

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

Before label

before_label

Schema default: Before. Presets can override it.

Sets the visible before label.

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

After image

after_image

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

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

After label

after_label

Schema default: After. Presets can override it.

Sets the visible after label.

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

Desktop ratio

ratio

Schema default: Editorial. Presets can override it.

Choices: Landscape · Editorial · Square · Portrait.

Chooses the desktop ratio behavior or layout from the listed options.

Recommended: Start with the preset choice. Compare the available modes in desktop and mobile previews.

Layout

layout

Schema default: Text above image. Presets can override it.

Choices: Text above image · Image beside text · Text beside image.

Chooses the layout behavior or layout from the listed options.

Recommended: Start with the preset choice. Compare the available modes in desktop and mobile previews.

Button label

button_label

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

Sets the visible button label.

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

Button link

button_link

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

Sets the destination for button link.

Recommended: Use the resource picker for internal links. Preview the destination and provide matching link text.

Starting position

start_position

Schema default: 50%. Presets can override it.

Range: 20–80%; step 5.

Adjusts starting position within the range shown.

Recommended: Start at 50%; check the smallest and widest layouts before increasing it.

← All sections · Theme settings · Get support