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

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

Steps

1. In your Shopify admin, go to Online Store > Themes and click Customize on Force.
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.