How the integration works
1
Identify the storefront
Shopify provides the installed store context automatically. Custom JavaScript sites use a public
siteKey and an exact allowed origin.2
Resolve the current product
Shopify supplies its product ID and handle. Custom sites resolve a synced product from the page URL or an explicit
setProduct call.3
Check product readiness
The product must be available for try-on and have a usable garment image. Otherwise, the fitting room stays hidden.
4
Show the interface
virtual.fit anchors the Try On control to the main product media and keeps the shopper on the merchant storefront.
5
Generate and measure
The shopper uploads a photo, starts a try-on, and receives a generated result. Usage and commerce activity appear in virtual.fit analytics.
What each side provides
Storefront presentation settings cannot make an unavailable product eligible. Product state and customer access are managed in virtual.fit.
Product gating
The fitting room renders only when all required state is present:- The storefront is connected and authorized.
- The current page resolves to a known product.
- That product is available for try-on.
- Product preparation found at least one usable garment image.
- The configured mount target exists on the page.
Shopper identity
Shopify supplies signed-in customer context through the app integration. Custom sites can callsetCustomer after login and on identity changes. Anonymous shoppers receive a storefront-scoped identity unless your access policy requires login.
Use setConsentMode('cookieless') when analytics must omit shopper identity. See Privacy and consent.
Custom JavaScript developers can find the stable integration commands in the Browser API reference.