What you actually need (it's less than you think)
Virtual try-on used to be an enterprise project: custom development, per-frame scanning hardware, six-figure contracts. Today the working model for independent eyewear stores is a widget — one line of JavaScript pasted into your site that adds a "Try On" button to your product pages. The provider handles face tracking, 3D rendering and model hosting; your site just carries the script tag.
Every integration below boils down to the same three steps:
- Get your frames digitized. Good providers generate 3D models from the product photos you already have — you shouldn't need to ship physical frames anywhere.
- Paste one script tag into the part of your theme that renders on every page.
- Map frames to product pages — usually automatic (by product title or URL), configured on the provider's side, not in your code.
After that, new frames added to your catalog get a try-on button without touching code again. If a provider's onboarding involves more than this, ask why.
Shopify: 2 minutes in theme.liquid
Shopify stores have two clean options. If your provider offers a Shopify app, install it from the App Store and you're done. The universal method works on every theme:
- Shopify Admin → Online Store → Themes
- On your live theme: ⋯ → Edit code
- Under Layout, open theme.liquid
- Paste the provider's script tag on the line just above
</body>, then Save
The script now loads on every page of your store, and the try-on button appears automatically on product pages with a digitized frame. Theme updates: if you switch themes later, you re-paste the one line — that's the entire maintenance burden.
WooCommerce / WordPress: use a footer-injection plugin
You can edit footer.php directly, but theme updates overwrite it. The safer route for non-developers is a code-injection plugin:
- Install the free WPCode plugin (or "Insert Headers and Footers")
- Go to Code Snippets → Header & Footer
- Paste the script tag into the Footer box → Save
This survives theme updates and takes about three minutes. The try-on button then appears on your WooCommerce product pages exactly as on Shopify.
Wix, Squarespace and Webflow: the custom-code section
Every major site builder has a site-wide code slot:
- Wix: Settings → Custom Code → Add Custom Code → paste → placement "Body – end" → apply to All Pages
- Squarespace: Settings → Advanced → Code Injection → paste in Footer
- Webflow: Project Settings → Custom Code → Footer Code → paste → Publish
One caveat: some builder plans gate custom code behind a paid tier (Squarespace requires Business; Wix requires a connected domain). Check your plan before promising a launch date.
Custom-built sites: before the closing body tag
If your site is hand-coded or built on a less common platform, paste the script into whatever shared layout or footer include every page uses, just before </body>. The tag looks like this:
<script src="https://provider.com/widget.js" data-key="your_api_key" async></script>
The async attribute matters: it tells the browser to load the widget in parallel without ever blocking your page render. The API key identifies your store — it's designed to be visible in your page source, and it only works on domains you've authorized, so someone copying your code gets nothing.
Choosing a provider: the questions that separate them
| Question to ask | Answer you want |
|---|---|
| How do frames get digitized? | From your existing product photos — no shipping, no scanner |
| Turnaround for a new frame? | A committed SLA in hours or days, not "it depends" |
| Page speed impact? | Small async loader; AR engine loads only on click |
| Works in the browser, no app? | Yes, on iOS Safari and Android Chrome |
| What happens when I add products? | Send photos; the button appears — no code changes |
The turnaround question deserves the most weight. Stores that abandoned try-on usually did so because digitization lagged their catalog — new bestsellers sold out before their 3D models arrived. The technology matters less than the operational speed behind it. For the revenue case — what try-on actually does to conversion rate and returns — see our data guide on virtual try-on and conversion and why shoppers buy more when they can try frames on. Or skip the reading and try a live demo on your own face.
Frequently asked questions
Do I need a developer to add virtual try-on to my glasses website?
With a widget-based provider, no. The integration is a single script tag pasted once into your theme's shared layout — the same difficulty level as installing Google Analytics. Platform-specific steps for Shopify, WooCommerce, Wix and others take 2-10 minutes each. Custom API integrations are also possible but only make sense for large catalogs with in-house development teams.
Will a try-on widget slow down my website?
A well-built widget won't. Look for a loader under 10 KB that loads asynchronously (so your page never waits for it) and defers the heavy AR engine until a shopper actually clicks the try-on button. Shoppers who never click download almost nothing. You can verify this yourself by running Google PageSpeed Insights before and after installation.
Do customers need to install an app to use virtual try-on?
No — modern virtual try-on runs entirely in the web browser using the device camera, on both mobile (iOS Safari, Android Chrome) and desktop. If a provider requires a native app download, shoppers largely won't use it; browser-based is the standard to insist on.
See how ARLens brings real-time AR try-on to your storefront — no app install, one script tag, live in minutes.