← All sections

Before / After

A draggable before/after slider with count-up results and add to cart beside it.

ProSocial proof28 settingsInstall
Full screen ↗

Install

One file: sections/mf-before-after.liquid. It appears in the theme editor as EX · Before / After.

  1. Connect EXPERAISE Sections to Claude (once). In Claude Code:
    terminal
    claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcp --header "Authorization: Bearer YOUR_LICENSE_KEY"
    In the Claude app: Settings → Connectors → Add custom connector → https://sections.experaise.com/api/mcp. Full setup
  2. Ask Claude. It fetches sections/mf-before-after.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.
    prompt
    Install the EXPERAISE Sections section "Before / After" (before-after) on my Shopify store your-store.myshopify.com. Put it on an unpublished copy of my live theme, then tell me how to add it in the theme editor.
  3. Customize. Online Store → Themes → Customize → Add section → EX · Before / After. Every text, color and product is a setting.
Pro

The Liquid for Before / After is part of Unlimited

The live preview is free for everyone. Unlimited unlocks the installable file for every Pro section, Claude installs with your license key, and new drops every week.

Get Unlimited · €99/year →What's included
Why it converts

Visual proof of a transformation, with the numbers and the buy button beside it, answers "will it work for me?" at the moment of intent.

Specs

File: sections/mf-before-after.liquidIn the theme editor: EX · Before / AfterBest on: product, index, page templatesSettings: 28 · blocks: Result statValidated: Shopify Theme Check, no external assets

About this section

Before / After is a Pro Shopify Online Store 2.0 section that shows a transformation instead of describing it. Two images are stacked and a divider with a round double-arrow handle reveals one or the other. Shoppers drag it with a mouse, finger or pen; a tap jumps to that point, vertical swipes still scroll the page, and a real range input handles the keyboard (arrow keys, Page Up/Down, Home/End) with a screen-reader name and spoken percentages. Until the first interaction the divider glides gently back and forth with a Drag to compare hint under the handle, and corner labels fade as the divider nears them. Beside the comparison sit an eyebrow, a heading with an italic serif accent, rich text, up to three result blocks whose numbers count up on scroll, a disclaimer line for the study source, and a product bar with thumbnail, rating, price, compare-at price and an Add to cart button that uses the AJAX Cart API, or a plain link button. Merchants set the images, labels, image shape, starting position, sweep hint, button action and product, desktop side, padding and four colors. Empty image settings show an illustrated skin close-up: dull and uneven before, warm and glowing after. The conversion principle is proof at the point of purchase, which suits skincare, fitness, cleaning and home products. On mobile the comparison stacks above the copy; with reduced motion the sweep, count-up and entrance animations are off. It is one self-contained file with scoped CSS and JavaScript.

Questions

How do I get the before and after photos to line up?

Shoot both photos with the same framing, distance and light, export them at the same size, then pick them in Before image and After image. Choose the Image shape (portrait, square or landscape) closest to your photos; both are cropped to fill that shape from the center.

Is the slider accessible?

Yes. The handle is driven by a real range input, so keyboard users can focus it and use the arrow keys, Page Up and Page Down, Home and End. Screen readers announce the name you set in Slider name for screen readers, plus the before and after percentages. The focused handle gets a visible outline in your accent color.

What does the Add to cart button add?

With Button action set to Add product to cart, it adds the first available variant of the product you pick, or of the current product on a product page. It uses Shopify's AJAX Cart API and dispatches cart:refresh for cart drawers; if JavaScript fails, the real product form submits. Set Button action to Open a link to use a plain link button instead.

Can I stop the automatic sweep?

Yes. Untick Play a gentle sweep hint. The sweep also stops for good as soon as a shopper drags, taps or focuses the slider, pauses when the section is off screen, runs at most three times, and never runs when the visitor prefers reduced motion.

More sections