Before and after slider for Shopify
Last updated
One click fills in a typical photo pair and opens the checklist. Then change the answers to match your own photos.
Pick a use case above. A checklist for your two photos appears here, followed by the before and after widget itself.
What makes a fair photo pair
A before and after slider for Shopify lays two photos of the same subject over each other and lets a shopper drag a handle across to compare them, and this tool checks whether your photo pair is fair to publish and previews the Nudgesmart widget that shows it.
The legal points on this page follow the FTC Endorsement Guides (16 CFR Part 255), the FTC guidance on health claims, and the UK ASA and CAP Code on beauty, health and weight-control advertising. No figure is quoted for what a slider does to sales. Every other store widget is in the widget gallery, and the help guide walks through adding a widget to your store.
A slider is ruthless with mismatched photos, because the two images sit exactly on top of each other. These are the things the checklist above looks at.
- Photo pair
- Two shots of one subject: the before on one side of the handle, the after on the other. Same crop, same size, same orientation, so dragging reveals the change and nothing else.
- Matching conditions
- Camera position, distance, zoom and light kept the same for both shots. A tripod mark on the floor or a phone held against a fixed edge is enough for most products.
- Unedited after
- The after photo as the camera took it. Cropping and exposure applied equally to both files are fine; smoothing, filters, reshaping or a different white balance on one side are not.
- Time between shots
- How long passed between the two photos, stated in the caption. A shopper judging a serum, a cleaner or a training plan needs to know whether the change took an hour or three months.
- Typical result
- What most customers can expect. If the pair shows an unusually strong outcome, the caption says what is more common rather than leaving the photo to speak for everyone.
- Release
- Written permission from anyone recognisable in the photos to use them on your store. Keep it with the original files.
Nudgesmart adds widgets like this one to your store from the theme editor, in your theme’s fonts and colours by default, and is available on the Shopify App Store. See every widget layout or see what it costs.
Five photo pairs, checked
Invented pairs. The verdict, the open items and the suggested caption come from the same function the checklist above runs.
| Photo pair | Verdict | Still to do | Caption to start from |
|---|---|---|---|
| Serum, customer photos eight weeks apart, same window light | Ready | Time between the photos, Results vary, Consent from the person pictured, Beauty claims | Customer photos, taken some weeks apart, no retouching. Results vary. |
| Hair colour, salon model, after shot run through a beauty filter | Do not publish | Unedited after photo, Time between the photos, Results vary, Consent and who is pictured, Beauty claims | None until the after photo is replaced |
| Kitchen paint, before on a grey morning, after in full sun | Fix first | Same light, Time between the photos | Photos, taken a few days apart, no retouching. |
| Fitness programme, customer, nobody remembers the dates | Fix first | Same angle and distance, Time between the photos, Results vary, Consent from the person pictured, Health and weight claims | Customer photos, taken [time between photos], no retouching. Results vary. |
| Leather cleaner on a boot, same bench, same afternoon | Ready | Time between the photos | Photos, taken on the same day, no retouching. |
Honesty rules for before and after photos
A filtered after photo is a false claim
The UK Advertising Standards Authority has ruled against beauty ads where a filter made the product look more effective than it is, under the CAP Code rules on misleading advertising. The same logic applies on a product page: if the after has been smoothed or retouched, the slider shows something the product did not do.
One great result implies everyone gets it
The FTC Endorsement Guides (16 CFR Part 255) treat a customer result as a claim that others can expect something similar. If your best photo is not typical, the page should say what customers generally see, not bury a small-print disclaimer under it.
Health and beauty claims need evidence first
In the US the FTC expects health claims, including weight loss and supplement results, to be backed by competent and reliable scientific evidence before they run. In the UK the CAP Code has dedicated rules for beauty, health and weight-control claims. A before and after photo next to the product is one of those claims.
Faces are personal data
A recognisable customer photo is personal information under UK and EU data protection law. Ask in writing, say where it will appear, keep the answer, and take the pair down promptly if the person withdraws.
The checklist reads your answers, not your photos
Nothing is uploaded here, so the tool cannot see a tilted horizon or a warmer after. It trusts what you tell it. Put the two files side by side on screen before you publish and look for any difference besides the result.
The preview uses a sample pair
The slider on this page is the app widget showing its own sample photos, so you can judge the style and colours. Your own pair goes in when you build the widget in the app.
Before and after slider questions
How do I add a before and after slider to a Shopify store?
Create a before and after widget in the Nudgesmart app, add the two photos and a caption, and publish it. Add to store then opens your theme editor with the block already added to the page you picked, ready to save.
What makes a good before and after photo?
One subject shot twice from the same spot, at the same distance, in the same light, with no editing on the after beyond what the before also received. Then a caption that says how much time passed.
Can I use a customer photo?
Yes, with their written permission. Keep a copy, tell them where the photo will appear, and say in the caption if they received the product as a gift or were paid. Remove the pair if they ask.
Do I need to say results vary?
For skin, hair, body and health products, yes in practice. Under the FTC Endorsement Guides a customer result is read as typical unless you say what people generally see, and a short honest line does more than a long disclaimer.
Can I touch up the after photo?
Only in ways you apply equally to both: the same crop, the same exposure, the same colour balance. Anything applied to the after alone, such as smoothing or a filter, changes what the comparison claims.
Will the slider match my theme?
New widgets use your theme fonts and colours by default. You can also choose a style and a palette in the app, which is what the preview on this page lets you try.
A result a shopper can drag across is easier to believe than a claim.
Nudgesmart has a before and after widget with a slider the shopper drags, in seven styles that use your theme’s fonts and colours by default.
