Tryonixs Blog
Shopify Virtual Try-On Without an App: The Theme Snippet Guide
Most "AR try-on" results in the Shopify App Store are exactly that — an app, with app-store review, recurring fees, and limited control over placement. Here is how to add virtual try-on to a Shopify store as a theme snippet instead, live the same day, with full control over where and how it appears.
Shopify virtual try-on doesn't require an App Store listing. A theme snippet approach — adding a script tag and a button snippet directly to your theme, with per-product images set via metafields — gets AR try-on live on product pages in under 30 minutes, with full control over placement and styling.
Why "app" and "virtual try-on" don't have to go together
Search "virtual try-on" in the Shopify App Store and every result is, unsurprisingly, an app: a listing to install, a review process to pass, and usually a recurring subscription on top of whatever the underlying try-on vendor already charges. That model made sense when AR try-on required a dedicated native SDK bundled into a packaged integration.
It's not the only way to do this anymore. Virtual try-on today is fundamentally a JavaScript SDK plus a camera-permission modal — the same category of thing as a chat widget or a reviews carousel. Those don't require an app installation either; you drop a script tag in your theme. Tryonixs takes the same approach: two Liquid snippets, a theme setting, and a product metafield, with no app store listing at all.
What the theme-snippet approach actually gets you
- No approval wait
- No extra app subscription layer
- Exact placement control
Skipping the App Store isn't just about avoiding a review queue — three concrete things change. First, there's no approval wait; the snippet works the moment you paste it into your theme editor and save. Second, there's no app-marketplace fee layered on top of your Tryonixs plan, since the integration is a snippet you own, not a third-party app wrapper. Third, and often underrated, you control exactly where the "Try On" button renders in your theme's markup — inside your existing add-to-cart block, in a custom position, or auto-injected — rather than wherever an app's fixed widget slot happens to place it.
What you need before you start
A free Tryonixs account and your public API key (starts with pk_live_). Access to your Shopify theme editor (Online Store → Themes → Edit code). And a transparent PNG image per product you want live — a frame image for eyewear with no model face in the shot, or a shade swatch for beauty products. If you don't have these assets prepared yet, start with three to five hero SKUs rather than your full catalog; you can expand once you've validated the experience.
Step 1: Add the SDK snippet
Create a new snippet file named tryonixs-sdk.liquid in your theme's Snippets folder. This loads the Tryonixs JavaScript SDK and, depending on configuration, can auto-inject a "Try On" button near your product's add-to-cart section. Include this snippet once, near the closing </body> tag of your theme.liquid layout file, so it loads on every page without duplicating the script tag.
Step 2: Add the button snippet (if you want manual placement)
If you'd rather place the button yourself — say, directly beside your existing "Add to Cart" button rather than wherever auto-injection lands it — use tryonixs-button.liquid instead. Drop it exactly where you want the button to render inside your product template (usually main-product.liquid or a product-form section), and it will read the product's frame/shade image from the metafield you set in step 4.
Step 3: Set your API key in theme settings
Open your theme's customizer settings (or theme settings schema, if you're editing code directly) and add your Tryonixs public API key. This is safe to expose client-side — public keys are scoped to domains you've explicitly allowlisted in your Tryonixs dashboard, so a copied key can't be used to spoof sessions on a domain you haven't approved.
Step 4: Map product images with a metafield
In Shopify Admin, go to Settings → Custom data → Products and add a metafield definition — Tryonixs uses tryonixs.frame_image_url for eyewear (the same field works for beauty shade images with the appropriate category set). For each product you want live, paste the transparent PNG URL into that metafield. This is what lets the snippet know which image to render for which SKU, without hardcoding URLs into your template.
Step 5: Allowlist your domain and go live
In your Tryonixs dashboard, add your storefront's domain (and your *.myshopify.com preview domain, if you want to test before launch) to your API key's allowed-domains list. Save, preview your product page, click Try On, and grant camera permission — you should see the frame or shade render on your live camera feed within seconds.
Rolling out to beauty products, not just eyewear
The exact same snippet pattern covers foundation and lipstick try-on — set the product's category and shade-image metafield, and the SDK routes to the right try-on module (foundation uses an on-device AI skin-segmentation model for shade accuracy; lipstick extracts color directly from your product photo). One integration, both eyewear and beauty categories.
Common setup mistakes
The most common issue is uploading a product photo with a model's face still in frame instead of an isolated, transparent-background image — this produces distorted or double-face results. The second most common is forgetting to allowlist the exact domain the shopper is browsing on (including the www. prefix, if your store uses one) — sessions from non-allowlisted domains are blocked by design, for security. The third is testing only on desktop Chrome and skipping mobile Safari, which is stricter about camera permissions and where the majority of eyewear and beauty shopping traffic actually happens.
Frequently asked questions
- Do I need to install anything from the Shopify App Store?
- No. The entire integration is two Liquid snippets added directly to your theme, a theme setting for your API key, and a product metafield for images — no App Store listing or app installation involved.
- Will this work with Online Store 2.0 (section-based) themes?
- Yes. The Liquid snippets work with both Online Store 2.0 and legacy Shopify themes — the setup steps are identical either way, since it's a standard snippet include, not a theme-architecture-specific integration.
- Can I add try-on to only a few products first?
- Yes — try-on only activates on products where you've set the frame/shade image metafield. Start with three to five hero SKUs, validate the experience and analytics, then expand to the rest of your catalog.
- Does the public API key need to be kept secret?
- No. Public keys (pk_live_...) are designed to be exposed client-side in your theme code — they're scoped to your allowed-domains list, which is what actually enforces security, not key secrecy.
- Will adding this slow down my product pages?
- No meaningfully. The SDK script loads asynchronously, and the AI face-tracking models only download when a shopper actually clicks "Try On" — not on initial page load — so there's no measurable page-speed cost for shoppers who don't use the feature.
- What if I later want a packaged app instead of a snippet?
- The snippet approach and a packaged app achieve the same end result technically — both load the same SDK. Most merchants stick with the snippet since it avoids an extra subscription layer and gives more control, but nothing about the setup locks you out of other options later.
Launch AI Virtual Try-On on your store in minutes
Start with the free Tryonixs Starter plan — upload up to 15 products, run unlimited virtual try-ons, and integrate with Shopify, WooCommerce, or any custom storefront.
Frequently asked questions
Do I need to install anything from the Shopify App Store?
No. The entire integration is two Liquid snippets added directly to your theme, a theme setting for your API key, and a product metafield for images — no App Store listing or app installation involved.
Will this work with Online Store 2.0 (section-based) themes?
Yes. The Liquid snippets work with both Online Store 2.0 and legacy Shopify themes — the setup steps are identical either way, since it's a standard snippet include, not a theme-architecture-specific integration.
Can I add try-on to only a few products first?
Yes — try-on only activates on products where you've set the frame/shade image metafield. Start with three to five hero SKUs, validate the experience and analytics, then expand to the rest of your catalog.
Does the public API key need to be kept secret?
No. Public keys (pk_live_...) are designed to be exposed client-side in your theme code — they're scoped to your allowed-domains list, which is what actually enforces security, not key secrecy.
Will adding this slow down my product pages?
No meaningfully. The SDK script loads asynchronously, and the AI face-tracking models only download when a shopper actually clicks "Try On" — not on initial page load — so there's no measurable page-speed cost for shoppers who don't use the feature.
What if I later want a packaged app instead of a snippet?
The snippet approach and a packaged app achieve the same end result technically — both load the same SDK. Most merchants stick with the snippet since it avoids an extra subscription layer and gives more control, but nothing about the setup locks you out of other options later.
Follow Tryonixs
Connect with Tryonixs on social media for AR virtual try-on updates, product launches, and eyewear technology insights.
Ready to add virtual try-on to your store?
Start free with Tryonixs — 15 products, unlimited try-on sessions, Shopify and WooCommerce integrations included.