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

# Quickstart

> Choose Shopify or Custom JavaScript and complete your first virtual.fit try-on.

Your first successful setup should prove one complete path: virtual.fit appears on an eligible product page, a shopper completes a try-on, and the result reaches your dashboard.

<Tabs>
  <Tab title="Shopify">
    <Steps>
      <Step title="Install the app">
        Open the virtual.fit setup, choose **Shopify**, enter your `.myshopify.com` store name, and select **Install on Shopify**.
      </Step>

      <Step title="Complete the account link">
        Approve the Shopify install. Return to the setup checklist and select **Open virtual.fit in Shopify** if asked to finish linking the store.
      </Step>

      <Step title="Enable the app embed">
        Click **Open theme editor**. In Shopify's **App embeds** panel, turn on **Virtual Fitting Room**, then click **Save**.
      </Step>

      <Step title="Wait for the first product">
        virtual.fit automatically prepares eligible apparel on the first connection. Confirm at least one garment is **Active** and ready.
      </Step>

      <Step title="Test the storefront">
        Open the Active product's storefront URL. Confirm **Try On** appears once over the main product media and complete a try-on.
      </Step>
    </Steps>

    <Check>
      The setup is working when the generated image appears on the product page and under **Virtual Fitting Room → Results**.
    </Check>

    [Continue with the Shopify guide →](/shopify/install)
  </Tab>

  <Tab title="Custom JavaScript">
    <Steps>
      <Step title="Register the storefront">
        Open the virtual.fit setup, choose **Custom JS**, and save the exact production origin, such as `https://shop.example.com`.
      </Step>

      <Step title="Sync one product">
        Import a product by CSV or management API. Its ID or handle must match the value exposed by the product URL.
      </Step>

      <Step title="Configure URL detection">
        Choose a rule such as `/products/:handle`. Paste a real product URL into the live tester and confirm it resolves to the available product.
      </Step>

      <Step title="Install the loader">
        Copy the generated snippet from virtual.fit. Point `mount` at the main product media wrapper and load the exact hosted script URL shown for your site.
      </Step>

      <Step title="Test the storefront">
        Open the available product URL, complete a try-on, and confirm the result appears under **Results**.
      </Step>
    </Steps>

    <Check>
      The loader stays hidden on non-product pages, unmatched URLs, disabled products, and products without usable garment images.
    </Check>

    [Continue with the Custom JavaScript guide →](/custom-js/quickstart)
  </Tab>
</Tabs>

<Warning>
  Test on a staging theme or staging origin first. Use the same product IDs, handles, and mount selector that production will expose.
</Warning>