Before / after
How to add before-and-after photo pairs, link them to a service and specialist, change their order, and how clients compare the result on your page.
Updated
On this page
Where to find itHow to add a pairHow the pair looksOrder, editing and deletingWhat the client seesFAQBefore-and-after photo pairs show the result of your work at a glance: the client moves a slider and sees the difference on a single image. This is especially convincing for hairdressers, cosmetologists, nail artists, renovation or cleaning services.
Where to find it
- Open “Page” → “Page sections”.
- In the “Show: Before / after” row, click “Manage”.
The “Before and after” screen opens with a list of your pairs. To go back to the list of sections, use the “← Page sections” link.
How to add a pair
- Click “Add Before / After”.
- In the “Before photo” field, click “Upload” and choose the photo taken before the work.
- In the “After photo” field, upload the photo of the result the same way.
- Optionally fill in the “Service” and “Specialist” fields. If you don't need them, leave “Not linked” and “No specialist”.
- Adjust how the pair looks (see below) and click “Save”.
Both photos are required: a pair with only one of them won't be saved. JPG, PNG, WEBP and HEIC are supported, each file up to 8 MB.
How the pair looks
- “Display” — “Fill the frame” (the photos fill the frame, edges may be cropped) or “Show in full” (the whole photo is visible, there may be empty margins).
- “Before focus” and “After focus” — “Top”, “Center” or “Bottom”: which part of each photo stays in view when it's cropped. This helps line up two shots taken slightly differently.
- “Visible” — untick it to hide the pair from the page without deleting it.
Order, editing and deleting
- To change the order, drag a pair by its number (01, 02…) and click “Save order”.
- To edit a pair, make the changes in its card and click “Save” in that same card.
- To delete a pair, click “Delete” at the top of its card and confirm in the “Delete this photo from the gallery?” dialog.
What the client sees
A before/after section appears on your page. Each pair is a single image with “Before” and “After” labels and a slider: the client drags it left or right to compare the result.
If you picked a service or specialist, their name is shown right on the pair image.
The section is shown when both of these are true:
- “Show: Before / after” is ticked in “Page sections”;
- at least one pair has “Visible” ticked.
You can change the section's position, title and subtitle in “Page sections” — see Page sections: show, hide, reorder. If you haven't set your own title, the section is called “Before / after”.
FAQ
I can't save a pair: the browser highlights a photo field.
One of the photos hasn't been uploaded. A pair is saved only when it has both a “Before photo” and an “After photo”.
I added a pair, but the section isn't on my page.
Check that “Show: Before / after” is ticked in “Page sections” and that “Visible” is ticked in the pair's card.
I get “The file is too large. Choose a photo under 8 MB.”
Make the photo smaller and try again.
I get “Unsupported image format. Try JPEG, PNG or an iPhone photo (HEIC).”
The file is in an unsupported format. Save the photo as JPG or PNG.
Can I add several pairs for one service?
Yes. Add several pairs and pick the same service in each one.
Where do regular work photos without a pair go?
Add them in “Page” → “Photos and top gallery” — see Photos, cover and gallery.