Virtual try-on · Ecommerce · Fashion
Virtual try-on for online shops: how it works and how to add it
Let shoppers see clothes on their own body before they buy. How AI virtual try-on works, what photos it needs, and how to add it to WooCommerce or Shopify.
· 5 min read
If you sell clothes online, you already answer the same question every day, in comments and DMs: “How will this look on me?” A photo on a model answers it for the model. Virtual try-on answers it for the person asking, with their own photo, before they pay.
It used to need a 3D scan, a custom app or an enterprise budget. Now it is one photo of the garment, one photo of the shopper and about fifteen seconds. Here is how it works, where it helps, where it doesn't, and how to put a Try it on button on your own shop.
What virtual try-on actually is
An AI image model takes two pictures: your product photo (the dress on a hanger, the shirt laid flat) and a photo of a person. It returns a new photo of that person wearing that garment, keeping their face, body and skin tone, and keeping the garment's colour, print and cut.
It is a picture, not a measurement. It shows how a colour suits someone, how a print sits on a real body and whether a cut is their style. It does not know their waist size, and it can't promise how the fabric will stretch. That difference matters, and it's worth being honest about it on your product page.
Where it helps
- Fewer “will it suit me?” messages. A shopper who has already seen it on themselves has one less reason to ask, or to wait.
- More confidence on colour and print, which are the things a model photo is worst at answering for someone with a different skin tone or build.
- A reason to stay on your page. The button turns looking into doing, without sending anyone to an app.
- Better content for you. Sellers can try new stock on themselves, a friend or a regular customer (with their permission) and post the result before shooting anything.
Where it doesn't help
- Sizing. Keep your size guide right beside the button. Try-on shows the look, the size guide shows the fit.
- Shoes, bags, hats and sunglasses. These work less well than clothing and jewellery. Hide the button on products it doesn't suit.
- Bad photos. A dark, blurry or cropped photo gives a disappointing result. The tips below fix most of that.
Photos that work
One person in the picture, facing the camera.
Waist-up for tops, full-length for dresses and trousers.
Even light: near a window beats a ceiling bulb.
Fitted clothes underneath. A big hoodie hides the shape the garment needs to sit on.
The whole garment in frame: laid flat, on a hanger or on a mannequin.
Its real colour. Avoid heavy filters on the product photo.
The product photo you already sell with usually works as it is.
Privacy and consent come first
A try-on handles a photo of a real person, which is personal data under laws like Kenya's Data Protection Act and the EU's GDPR. Shoppers will only use it if they trust it, so the rules should be simple enough to say in one line.
- Ask first. Before anyone chooses a photo, they confirm it's of them, or of someone who agreed, and that they're 18 or over.
- Don't keep it. The shopper's photo should be used once to make the picture and then discarded, not saved to a server or used for training.
- Check what comes back. Screening the result, not just the upload, stops the tool being used to put someone in clothing they never agreed to.
- Say it where people decide. One sentence under the button beats a paragraph in your privacy policy.
Clara's try-on works this way. On a shop's button, nothing about the shopper is stored: their photo goes from their phone to Clara inside Clara's own window, the picture comes straight back to them, and the shop never sees the photo at all.
How to add it to your shop
Sign in to Clara, open the virtual try-on page and add your shop. Enter your web address and a monthly limit, and you get a shop key with the install steps for your platform already filled in.
Download the plugin from the try-on page.
In WordPress: Plugins → Add New → Upload Plugin, then Activate.
WooCommerce → Settings → Products → Virtual try-on: paste your shop key.
The button appears under Add to cart on every product with a photo.
Online Store → Themes → Customize, then open a product page.
Add block → Custom Liquid, and paste the snippet from the try-on page.
Drag it under the Buy buttons and press Save.
Paste one script tag with your shop key anywhere on the page.
Add a button with data-clara-try-on wherever you want it.
Without a product photo set, it uses the page's share image.
If you sell on Instagram, TikTok or WhatsApp
Plenty of fashion sellers have no product pages at all; the sale happens in a chat. Try-on still works there. When a customer asks how something will look, ask if they'd like to see it on themselves, and if they say yes and send a photo, make the try-on and send it back. Ask before you use their photo, and delete it from your phone afterwards.
What it costs, and who pays
Each try-on is one AI render, so it has a real cost. In Clara, a try-on uses a fixed number of credits, and on your shop those credits come from your account, never from the shopper. You set a monthly limit, and the button stops offering try-ons when it's reached, so a busy month can't surprise you.
Start with a limit you'd be happy to spend on a month of sampling, then look at what happened before raising it.
How to tell if it's working
- Note how many “how will it look?” and “does it suit dark skin?” messages you get in a normal week before you switch it on.
- Turn it on for your best-selling clothing first, not the whole catalogue.
- After a month, compare those messages, your orders on those products and your returns for “didn't suit me”.
- Keep it on the products where shoppers use it, and hide it where they don't.
Turn your next take into a video people finish.
Captions timed to every word, a pinned hook and a tighter edit, all from the footage you already have.
Start free