Add a before/after slider section. [N] customer stories with draggable handles, horizontal scroll.
Want more control? See the expanded prompt ›
Add a before/after slider section to the homepage. Draggable handle in the middle, customer name and treatment timeline underneath, 3 sliders in a horizontal scroll for different customer stories.
- Draggable handle slides between two images smoothly.
- Touch-first — works as well on mobile as on desktop.
- Customer caption + timeline live below each slider.
- Multiple stories scroll horizontally for browsing.
What you're trying to do
Words can claim results. Before/after sliders prove them. For any brand where the product's value is a visible change (skincare clarity, fitness transformation, cleaning product, home reno), this is the highest-impact social proof you can put on a homepage.
Things to watch out for
- Image alignment — Fudge auto-crops paired images to the same dimensions.
- Authenticity — Fudge handles this: date stamps and customer names are pulled from product reviews if you have them.
- Touch UX — Fudge handles this: the handle has a wider hit area than its visual on mobile.
- Performance — Fudge handles this: images lazy-load on scroll-into-view.
How Fudge does it
Fudge duplicates your live theme into a draft, builds the section as an editable Shopify section with the placement and behavior your prompt requires, and wires it to your real product data and brand styling. Everything starts in draft — preview on your store, tweak via the Theme Editor, and publish only when you're ready. Your live store stays untouched.
Why before/after sliders convert in transformation categories
For categories where the product creates a visible transformation — skincare, fitness, makeup, hair care — a draggable before/after slider sells better than text claims. Shoppers see the result and self-validate it’s possible.
When this is worth building
Build the before/after slider if you have legitimate transformation imagery. Skip if you don’t — fake before/afters destroy trust permanently.
What makes one great
- Real customer photos, dated, with consent — authenticity is everything.
- 3 sliders for variety — different customer stories.
- Draggable handle, wide hit area on mobile — accessible interaction.
- Customer name and timeline underneath — context for the transformation.
Pair this with customer story article and video testimonial section.