Install on ShopifyBefore & After — 2 new results sections
Prove your product works with a wall of tap-to-toggle result cards. Two layouts: Before & After (rounded, portrait, centered titles) and Results Grid (sharp, landscape, editorial). Each card flips between a before and after photo — pure CSS, no JavaScript.
Show the transformation, not just the claim. Two new sections turn your before/after photography into a scannable wall of proof — each card overlays a label and title on a photo and flips between Before and After with a tap. Distinct from the existing drag-to-reveal Image Compare slider: these are grids of results, built for verticals where outcomes sell — haircare, skincare, fitness, dental, home reno.
Modulo: Before & After. The bright cut. Rounded portrait cards in a 4-up grid with centered titles, pill badges (great for a "4 weeks" timeframe) and a solid white toggle. Drops in polished on a clean white background.
Modulo: Results Grid. The editorial cut. Sharp landscape cards in a tight 2-up grid with bottom-left titles, boxed tags and an outlined ghost toggle on a warm off-white — a magazine-style "results from our community" wall.
Built right. The Before/After swap is pure CSS — no JavaScript — so it works the instant the page renders and never shifts your layout as images load. Each card is a native, keyboard-navigable radio group, so screen readers announce a proper two-option control and arrow keys switch states. Reduced-motion preferences are respected.
Yours to shape. Up to 12 cards, each with a before image, after image, label, title and alt text. Tune columns, image shape (portrait / square / landscape), photo overlay strength, corner radius and border; switch the title between centered and bottom-left, the label between pill and boxed tag, and the toggle between solid and ghost. Full control over heading and title sizes, colors, section width and padding. Both ship polished with zero configuration and collapse cleanly to a single column on mobile.