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), it is the most direct proof you can show.
Things to watch out for
- Image alignment: Fudge auto-crops paired images to the same dimensions.
- Authenticity: Fudge pulls date stamps and customer names from your product reviews, if you have them.
- Touch UX: on mobile, Fudge gives the handle a wider hit area than it shows.
- Performance: images lazy-load as they 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.