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

# virtual.fit documentation

> Add the virtual.fit fitting room to Shopify or any custom storefront.

virtual.fit adds an AI fitting room to product pages. Shoppers upload a photo, preview a garment, build confidence in their choice, and continue shopping without leaving your storefront.

<CardGroup cols={2}>
  <Card title="Install on Shopify" icon="bag-shopping" href="/shopify/install">
    Connect your store, enable the theme app embed, prepare products, and launch.
  </Card>

  <Card title="Install with JavaScript" icon="code" href="/custom-js/quickstart">
    Add the hosted loader to any storefront and control product, customer, and commerce context.
  </Card>
</CardGroup>

## Choose an integration

<Tabs>
  <Tab title="Shopify">
    Use the Shopify app when your catalog and storefront run on Shopify. Product sync, theme delivery, customer context, and commerce analytics are integrated for you.

    [Start the Shopify installation →](/shopify/install)
  </Tab>

  <Tab title="Custom JavaScript">
    Use the hosted JavaScript loader for headless commerce, custom platforms, and non-Shopify stores. You control catalog sync, URL matching, customer identity, and commerce events.

    [Start the JavaScript installation →](/custom-js/quickstart)
  </Tab>
</Tabs>

## What you configure

<Steps>
  <Step title="Connect the storefront">
    Install the Shopify app or register your custom storefront's allowed origins.
  </Step>

  <Step title="Prepare the catalog">
    Prepare eligible apparel, choose which products are Active, and review the garment images used for try-on.
  </Step>

  <Step title="Place the fitting room">
    Enable the Shopify app embed or mount the JavaScript widget to the main product gallery.
  </Step>

  <Step title="Test the full journey">
    Run a real try-on, add the item to cart, and confirm data appears in **Analytics** and **Results**.
  </Step>
</Steps>

## Next steps

<CardGroup cols={3}>
  <Card title="How it works" icon="diagram-project" href="/getting-started/how-it-works">
    Understand product readiness, the shopper journey, and data flow.
  </Card>

  <Card title="Launch checklist" icon="list-check" href="/getting-started/launch-checklist">
    Verify behavior before exposing virtual.fit to shoppers.
  </Card>

  <Card title="Privacy and consent" icon="shield-halved" href="/operations/privacy-and-consent">
    Configure shopper notices and analytics consent.
  </Card>
</CardGroup>