Virtual Try-On for Webflow Ecommerce Stores

Webflow stores are usually designed with care. Someone chose that exact shade of grey, and nobody wants a stranger's widget wrecking it.

Can you add virtual try-on to a Webflow store?

You can, in two ways. Embed a ready made try-on widget, or connect a try-on API to your product pages with your own code.

Corlen fits the second way. We build a Shopify app and a WordPress plugin, not a Webflow app, and it is kinder to say so before you brief a freelancer.

What are your options on Webflow?

• A third party widget: you paste a snippet and go. Fastest to start, but you inherit its look, its limits and its pricing.
• A try-on API with your own code: more setup, full control over the button, copy and flow.
• A freelancer or agency build: the same API route, with someone else carrying the work and the testing.

A widget saves time if it renders your garments well. The API route suits stores that care how the button looks, or that already work with a developer.

How does the API route work on Webflow?

Webflow's help center says its Code Embed element supports HTML, CSS in style tags and JavaScript in script tags, and that you cannot run server side languages in it. It also says the element needs a paid Workspace or an active Site plan. That shapes the whole design: the page can show the button, but something else has to talk to the API.

1. Add a Code Embed to your product template with a try-on button and a photo upload.
2. Send the shopper's photo, with the product's garment image, to an endpoint you host, such as a serverless function.
3. Have that endpoint call the Corlen API with your key and start a job.
4. Poll the job status, then show the finished image in the page.

The key stays on that endpoint. Paste it into the page script and anyone with dev tools can copy it, which is a costly way to meet browser inspectors. The API guide for developers walks through the request flow, and the docs list the exact fields.

One caveat: we found no Webflow documentation on reading product data inside a Code Embed on an Ecommerce template, so confirm on your own site how to pass the garment image URL through.

What should you test before launch?

Start with the live demo to see how your garments render, before any build time goes in.

• Garment photos: flat, whole, plain background. Our guide to photographing clothing for virtual try-on has the checklist.
• Your hardest pieces: layered looks, long hems, heavy prints.
• Page speed: load the script only on product pages and only when the shopper taps the button.
• Mobile: most shoppers will upload a photo from a phone, so test the upload there first.

If the demo mangles your best seller, no embed will fix that. Better to learn it in ten minutes than after a launch.

Should you build it or use a widget?

Use a widget if you have no developer and one renders your garments well. Build if you want control over the experience or already have technical help. Our post on build versus buy for virtual try-on covers that decision in more detail.

Either way, measure it. Pick a handful of products, compare returns against a similar period, and follow the steps in how to measure virtual try-on results. When you want to see your own pieces rendered, try Corlen on your own photo.