> ## Documentation Index
> Fetch the complete documentation index at: https://docs.virtual.fit/llms.txt
> Use this file to discover all available pages before exploring further.

# How virtual.fit works

> Understand product readiness, the shopper journey, and the information each integration supplies.

Your virtual.fit dashboard controls product availability and shopper access. The storefront integration presents the fitting room on eligible product pages.

## Runtime flow

<Steps>
  <Step title="Identify the storefront">
    Shopify provides the installed store context automatically. Custom JavaScript sites use a public `siteKey` and an exact allowed origin.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Check product readiness">
    The product must be available for try-on and have a usable garment image. Otherwise, the fitting room stays hidden.
  </Step>

  <Step title="Show the interface">
    virtual.fit anchors the **Try On** control to the main product media and keeps the shopper on the merchant storefront.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## Control plane and storefront

| Area         | virtual.fit controls                                 | Your storefront supplies                             |
| ------------ | ---------------------------------------------------- | ---------------------------------------------------- |
| Access       | Available products, customer access, daily limits    | Customer identity and login return URL               |
| Product data | Catalog records, usable images, product instructions | Current product ID, handle, title, and image         |
| Experience   | Product readiness and shopper policy                 | Placement, labels, terms, and appearance             |
| Measurement  | Analytics and result reporting                       | Cart, checkout, and purchase events for custom sites |

<Note>
  Storefront presentation settings cannot make an unavailable product eligible. Product state and customer access are managed in virtual.fit.
</Note>

## 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.

This fail-closed behavior prevents a broken or incomplete fitting room from appearing on unrelated pages.

## Shopper identity

Shopify supplies signed-in customer context through the app integration. Custom sites can call `setCustomer` 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](/operations/privacy-and-consent).

Custom JavaScript developers can find the stable integration commands in the [Browser API reference](/custom-js/browser-api).