Case study · Our own Wix app

Before and After Pro

We kept adding before and after sliders to Wix sites and kept hitting the same problems: slow loading, dated designs, missing features and support that didn't answer. So we built our own: a fast, modern comparison widget that site owners set up visually, right in the Wix editor.

Get it on your Wix site →Try it on this page
ProductOur own Wix app
Young Web Solutions
What we didProduct design, Wix app development, performance, testing, App Market preparation
Runs onWix Editor and Wix Studio sites, on any phone, tablet or laptop
StatusRunning on client sites. Installed on request

The problem

The sliders we tried held sites back

Heavy scripts slowed pages down, the designs looked dated, features like video or several comparisons were missing, and support was slow or gone.

What we built

A small widget with a visual editor

Slider, reveal, pixel and blur effects, several comparisons in one widget, video and auto-animation. Every option is a picture in the settings panel, not a wall of text.

Where it is now

Running on client sites

It's live on client sites through an agency partner. That work is white-label, so we can't name them. Any Wix site owner can ask us to install it.

Starting point

We were tired of working around other people's sliders.

Before and after comparisons sell work: renovations, retouching, cleaning, treatments, landscaping. We added them to Wix sites often, and every app we tried had the same mix of problems. They loaded slowly and weighed down the page. Their designs looked like they were made years ago. Simple things, like a video comparison or a few projects in one slider, weren't possible. And when something broke, nobody answered.

So we built Before and After Pro the way we wanted one to work: small enough that it doesn't slow the site, flexible enough to match any design, and set up entirely by clicking and dragging in the Wix editor.

  • Slow loading
  • Dated designs
  • Missing features
  • No support

Try it

This is the real widget. Drag it.

The same code that runs on Wix sites, running on this page. Pick a style and try it with your mouse or finger.

Drag the handle, or click anywhere on the image.

What it does

Everything we missed in the other sliders.

01 · Slider

Drag to compare

Side by side or top and bottom, with any start position. Works with a mouse, a finger or the keyboard.

02 · Reveal

Trail, pixel and blur

Visitors uncover the result as they move: a soft trail, a pixel trail, or a blurred photo that turns sharp.

03 · Collections

Several comparisonsPremium

Many projects in one widget, browsed with thumbnails, dots or a grid. Each one has its own images.

04 · Video

Video comparisonsPremium

Compare two videos, or a video with a photo. On mobile, a cover image can show instead to save data.

05 · Motion

Auto-animationPremium

The slider can move by itself to show visitors what to do, then stops as soon as they take over.

06 · Design

Match any site

Line, handle shape, icon, colours and labels, all with live previews. Fonts follow the site.

07 · Devices

Desktop, tablet, mobile

Change settings for each screen size, like a smaller handle or hidden labels on phones.

08 · Framing

Size and position by dragging

The widget fills the box you drag in the editor. Each photo can be nudged left, right, up or down to line up.

In the editor

Set up by clicking, not by reading manuals.

Every choice in the settings panel is a picture, so owners can see what they're picking. These loops run the real widget.

Upload two photos · the slider is ready
Comparison style · trail, pixel or blur
Design · colour and handle shape, live
Several comparisons · one widget, three projects

Screens

From the settings panel to the live site.

Before and After Pro settings panel in the Wix editor, with picture cards for the comparison style and direction next to a live preview
1 · Settings: picture cards and a live preview for every choice
A styled before and after slider on a sample photography website, with a yellow pill handle and custom labels
2 · On the site: handle, line and labels styled to match
Before and After Pro showing several comparisons in one widget with thumbnails below
3 · Several comparisons, with thumbnails to jump between them
Before and After Pro on a phone-sized screen
4 · Mobile: its own settings, sized for a thumb

Swipe to see all four screens →

Speed

Fast by design, not by luck.

Slow sliders were the main reason we started, so speed was a rule from day one. Every release is checked against a size budget, and the build fails if the widget grows past it.

The widget loads after the rest of the page, so it doesn't hold back the site's own content or its search ranking. Images are sized to the screen, start with a tiny blurred preview, and photos further down the page only load when the visitor gets close.

<14 KBCode every visitor downloads, compressed
On demandCode for several comparisons loads only on widgets that use it
After loadStarts once the page is ready, so the site's speed and SEO stay intact
2×Image sharpness capped at 2× screen density, so phones don't download giant files

How we work

Tested before every release.

Before and After Pro is built in small releases. Each one passes a full set of automated checks before it reaches a site, and updates reach every installed site on their own, with nothing for the owner to click.

  1. Design for the owner. Group the settings the way people think, and show every choice as a picture.
  2. Build on the platform. Sizing comes from the Wix editor's own box, and uploads go to the site's Wix Media.
  3. Test in real browsers. 128 unit tests and 60 browser tests cover layouts, effects, devices and plans.
  4. Release in small steps. Fixes and features roll out to every site automatically.

Plans

Free to start. Premium when you need more.

Free

Everything most sites need.

  • One comparison per widget
  • Slider, reveal trail, pixel trail and blur
  • Full design control: line, handle, icon, labels
  • Settings for desktop, tablet and mobile
  • A small "Powered by YWS" badge

Premium

For portfolios and businesses that show a lot of work.

  • Several comparisons in one widget
  • Video comparisons
  • Auto-animation
  • No badge
  • Upgrading unlocks features on the live site, without republishing

Built for trust

Good for visitors, easy on the owner.

Keyboard friendly

The handle works with arrow keys and shows a clear focus ring.

Alt text for every image

Owners can describe each photo for screen readers and search engines.

Respects reduced motion

Auto-animation stays still for visitors who've asked their device for less motion.

No visitor tracking

The widget doesn't set cookies or collect anything about visitors.

Hints only for the owner

Setup tips and Premium notes show in the editor. Visitors never see them.

Safe settings

Every change is checked after saving, so the owner knows it stuck.

Who this is for

Before and After Pro is our product. Custom Wix apps are what we do.

Businesses that show results

Renovation, cleaning, landscaping, beauty, photography and retouching.

  • Show the change, not just describe it
  • Several projects in one place
  • Looks right on phones

Agencies building on Wix

A fast, good-looking comparison widget for your clients' sites.

  • Set up in minutes in the editor
  • Matches any design
  • White-label work welcome

Anyone who needs a Wix app

We built this one for ourselves. We can build one for your business too.

  • Custom Wix apps and widgets
  • Built on the platform you already use
  • Tested before customers see it

Next step

Want it on your site, or an app of your own?

Send us your Wix site's address and we'll install Before and After Pro for you. Or tell us what you need your site to do, and we'll talk through a custom app.

Install it on my Wix siteEmail us contact@youngwebsolutions.coCustom app enquiry www.youngwebsolutions.coWebsite