Show the difference. Sell the result.
A draggable before/after comparison of two images, two videos or two PDFs, on product pages automatically or on any page. Designed in your admin with a live preview. No code.
Free plan with no watermark and no view limits. Paid plans from $4.99/month, 7-day trial.
Drag the handle, or tab to it and use the arrow keys. Hover the dots for details.
Live in three steps
No theme code. The Get started checklist inside the app walks you through it in about three minutes.
Create a slider
Pick Before and After from your store's Files or upload, choose a preset, drag the live preview to check it, save.
Say where it goes
Assign it to a product or a collection, or copy its Slider ID for any page. Galleries, hotspots and captions are optional extras.
Add the block once
In the theme editor add the Product, Collection or Any page block. Every assigned product shows its own slider from then on.
Everything a comparison needs, nothing your theme has to pay for
Built as a theme app extension: the slider renders from your store's own data and loads one small script. No theme files are touched.
Drag, touch, keyboard
Left/right or top/bottom. A real slider control that screen readers announce, with reduced-motion support.
Images, videos, PDFs
Uploaded videos play in sync. YouTube and Vimeo pairs share one play button. PDFs compare page to page.
Product pages, automatically
Assign a slider to a product or a whole collection. The product block shows the right one with no per-page setup.
Galleries and hotspots
Several pairs in one swipeable block, mixing kinds, with dots that show a tooltip on either side.
Presets and a live editor
Handle styles, labels, colours, aspect ratio, auto-sweep, zoom and captions, previewed as you type. Custom CSS per slider.
Fast by design
Space reserved before images load, responsive images from Shopify's CDN, an 8 KB stylesheet and a deferred 17 KB script.
Documents too
Menus, brochures, price lists, proofs. Compare two PDFs in the browser's own viewer, with a preview image for phones.
- Pick PDFs from your store's Files or upload them in place
- Each side gets a preview image for devices that can't show PDFs inline
- Mix a PDF pair with image and video pairs in one gallery
Your brand, your layout
Four presets to start from, then every setting is yours: handle shape and size, divider, corner radius, labels and where they sit, start position, hover-to-move, auto-sweep, zoom, entrance animation.
- Before/After labels translated per storefront language
- Caption and call-to-action button under the slider
- Embed code for blog posts, Custom Liquid sections or sites outside Shopify
- See how many shoppers dragged each slider, counted without cookies
Use the arrows or dots; each pair keeps its own handle. Hover the dot on the image for the tooltip.
Galleries that mix kinds
Several pairs in one swipeable block. Each pair chooses its own kind, so a skincare gallery can hold photo pairs, a video pair and the routine card as a PDF pair.
- Two images
- Two videos: upload, YouTube or Vimeo
- Two PDFs
- Up to 10 pairs
- Hotspots on either side
- Caption per pair
Why merchants pick it
Most before/after apps compare two images with a horizontal divider. This one is built for a catalog, and for shoppers who use a keyboard or a screen reader.
| Before After Slider | Typical slider apps | |
|---|---|---|
| Free plan | No watermark, no view limits, every style setting | Watermarked or capped views |
| Product pages | Assign per product or per collection; the block shows the right slider | Configure a block on each page by hand |
| Media | Images, uploaded videos, YouTube, Vimeo, PDFs, mixed in one gallery | Images, sometimes video |
| Editor | Live, draggable preview in the admin; presets; custom CSS | Settings in the theme editor sidebar |
| Accessibility | Keyboard control, ARIA slider, reduced-motion support | Mouse and touch only |
| Performance | Rendered from store data, reserved space, one deferred 17 KB script | Loads from the app's servers on every view |
| Insight | Drags and plays per slider, counted without cookies | None |
Simple pricing
Free covers image sliders with every style option and no watermark. Paid plans add video, PDFs, galleries, hotspots, embedding and custom CSS. Yearly is ten months' price. No plan ever caps views.
Free
$0
No card needed
- 2 sliders
- Image comparisons, both directions
- Every style setting and preset
- Product, collection and any-page blocks
- No watermark, no view limits
Starter
$4.99 / month
or $49.90 / year, 7-day free trial
- 15 sliders
- Video and PDF comparisons
- Galleries of up to 5 pairs
- Hotspots with tooltips
- Embed code for any page
- Priority email support
Growth
$9.99 / month
or $99.90 / year, 7-day free trial
- Unlimited sliders
- Galleries of up to 10 pairs
- Per-slider custom CSS
- Video, PDF and hotspots
- Embed code for any page
- Premium priority support
Questions
Does it slow my store down?
No. The block renders from your store's own data on the server, reserves its space before images load, and adds one small deferred script. It never calls our servers on a page view.
How do I put it on a product page?
Assign a slider to a product (or a collection) in the app, then add the Before After: Product block to your product template once. Every assigned product shows its own slider from then on.
Can shoppers use it without a mouse?
Yes. It works with touch, the handle responds to the arrow keys, screen readers announce it as a slider, and animations turn off for people who prefer reduced motion.
Does it work with my theme?
Any Online Store 2.0 theme: the app ships theme app extension blocks you add in the theme editor, and it never edits your theme files. The look comes from the slider itself, so a change in the app updates every placement.
Do PDFs work on phones?
Desktop browsers show the PDF itself. Many phones won't render a PDF inline, so each side of a PDF pair has a preview image field; set it to a screenshot of the first page and phones show that instead.
Can I translate the labels?
Yes. Add Before and After text per language code in the editor and shoppers see the labels for the language they browse in.
What happens if I downgrade or cancel?
Every slider you built keeps working on your storefront. You're only limited in how many new ones you can create. Billing is handled by Shopify and appears on your Shopify bill.