How to Add a Before/After Image Slider in Shopify Motion Theme

The before/after slider is a native Motion block — shoppers drag a handle across two overlaid images to compare them, useful for skincare, fitness, renovation, and similar results-driven products.

Steps

1. In your Shopify admin, go to Online Store > Themes and click Customize on Motion.
2. Open the page you want it on and click Add section (or Add block if it's available at the block level on that template).
3. Choose Before/after image slider (naming may vary slightly).
4. Upload your "before" image and "after" image — same framing and angle makes the comparison read clearly.
5. Set the starting slider position and any labels ("Before" / "After").
6. Click Save.

This only works well when both images are shot consistently — mismatched angles, lighting, or cropping make the comparison confusing instead of convincing.