Features · Interactive
Before / After — free copy-paste Shopify section
Draggable before/after image comparison slider
Need a Shopify before-and-after image slider without a paid app? This copy-paste section lets shoppers drag to compare two photos — useful for skincare results, renovations, product upgrades, and any offer where the transformation is the pitch.
Where to use it
Pages
- Homepage
- Product page
- Landing page
Jobs to be done
- Explain product
Functions
- Interactive
How to install
Copy the full dropin-before-after.liquid source, create that file under your theme’s sections/ folder, then add the section in the Shopify theme editor. It works on Dawn, Prestige and any Online Store 2.0 theme — no app, snippet or global CSS required. See the install guide.
FAQ
Is the before/after handle keyboard accessible?
Yes. It uses a native range input, so keyboard and touch both work.
Do I need a comparison app?
No. This is a single copy-paste Liquid section with the slider logic inlined.
Where should I place it?
Product pages, landing pages, and story pages where the visual change is the main selling point.