How does the Shopify virtual try-on widget get product data?

The widget reads SKU, image URL, variant ID, product name, price, and currency from Liquid-rendered data attributes on the PDP mount.

Does the widget support Shopify variant changes?

Yes. The recommended Shopify implementation refreshes the widget on variant change so try-on requests always use the currently selected variant data.

Can this become a Shopify app block later?

Yes. A common rollout pattern is theme-level integration first, then packaging the same experience as a cleaner app block or app embed for merchant enablement.

Shopify Retail Widget

AI virtual try-on for Shopify product pages.

Bring TryItOn directly into your Shopify PDP flow with a lightweight embed, variant-aware storefront logic, and retail controls that fit how merchandising and growth teams already work.

Contact Sales Read Install Guide

Online Store 2.0-readyLiquid-friendlyVariant sync compatibleRetail analytics hooks

2 lines

Mount the widget on the PDP and load the client script once.

Why Shopify Teams Care

Launch without breaking your storefront rhythm.

The widget fits the operational model Shopify teams already use: product templates, variant changes, merchandising-led launches, and fast iteration cycles.

+15-40%Conversion uplift benchmark range after try-on interaction

2-3xHigher purchase likelihood from shoppers who complete try-on

OS 2.0Clear path from theme snippet now to app-block packaging later

Implementation Model

How Shopify integration actually works.

Phase 1 is a theme-level PDP mount with variant-aware remount logic. Phase 2 is a formal app block or app embed for merchants that want cleaner enablement from Theme Customizer.

1. Place the mount

Render the widget container inside your product template or section where the Try It On entry point belongs.

2. Feed product context

Pass SKU, image URL, variant ID, product name, price, and currency directly from Liquid.

3. Re-mount on variant change

When the selected variant changes, refresh the widget so the shopper always sees the current product context.

Shopify Snippet

<div
  id="tryiton-widget"
  data-retailer-id="{{ settings.tryiton_retailer_id }}"
  data-sku="{{ product.selected_or_first_available_variant.sku | escape }}"
  data-variant-id="{{ product.selected_or_first_available_variant.id }}"
  data-image-url="{{ product.selected_or_first_available_variant.featured_image | image_url: width: 1200 | prepend: 'https:' }}"
  data-product-name="{{ product.title | escape }}"
  data-price="{{ product.selected_or_first_available_variant.price | money_without_currency | replace: ',', '' }}"
  data-currency="{{ shop.currency }}"
></div>
<script async src="https://cdn.tryiton.app/widget/v1.js"></script>

Operational Fit

Built for retail teams, not just proof-of-concept demos.

Merchandising-safe

Keep the shopper on your PDP and preserve the product story, pricing, and add-to-cart rhythm already optimized by the team.

Growth measurable

Track impressions, opens, completions, and cap events so your pilot can be judged on commercial movement, not novelty.

Storefront-governed

Use approved origins, monthly caps, and retailer-specific controls so usage stays predictable during a pilot rollout.

TryItOn branded app interface — The same warm, premium visual language from TryItOn’s core experience carries directly into the Shopify sales story: high confidence, low friction, and a cleaner PDP journey.

Next Step

Run a Shopify pilot that the merchandising and engineering teams can both support.

Use the Shopify page for platform fit, the install guide for implementation detail, and the ROI guide for commercial buy-in.