How to Add a Before and After Gallery to Webflow

Webflow doesn't have a built-in before and after gallery. You can fake one in a few ways, but only one of them gives patients a way to find results that look like them.

Here are the three options, what each one gets right, and where each one falls short. Setup steps for the best option are in the middle.

The short answer

To add a before and after gallery to Webflow, you paste a gallery tool's embed code into a Code Embed element on the page where you want it, then publish. You need a paid Webflow site plan, because custom code doesn't work on the free Starter plan.

Everything else is a choice about how much work you want to do by hand, and where your patient photos will live.

Option 1: A slider widget or cloneable

Search for "Webflow before and after slider" and you'll find plenty. Some are free cloneable projects. Others are widgets you build on another site and paste in, like the ones from Jotform or Elfsight.

They all do one job well. A visitor drags a handle and the photo changes from before to after.

That's the easy part. What they don't do:

• Filter. A patient can't narrow to rhinoplasty, or to women in their 50s.
• Track consent. There's no record that a patient agreed to this photo being public.
• Protect the files. These tools are built for any kind of image, not for patient photos. Ask where the files are stored and whether the company will sign a Business Associate Agreement before you upload anything.

If you have five cases and no plans to add more, a widget is fine. Past that, you'll feel the gaps.

Option 2: A Webflow CMS collection

Some designers build the gallery inside Webflow's CMS. Each case becomes an item with a before image, an after image, and fields for procedure, age, and so on. Webflow can filter and sort that data.

It's a legitimate approach, and it keeps everything in one place. It also has a cost:

• Someone has to build and maintain it. Your front desk probably can't add a case without learning Webflow's editor.
• Every photo you upload becomes part of your website's image library. Images shown on a public website are public. Anyone with the link can load them.
• You'll build the slider and the filters yourself, or pay a developer to.

For a practice that has a Webflow developer on retainer, this can work. For everyone else, it turns a gallery into an ongoing project.

Option 3: An embed-based gallery tool

This is the approach most practices end up with. You manage your cases in a separate dashboard. The tool gives you one snippet of code. You paste that snippet into Webflow once. After that, every case you add shows up on your site without touching Webflow again.

Because the gallery lives in its own system, it can do things a widget can't. It can filter by procedure, age range, and gender. It can ask for consent before a case goes live. And your photos sit in private storage instead of your website's image library.

Proova works this way. Here's how to set it up on Webflow.

How to add the embed

1. Check your plan. Custom code needs a paid Webflow site plan. Webflow's own integration pages say this, and the free Starter plan can't publish custom code.
2. Get your embed code. Create a free Proova account and copy your snippet. It's a single script tag.
3. Open the page. In the Webflow Designer, go to your results or gallery page.
4. Add a Code Embed element. Open the Add panel, find the Code Embed element, and drag it to where you want the gallery.
5. Paste the snippet. Click into the element, paste your code, and choose Save & Close.
6. Publish. Script-based embeds usually don't run in the Designer. Publish the site, or open your staging link (the one ending in .webflow.io), to see the gallery live.

That's the whole job. Most of the time is spent on step 2, and it's a few minutes.

If you're a freelancer or agency setting this up for a client, ask them to create the account. It keeps the photos and the consent records in the practice's hands, not yours. If you build sites for aesthetic practices regularly, there's also a partner program.

What to check before you call it done

Open the published page on your own phone. Not a browser emulator, a real phone.

Then run through this list:

• Does the slider respond to a swipe?
• Do the filters fit on the screen without getting cut off?
• Can you see the consultation button without scrolling?
• Does the page load quickly on cellular data?

If any answer is no, fix it before you send patients there. Check your own analytics, but for most practices a large share of visitors are on phones. A gallery that only works on a desktop is a gallery many people never really see.

Also check where the embed sits. A gallery buried at the bottom of a long procedure page gets less attention than one with its own page and a clear link in your main menu. Our post on why plastic surgery websites don't convert goes through how to connect procedure pages, the gallery, and your booking page.

Where your patient photos end up

This is the part most Webflow guides skip.

Before and after photos of identifiable patients are health information. If you upload them into your site's image library, they sit in the same place as your logo and your headshots. They're meant to be seen by the public, and anyone who finds the image address can open it.

That doesn't mean you can't show patient photos. It means you need written permission from each patient first, and you want the files stored somewhere built to handle them. Our guide to getting patient consent for before and after photos covers the permission side. For the storage side, a gallery tool that keeps photos private and strips location data from each file is a safer home than a website media library.

None of this is legal advice. A healthcare attorney can tell you what your state requires.

Frequently asked questions

Do I need a paid Webflow plan to add a gallery? Yes, for any embed that uses custom code. The free Starter plan doesn't allow it.

Will the gallery work on my CMS pages? You can place a Code Embed element in a CMS collection page template, so it can appear on every page built from that template. Test one page before you roll it out.

Can patients filter by procedure? Not with a basic slider widget. A gallery tool built for aesthetic practices can, because the filtering depends on the procedure, age range, and gender you record when you upload each case.

Can my front desk add new cases? With an embed-based tool, yes. They add cases in the tool's dashboard. Nobody has to open Webflow.

What does it cost to try? Proova's free plan includes one published case, with no credit card. That's enough to see it running on your actual site before you decide anything.

On a different platform? See our guides for Squarespace and Wix. Still comparing tools? Our guide to choosing before and after gallery software covers the questions to ask.

---

Your results are probably better than your gallery makes them look. If you're on Webflow, you can try Proova free and have a case live on your site today.