03GENERAL

Before / after

This page explains how “Before / after” actually behaves, which data it depends on, and what its settings change.

WHAT IT DOES

Before / after

This page explains how “Before / after” actually behaves, which data it depends on, and what its settings change.

Used in templates

page.our-philosophy.jsonpage.skin-concerns.json

IMPLICIT BEHAVIOR

What the theme does automatically

→
The slider compares two overlaid images; they should share framing and aspect ratio for a credible comparison.
→
The initial position is applied before interaction and should make the drag action understandable.

CONFIGURATION

Understand the settings

Introductory content

Fill in the eyebrow, the title and the text which present the comparisons.

Eyebroweyebrow

Titleheading

Introductionintroduction

Presentation

Adjust the number of columns, framing and height of the visuals.

Columns on desktopcolumns_desktop

Default: 1 · Options: 1, 2

Image formatimage_ratio

Default: 16 / 9 · Options: Square, Portrait, Landscape, Panoramic

Maximum heightmedia_max_height

Default: 520 · Range: 320–720px

Comparator labels

Customize the texts used by the before/after cursor and its accessibility.

Wording beforebefore_label

Wording afterafter_label

Accessibility labelslider_label

Empty state

Set the message displayed when no comparison has been added.

Text without comparisonempty_text

Spacing

Adjust the space above and below the section.

Top marginpadding_top

Default: 72 · Range: 0–120px

Bottom marginpadding_bottom

Default: 72 · Range: 0–120px

Section palette

Applies a consistent palette to the background, text, and buttons in this section.

Section appearance

Use a dedicated paletteopaline_use_color_scheme

Default: disabled

Paletteopaline_color_scheme

Default: scheme-1

Title

Alignment on desktopopaline_heading_alignment

Default: inherit · Options: Keep the design, Left, Center, Right

Spacing

Space after sectionopaline_section_spacing

Creates space between this section and the next. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–160px

Left and right insetopaline_content_inset

Moves content away from the edges. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–120px

COMPOSITION

Available blocks

Comparisoncomparison

Add this block only when it provides useful information to the journey.

CHECKS

Before publishing

✓
Content remains readable in every color scheme.
✓
Labels match the storefront language.
✓
Displayed promotions match Shopify rules.
✓
Interactions remain accessible by keyboard and touch.