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.

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 Before/after slider to the template where you want customers to see it.

1. From Shopify admin, go to Online Store > Themes, find Radian, and select Customize.
2. Use the page selector at the top of the Theme Editor to open the required template.
3. In the template panel, select Add section, choose Before/after slider, and select Save.

1. Select Before image and After image.
2. If the desktop images are not suitable for narrow screens, select Before image (mobile) and After image (mobile).
3. Choose Media ratio and Media fit. Use the mobile ratio control to refine the mobile crop.
4. Set Orientation and Initial position, then drag the comparison control in the preview to check the result.

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.

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.