Before and after
Let visitors compare two images with a draggable divider.
Before and after is designed for visual comparisons such as restoration, fit, finish, or product results. Visitors move a divider to reveal more of either image.
Current desktop example: the divider starts at the configured 50% position so both labels and both source images remain visible.
Add Before and after
- Open Online Store > Themes > Customize.
- Use the page selector to open the template where the comparison should appear.
- Select Add section, then choose Before and after.
- Add both source images before adjusting the divider position or ratios.
This section is available in regular page content, but not in header, footer, or overlay section groups.
Content
Eyebrow
Adds the short line above the section heading. The default is See the difference.
Heading
Adds the main section heading. The default is Before and after.
Text
Adds the supporting rich text below the heading. The default is Drag the handle to compare two images.
Keep the explanation useful even when a visitor has not moved the divider.
Media
Use Eyebrow, Heading, and Text to explain what is being compared. Choose Before image and After image, plus optional Before mobile image and After mobile image when portrait crops need different sources.
Before image and After image
Choose the two primary images. If either image is empty, Strata shows a placeholder for that side, so add both images before publishing.
Before mobile image and After mobile image
Optional replacements for narrow screens. When a mobile image is blank, Strata uses the corresponding main image. Use these fields when the desktop crop loses the subject or comparison detail on mobile.
Before label and After label
Identify the two sides of the comparison. The defaults are Before and After; use specific terms when those words would be ambiguous.
| Setting | Options and use |
|---|---|
| Media fit | Cover fills the comparison frame and can crop; Contain keeps the full image visible and can leave unused space. Default: Cover. |
| Initial comparison position | Sets where the divider starts, from 10–90% in 5% steps. Default: 50%. This is the starting position, not a limit on how far visitors can move the divider. |
The visitor-facing comparison range itself runs from one side to the other. Confirm the exact keyboard and touch interaction in the accepted storefront before treating those endpoints as a final support guarantee.
Layout
| Setting | Options and use |
|---|---|
| Heading alignment | Left, Center, or Right. Default: Center. |
| Content width | Small, Medium, or Large. Default: Large. Controls the readable width of the introduction. |
| Full width | Extends the section beyond the normal page container when on. Default: Off. |
| Desktop ratio | Portrait (4:5), Square (1:1), Landscape (4:3), or Wide (16:9). Default: Wide (16:9). |
| Mobile ratio | Portrait (4:5), Square (1:1), or Landscape (4:3). Default: Portrait (4:5). |
| Background style | None, Subtle, or Soft. Default: None. |
The selected ratio controls the comparison frame independently at each responsive size. Check both source images in the selected frame; changing the ratio does not correct a mismatched subject position.
Spacing
| Setting | Options and use |
|---|---|
| Section spacing | None, Small, Medium, or Large. Default: Medium. |
| Add top spacing | Adds the section's top spacing. Default: On. |
| Add bottom spacing | Adds the section's bottom spacing. Default: On. |
Prepare the image pair
Use images taken from the same viewpoint and with the same framing. If their dimensions or subject positions differ, the slider can imply a change that is only caused by alignment. Preview Cover crops on both sizes before publishing.
Blocks
Before and after has no configurable blocks. The two image sides and their labels are section settings.
Desktop and mobile behavior
Desktop and mobile ratios are separate. Mobile source images are optional fallbacks to the desktop sources, so a comparison can use the same pair at both sizes or a portrait-specific pair. The final crop and divider position need checking in both viewport classes.
Accessibility and interaction
The section exposes a labelled range control for the divider and updates its text value as the position changes. Keep Before label and After label meaningful, and do not make the comparison the only place where a claim is explained in words. Keyboard operation, visible focus, touch dragging, and both endpoints still require accepted browser verification.
Common issues
- The comparison looks like two unrelated images: use matching viewpoints and framing, then review both crops with Media fit.
- The subject disappears on mobile: add the relevant mobile image and choose a mobile ratio that preserves the subject.
- The divider starts in an unexpected place: check Initial comparison position; it controls the initial value only.
- A side is blank: confirm its image setting is populated. An empty field uses a placeholder rather than silently borrowing the other side.
The image shows the current centered initial state. Verify both endpoints, keyboard movement, touch dragging, and the mobile crop with the same approved fixture; add a short recording only if still images cannot explain the interaction.
Related guides
- Media slideshow for a single focal image or video that changes by slide.
- Flexible media grid for mixed media items with independent spans.
- Animation for the global reduced-motion controls.