How-to
How to let customers try on clothes online
To let customers try on clothes online, create a widget API key in Alovia, whitelist the domains allowed to use it, then paste one script tag into your product page template. Shoppers upload their own photo and see themselves wearing the garment in about 20 seconds. Each completed try-on costs 10 credits, so set your caps before launch.
To let customers try on clothes online, create a widget API key in Alovia, whitelist the domains allowed to use it, then paste one script tag into your product page template. Shoppers upload their own photo and see themselves wearing the garment in about 20 seconds. Each completed try-on costs 10 credits, so set your caps before launch.
What you'll need
- A product page you can edit the HTML template of (Shopify Liquid, WooCommerce PHP, or plain HTML)
- A publicly reachable image URL for each product
- Credits on your Alovia account — each completed try-on costs 10
Steps
Create a widget API key
In the Virtual Try-On Widget tab of your dashboard, create an API key. It starts with alv_pk_ and is what authenticates every call the embedded script makes. Create a separate key per storefront so you can disable one without breaking the others.
Whitelist your domains before the key goes public
Add the domains allowed to use that key; wildcard subdomains such as *.example.com are supported. Do this first, not last — the key sits in your page source where anyone can read it, and the domain whitelist is what stops it being called from somewhere else.
Paste one script tag into your product template
Copy the generated script tag and paste it before the closing body tag. Ready-made snippets cover plain HTML, Shopify Liquid (which auto-fills the current product image and title), and WooCommerce PHP. It runs as a floating button by default, or inline inside a container you nominate.
Map your product types to the four categories
The widget recognises exactly four categories — top, bottom, shoes, and accessory — and your store's own product types have to be mapped onto them. Dresses and blouses count as top; skirts and leggings as bottom. Get this wrong and the garment is fitted to the wrong part of the body.
Set your caps before you launch, not after
Each completed try-on costs 10 credits, and a public product page can generate a lot of them. Set a per-session try limit (three per shopper by default) and an optional per-day cap across the whole key, which is unset by default. You can also switch off anonymous use and require an identifier from your own login.
Watch the first week of analytics
The widget dashboard tracks views, unique sessions, photo uploads, successful and failed generations, and credits used. The number to watch first is uploads against views: if shoppers open the widget but do not upload, the ask is the problem, not the try-on.
Frequently asked questions
Do shoppers need an account to try clothes on?
No, not by default — anonymous use is allowed and the widget issues a session token automatically. You can turn anonymous use off, in which case the widget must be given a user identifier from your own login system before it will generate anything.
How long does a try-on take?
About 20 seconds. The widget submits the job and polls for the result, so the shopper stays on your product page while it runs rather than being sent somewhere else and back.
What does each try-on cost?
A completed widget try-on deducts 10 credits from your account. Credits come from your plan, so the meaningful number is how many try-ons a month you are willing to fund — and that is exactly what the per-session and per-day caps are for.
Does this work on WooCommerce or a custom storefront?
Yes. Alongside the Shopify Liquid snippet there is a WooCommerce PHP snippet for your single-product template, a plain HTML version, a DOM auto-detect mode that reads the product image straight off the page, and a JavaScript API with init, open, close, and setProduct for fully custom builds.
Can shoppers try on a whole outfit rather than one garment?
Yes. Instead of a single product image you can pass a JSON array of items with their categories — a jacket as top, trousers as bottom, shoes as shoes. Each one auto-fills its slot and the shopper only customises whatever is left.
What happens when a shopper hits the try limit?
The request is refused and the widget reports how many tries were used and that none remain. The same happens at the daily cap across the whole key, and separately if the account runs out of credits — each is a distinct refusal, so you can tell which limit you actually hit.
What stops someone copying my API key out of the page source?
The domain whitelist. The key is publishable by design and is visible to anyone who views source, so the control is not secrecy — it is that a request arriving from a domain you have not listed is rejected. That is why this guide whitelists domains before the key goes into a live page.
Does the shopper see themselves, or a model who looks like them?
Themselves. The widget prompts them to take or upload a photo and will not generate anything without one — a request with no shopper image is rejected outright. There is no preset-model fallback.
Can I be notified when a try-on finishes?
Yes. Set a webhook URL on the widget key and Alovia will call it when a generation completes or fails, which is how you would log try-ons into your own analytics rather than reading them from the Alovia dashboard.
What will virtual try-on not fix?
It will not tell a shopper their size — there is no fit or size recommendation — and it cannot rescue a poor garment photo, because the result is only as good as the product image you point it at. It also will not help if you have no on-model imagery at all yet; generating your catalog is the bigger constraint, and that is a different tool.
Continue building
Ready to get started?
Follow these steps inside Alovia — no photoshoot, no studio booking required.