Virtual try-on for Shopify

VTON ships as a single JavaScript snippet that you drop into your theme's product.liquid (or the section file your theme uses for the product page). When the script loads, it finds the main product image, reads the size chart from your existing markup, and renders a "Try it on" button beneath the variant selector.

There's no Shopify app to install. Nothing to approve in your admin. The snippet talks to our API directly using a publishable key tied to your store, so it works the same on Dawn, Debut, Sense, your old Brooklyn theme from 2018, or a fully custom Hydrogen storefront.

<!-- Add to product.liquid, just before </body> -->
<script
  src="https://virtualclothingtryon.com/widget.js"
  data-vton-key="vton_pk_your_publishable_key"
  data-vton-product-image="{{ product.featured_image | img_url: '1024x' }}"
  data-vton-product-title="{{ product.title | escape }}"
  defer
></script>

Three data attributes do all the work: your publishable key (created automatically when you sign up), the garment image URL, and the product title. The script auto-detects most size charts on the page; if yours lives in a tab or accordion you can pass a CSS selector with data-vton-size-chart.

A "Try it on" button appears under your add-to-cart. Tapping it opens a modal where the customer uploads a full-body photo or picks one they've used before. We mask out their original outfit, fit your garment to their measurements (auto-detected from the photo, refined by your size chart), and return a result in 12–18 seconds.

The widget is a 14 KB gzipped script and loads with defer, so it never blocks first paint. The modal and its dependencies are fetched only when the customer taps the button. We don't ship a single web font, polyfill, or analytics beacon — your Core Web Vitals stay where they were.

VTON reads the active Shopify variant in real time. When the customer changes from a Medium to a Large in your variant picker, the chest, length, and shoulder values from your size chart update before they generate the try-on. The result reflects the size they would actually buy, not a generic mid-size estimate.

The first 50 try-ons each month are free on every plan. Most stores running this on a single product line never go over. If you do, paid plans start at £49/month for 1,000 try-ons. There's no per-store fee, no setup cost, and you can remove the snippet at any time without lingering tags or pixels.

1. Create a free VTON account. Your publishable key appears on the dashboard.
2. In Shopify admin, go to Online Store → Themes → Edit code.
3. Open sections/main-product.liquid (or your theme's product section).
4. Paste the snippet from above near the bottom of the file.
5. Replace vton_pk_... with your real key.
6. Save. Open any product page. The button is there.