Appearance
Before/after slider
A side-by-side image comparison your visitors drag to reveal. One image sits over the other, and a draggable seam wipes between them — pull it across to see the before, push it back to see the after.
- Show a transformation in one interaction — a kitchen remodel, a clean-up, a restyle, a repair. The shopper does the reveal themselves, so the change lands.
- Labels and captions — a "Before" / "After" tag on each side, each masked to its own image so they never overlap, plus an optional one-line caption beneath the slider.
- Drag or keyboard — the seam follows a pointer drag, and the handle is fully keyboard-operable for visitors who don't use a mouse.
It's the ideal section for any store selling a change: home services, restoration, detailing, skincare, landscaping, or any "look what we did" story.
Try it
Pick a preset to see its style, drag the seam (or focus the handle and use the arrow keys), edit the heading, labels, or captions, and use the screen-size and light/dark buttons in the preview header to check a phone and dark mode. The example below is the Uisce (services) "Tide Reveal" treatment — but the same slider works for any store: a garden makeover, a detailing job, a before/after skin routine.
←Before/after slider
Color scheme
Whether the divider wipes left-to-right or top-to-bottom. Every other setting applies to both directions.
Short tag shown on the before side — e.g. “Before”.
Short tag shown on the after side — e.g. “After”.
Optional note shown over the before image — e.g. the original condition.
Optional note shown over the after image — e.g. what was done.
50%
Where the divider sits when the section first loads, as a percentage from the start edge.
Storefront preview
See the Transformation
Before
After50
Original kitchen layout — Designed and project-managed by Uisce
How it works
Add the Before/after slider section, choose a before image and an after image, and the section stacks them with a draggable seam between. By default the seam sits in the middle; the shopper drags it across to wipe one image over the other.
The seam is draggable with a pointer and operable from the keyboard: focus the round handle and use the arrow keys to move it a step at a time, Home / End to jump to either edge, and Page Up / Page Down for a bigger jump. As the seam moves, a polite screen-reader announcement reads out the position as a percentage, so the comparison is usable without sight of the images.
Each side carries its own label (a short "Before" / "After" tag). The before-side label lives in a layer that is clipped to the before image: as the seam advances and the after image covers more of the frame, the before label is masked away with it, and the after label appears from its own side — the two tags never overlap, at any width. The optional captions (a one-line note per side — the original condition, or what was done) render as one compact muted line beneath the slider, so the photography stays clean.
The slider ships with no images by default — you add your own — so it never shows placeholder content on a live store. The Uisce preset's homepage comes pre-filled with a kitchen design-service before/after you can edit or replace.
The Uisce "Tide Reveal" — an example, not the identity
The slider is a generic before/after comparison; the look above is the Uisce flavour. On the Uisce preset the section gets the "Tide Reveal" signature: the plain white seam becomes a luminous sea-glass → glass-blue waterline with a soft glow, the handle becomes a frosted glass disc with a three-line current-flow grip, the "Before" / "After" tags become frosted glass-mist capsule pills, and the caption line beneath the slider sets in quiet serif italic editorial type. The heading gains a centred sea-glass hairline underline, and the frame widens to the page column.
It's styling, not behaviour — beyond widening the frame to the page column, it changes nothing about how the slider works, and it reads its colours from the Uisce preset tokens plus the section's color scheme, so dark mode pairs automatically. Switch the preset switcher above to Gaoth, Talamh, Tine, or Neart and you'll see the same slider render as the clean base component — the Tide is gated to Uisce alone.
Image sizes
Both images are requested at 1600px wide and must share one aspect ratio, or the seam reveals a mismatched edge as it moves.
Image height decides whether they keep that shape. Medium is the natural image aspect and does not crop. Small and Large pin the frame to a fixed height (40vh, minimum 320px; 70vh, minimum 480px) and crop to fill it. Below 750px the slider is a 4:5 box on every setting, so a wide landscape pair loses its sides on a phone whatever you choose.
Section settings
| Setting | What it does |
|---|---|
| Color scheme | Colors the section — background, heading, and the caption line — from one scheme, so contrast stays legible in light and dark. |
| Card corner radius | How rounded this section's cards are. Leave on Use theme default to follow Theme settings → Layout. |
| Heading | The title above the slider (e.g. "See the Transformation"). Optional. |
| Orientation | Whether the seam wipes left-to-right (horizontal) or top-to-bottom (vertical). Every other setting applies to both directions. |
| Before image | The "before" state. For a believable comparison, use the same scene, camera angle, and crop as the after image. |
| After image | The "after" state — the same view, transformed. Both images should share the same shape (aspect ratio). |
| Before label | The short tag shown on the before side (e.g. "Before"). |
| After label | The short tag shown on the after side (e.g. "After"). |
| Before caption | An optional one-line note — e.g. the original condition. Captions show as one muted line beneath the slider. |
| After caption | An optional one-line note — e.g. what was done. When both captions are set they join on the same line. |
| Starting position | The seam position, measured as a percentage from the start edge. |
| Image height | Small, Medium, or Large. The frame follows the images' aspect ratio, so both photos display without distortion. |
Blocks
This section does not use blocks — it's a single before/after pair, configured from the settings above.
Presets
The section is available in every preset, and its treatment matches the active preset's identity. The frosted "Tide Reveal" look — the sea-glass waterline seam, the frosted glass handle, the glass-mist pills, the serif italic caption line — is the Uisce signature; in the other presets the same slider renders as the clean base component: a crisp white seam and handle with high-contrast Before/After tags that read on any photo.
| Preset | Treatment |
|---|---|
| Uisce | The signature "Tide Reveal" — a luminous sea-glass → glass-blue waterline seam, a frosted glass handle with a current-flow grip, frosted glass-mist Before/After pills, and an italic serif caption line. |
| Gaoth | The clean base slider for pet and lifestyle stores. |
| Talamh | The clean base slider for garden and heritage stores. |
| Tine | The clean base slider for hardware and trade stores. |
| Neart | The clean base slider for wellness stores. |
Responsive & accessibility
- The frame scales to the viewport — a contained editorial frame on desktop (the Uisce Tide widens it to the full page column), and a full-bleed band on a phone, with the seam, handle, and labels scaling proportionally.
- The seam is a real slider — the handle has
role="slider"with min / max / current values, and is fully keyboard-operable: arrow keys move it a step, Home / End jump to either edge, Page Up / Page Down take a bigger step. In vertical orientation the up/down arrows drive it. - The position is announced — a polite live region reads out the seam position as a percentage as it moves, so a screen-reader user knows how much of each image is shown.
- A clear focus ring — focusing the handle from the keyboard shows a visible accent outline, meeting WCAG 2.1 AA.
- Per-side labels never overlap — the before label is masked to the before image and the after label to the after image, so the two tags never land on top of each other at any width.
- Large drag target — the round handle is a comfortable tap target, easy to grab on a phone.
- Respects reduced motion — the handle's hover / focus grip-scale animates only when the visitor allows motion; when they ask for reduced motion, the handle snaps without a transition. The drag itself always tracks the pointer (it's direct manipulation, not auto-motion).
- One color scheme — the heading and caption line are painted from a single scheme, and the Before/After tags keep fixed high-contrast ink, so nothing lands in a low-contrast surprise, in light or dark mode.
When it isn't showing
It does not hide itself. With both pickers blank it still draws the comparison frame — two placeholder plates, the labels and the seam — so you can position the seam before uploading anything. Seeing grey plates means the images are missing, not that the section is broken.
Both Before image and After image have to be set for a real comparison, and they must share one aspect ratio or the seam reveals a mismatched edge as it moves.
Tips
- Use the same scene, angle, and crop for both images. The comparison only works when the visitor can clearly see what changed — a different angle or zoom reads as two unrelated photos, not a transformation.
- Match the aspect ratio. Both images should share the same shape, or the seam will reveal a mismatched edge as it moves.
- Keep captions short — the two notes share one line beneath the slider ("Original layout — Designed by us"); a long caption gets cut off rather than wrapping.
- Lead with your most dramatic transformation — the slider rewards a big, obvious change.