Home page sections
Before and after slider
Two images with a draggable divider, for before and after results.
Settings
Section width
| Setting | What it does |
|---|
| WidthDropdown | Full widthDefaultCustom width |
| Custom widthSlider | Shown only when it applies to the options chosen above. |
Color scheme
| Setting | What it does |
|---|
| Use the store's default color schemeToggle | Toggle |
| Color schemeColour scheme | Shown only when it applies to the options chosen above. |
| Setting | What it does |
|---|
| SubheadingText | Text |
| HeadingText | Text |
| DescriptionRich text | Rich text |
| Heading sizeDropdown | H1 — largestH2 — mediumH3 — small |
| Text alignmentDropdown | LeftCenterRight |
Layout
| Setting | What it does |
|---|
| Layout styleDropdown | Single — one large comparisonSplit — comparison and text side by side |
| Image positionDropdown | LeftRight Shown only when it applies to the options chosen above. |
Comparison slider
| Setting | What it does |
|---|
| Before imageImage | Image |
| After imageImage | Image |
| Before image (mobile)Image | Image |
| After image (mobile)Image | Optional. Falls back to desktop images if not set. |
| Image aspect ratioDropdown | 1:1 — square3:4 — portrait16:9 — landscapeOriginal (fit to image) |
| Slider orientationDropdown | HorizontalVertical |
Labels
| Setting | What it does |
|---|
| Show labelsToggle | Shows Before and After badges on desktop and mobile. |
Split content
| Setting | What it does |
|---|
| Label textText | Shown only when it applies to the options chosen above. |
| HeadingText | Shown only when it applies to the options chosen above. |
| DescriptionRich text | Shown only when it applies to the options chosen above. |
Result highlights
| Setting | What it does |
|---|
| HighlightsRich text | One result per line. Each shows with a tick.Shown only when it applies to the options chosen above. |
| Setting | What it does |
|---|
| Button 1 labelText | Shown only when it applies to the options chosen above. |
| Button 1 linkLink | Shown only when it applies to the options chosen above. |
| Button 2 labelText | Shown only when it applies to the options chosen above. |
| Button 2 linkLink | Shown only when it applies to the options chosen above. |
Spacing
| Setting | What it does |
|---|
| Top paddingSlider | Slider |
| Bottom paddingSlider | Slider |
