Before/after slider
Overview
Before/after slider lets customers drag a divider to compare two images in the same frame. It works best for product results, restorations, styling changes, and process comparisons.
Prepare the images
Use two images with the same dimensions, camera angle, and subject position. Closely matched images make the comparison easier to understand and prevent the subject from jumping as the divider moves.
Add the section
Add Before/after slider to the template where you want customers to see it.
- From Shopify admin, go to Online Store > Themes, find Radian, and select Customize.
- Use the page selector at the top of the Theme Editor to open the required template.
- In the template panel, select Add section, choose Before/after slider, and select Save.
Create the comparison
- Select Before image and After image.
- If the desktop images are not suitable for narrow screens, select Before image (mobile) and After image (mobile).
- Choose Media ratio and Media fit. Use the mobile ratio control to refine the mobile crop.
- Set Orientation and Initial position, then drag the comparison control in the preview to check the result.
COMPARISON OPTIONS
| Orientation | Choose the direction in which customers move the comparison divider. |
|---|---|
| Initial position | Sets how much of each image is visible when the section first loads. |
| Labels | Show Before and After labels when the difference is not immediately obvious. |
| Label visibility | Controls when the comparison labels remain visible. |
| Control size | Changes the size of the draggable handle. |
| Control color scheme | Applies a theme color scheme to the comparison control. |
Add supporting content
Use the Text block to explain what customers are comparing. Keep the heading short and describe the visible difference rather than repeating the Before and After labels.
LAYOUT OPTIONS
| Media position | Places the comparison before or after the text on desktop. |
|---|---|
| Media width | Controls how much horizontal space the comparison occupies. |
| Mobile order | Chooses whether the media or text appears first on mobile. |
| Column gap | Sets the desktop space between the media and text. |
| Row gap | Sets the mobile space between the stacked media and text. |
| Section spacing | Adds independent top and bottom spacing for desktop and mobile. |
Check the result
Drag the divider from edge to edge with a mouse and touch input. Confirm that labels remain readable and that neither image reveals an unintended crop on mobile.
Troubleshooting
COMMON ISSUES
| Images do not line up | Replace them with images that use the same dimensions and subject framing. |
|---|---|
| Important details are cropped | Review Media ratio and Media fit, then set dedicated mobile images if needed. |
| Text appears in the wrong mobile order | Change Mobile order instead of moving the Text block. |