Hey Funnelish community!
We’ve just designed a new Before/After Slider section, a focused drag-to-compare image that lets shoppers see the transformation for themselves, and we’d love to share it with you.
Before/After Slider Preview
What it is
A centered before/after image slider with “After” and “Before” labels and a draggable handle, topped by a gradient headline pill (“See Real Customer Results!”). It’s built with Funnelish’s native Before/After Slider element. If you need benefits and a review next to the slider, check out our Before/After Pro section.
Why it works
- Interactive proof: Shoppers drag the handle themselves, which makes the result feel more real than two static photos.
- One clear message: Nothing competes with the transformation, so the visual does the selling.
- Eye-catching headline: The gradient pill frames the image before shoppers start dragging.
- Native element: No custom code to maintain.
How to Add It
- Copy the JSON below.
{"id":874327,"type":"section","parent_states":{"default":{"states":{"default":{"style":{"responsive":{"visible":true,"margin":false,"padding":false,"sticky":false,"width":false,"backgroundColor":false,"backgroundImage":false,"backgroundStyle":false,"backgroundPosition":false,"font":false,"border":false,"shadows":false},"desktop":{"visible":true,"width":"full","backgroundColor":"#1c1d1f","padding":{"left":16,"right":16,"top":24,"bottom":24}},"tablet":{"visible":true},"mobile":{"visible":true}},"data":{},"interaction":{}}}}},"children":[{"id":956979,"type":"row","labelTitle":"My Row","labelColor":"#449CF4","parent_states":{"default":{"states":{"default":{"style":{"responsive":{"visible":true,"margin":false,"padding":false,"sticky":false,"cols":false,"orientation":true,"gap":false,"maxWidth":false,"backgroundColor":false,"backgroundImage":false,"backgroundStyle":false,"backgroundPosition":false,"font":false,"border":false,"shadows":false},"desktop":{"visible":true,"margin":{"top":0,"left":0,"right":0,"bottom":0},"padding":{"top":16,"left":16,"right":16,"bottom":16},"sticky":{"enabled":false,"position":"top","distance":0},"cols":"one","orientation":"auto","gap":{"number":0,"append":"px"},"maxWidth":{"append":"px","placeholder":"none","number":null},"backgroundColor":"#1f2025","cssGradient":"","backgroundImage":"","backgroundStyle":"cover","backgroundPosition":"top","font":{"fontFamily":"","fontSize":14,"color":"#303030","fontStyling":{"bold":false,"italic":false,"line-through":false,"underline":false},"textAlign":"initial"},"border":{"top":{"style":"solid","width":1,"color":"#ffffff26"},"right":{"style":"solid","width":1,"color":"#ffffff26"},"bottom":{"style":"solid","width":1,"color":"#ffffff26"},"left":{"style":"solid","width":1,"color":"#ffffff26"},"radius":{"topLeft":{"size":24},"topRight":{"size":24},"bottomRight":{"size":24},"bottomLeft":{"size":24}}},"shadows":[]},"tablet":{"visible":true,"orientation":"auto"},"mobile":{"visible":true,"orientation":"auto"}},"data":{"cssId":"","dataBindings":{"dataset":{"type":"dataset"}},"title":""}}}}},"children":[{"width":100,"children":[{"id":662682,"type":"container","parent":956979,"labelTitle":"My Block","labelColor":"#449CF4","parent_states":{"default":{"states":{"default":{"style":{"responsive":{"visible":true,"orientation":true,"font":true},"desktop":{"visible":true,"align":"flex-start","margin":{"top":0,"left":0,"right":0,"bottom":0},"padding":{"top":0,"left":0,"right":0,"bottom":0},"gap":{"number":20,"append":"px"},"minMaxWidth":{"min":null,"max":null},"minMaxHeight":{"min":null,"max":null},"sticky":{"enabled":false,"position":"top","distance":0},"zIndex":{"number":null,"append":""},"orientation":"column","children":[{"width":"","type":"%","index":0},{"name":"","width":null,"type":"%","index":1}],"font":{"fontFamily":"","fontSize":18,"color":null,"fontStyling":{"bold":false,"italic":false,"line-through":false,"underline":false},"textAlign":"center"},"cssGradient":"","backgroundColor":"","backgroundImage":"","backgroundStyle":"cover","backgroundPosition":"top","border":{"top":{"style":"solid"},"right":{"style":"solid"},"bottom":{"style":"solid"},"left":{"style":"solid"},"radius":{"topLeft":{},"topRight":{},"bottomRight":{},"bottomLeft":{}}},"shadows":[],"textShadows":[]},"tablet":{"visible":true,"orientation":"column"},"mobile":{"visible":true,"orientation":"column"}},"data":{"cssId":"","title":"","dataBindings":{"dataset":{"type":"dataset"}}},"interaction":{},"name":""}}}},"children":[{"width":"","type":"%","index":0,"children":[{"id":473944,"type":"buttonV2","parent":662682,"labelTitle":"My Block","labelColor":"#449CF4","parent_states":{"default":{"states":{"default":{"style":{"responsive":{"visible":true,"align":false,"margin":false,"padding":true,"sticky":false,"font":true,"backgroundColor":false,"lineHeight":false,"letterSpacing":false,"maxWidth":false,"border":false,"shadows":false,"textShadows":false},"desktop":{"visible":true,"align":"center","margin":{"top":0,"left":0,"right":0,"bottom":0},"padding":{"top":10,"left":20,"right":20,"bottom":10},"sticky":{"enabled":false,"position":"top","distance":0},"font":{"fontFamily":"","fontSize":18,"color":"#FFFFFFFF","fontStyling":{},"textAlign":"center"},"backgroundColor":"#4368E0","cssGradient":"linear-gradient(135deg, #2d49b2, #c28e3a);","lineHeight":{"append":"x","placeholder":"normal","number":1.5,"min":0},"letterSpacing":{"append":"px","placeholder":"normal","number":null},"maxWidth":{"append":"px","placeholder":"none","number":null},"border":{"top":{"style":"solid"},"right":{"style":"solid"},"bottom":{"style":"solid"},"left":{"style":"solid"},"radius":{"topLeft":{"size":99},"topRight":{"size":99},"bottomRight":{"size":99},"bottomLeft":{"size":99}}},"shadows":[],"textShadows":[]},"tablet":{"visible":true},"mobile":{"visible":true,"font":{"fontSize":15},"padding":{"top":10,"left":20,"right":20,"bottom":10}}},"data":{"title":"","cssId":"","dataBindings":{"text":{"type":"text","fallback":true}}},"interaction":{},"name":""}}}},"content":"<p>★ See Real Customer Results!</p>","selected":false}]},{"name":"","width":null,"type":"%","index":1,"children":[{"id":113652,"type":"beforeAfterSlider","parent":662682,"labelTitle":"My Block","labelColor":"#449CF4","parent_states":{"default":{"states":{"default":{"style":{"responsive":{"visible":true,"align":false,"margin":false,"sticky":false,"beforeImage":false,"afterImage":false,"showLabels":false,"labelsFont":true,"separatorColor":false,"labelsBgColor":false,"lazyload":false,"size":true,"border":false,"shadows":false},"desktop":{"visible":true,"align":"center","margin":{"top":0,"left":0,"right":0,"bottom":0},"sticky":{"enabled":false,"position":"top","distance":0},"beforeImage":"https://img.funnelish.com/111220/0/1792378723-Gemini_Generated_Image_bch7znbch7znbch7.webp","afterImage":"https://img.funnelish.com/111220/0/1792378727-Gemini_Generated_Image_5rtrw05rtrw05rtr.webp","showLabels":true,"labelsFont":{"fontFamily":"","fontSize":13,"color":"#000000FF","fontStyling":{"bold":true,"italic":false,"line-through":false,"underline":false},"textAlign":null},"separatorColor":"#FFFFFFFF","labelsBgColor":"#FFFFFFFF","lazyload":{"booleanValue":true},"size":{"width":600,"height":null},"border":{"top":{},"right":{},"bottom":{},"left":{},"radius":{"topRight":{"size":16},"topLeft":{"size":16},"bottomRight":{"size":16},"bottomLeft":{"size":16}}},"shadows":[]},"tablet":{"visible":true,"size":{"width":null,"height":null}},"mobile":{"visible":true,"size":{"width":null,"height":null},"labelsFont":{"fontSize":12}}},"data":{"cssId":""},"interaction":{},"name":""}}}},"content":{"before":"Before","after":"After"},"selected":false}]}],"selected":false}],"type":"col"}],"parent":874327,"selected":false}],"selected":true}
- Open your page in the Funnelish Page Builder.
- Paste it onto your canvas using Paste / Import Section.
- Upload your own before and after photos.
Make it yours:
- Replace both images with real before/after photos (same angle and lighting work best)
- Edit the headline pill text
- Adjust the pill gradient to your brand colors
- Save and publish
Pro tip: If the headline says “Real Customer Results,” the photos must be real customer results, shared with permission. AI-generated or stock transformations presented as real can mislead shoppers and violate FTC/advertising rules.
Live Preview Link: Before/After Slider
Try it right after your product benefits and track the results! Questions about setup? Drop a comment below, and we’ll walk you through it.