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

# Install on Shopify

> Connect Shopify, activate the virtual.fit app embed, and verify your first product page.

The Shopify integration connects your catalog and adds virtual.fit through a theme app embed. You do not need to edit Liquid or paste JavaScript into your theme.

## Before you begin

You need:

* Permission to install apps on the Shopify store.
* Permission to customize and save the target theme.
* Workspace owner or admin access in virtual.fit.
* At least one apparel product with clear product images.

<Note>
  Shopify app embeds are off by default after installation. Activate the virtual.fit embed separately in every theme you publish.
</Note>

## Install and connect

<Steps>
  <Step title="Start from virtual.fit">
    Open your virtual.fit setup, choose **Shopify**, and enter the store name from `your-store.myshopify.com`.
  </Step>

  <Step title="Approve the Shopify install">
    Select **Install on Shopify**, review the requested permissions, and approve the installation in Shopify admin.

    Start from virtual.fit so the store connects to the correct workspace.
  </Step>

  <Step title="Complete account linking">
    Return to the setup checklist. If asked, select **Open virtual.fit in Shopify** and complete the connection from the embedded app.
  </Step>

  <Step title="Let virtual.fit prepare the catalog">
    On the first connection, virtual.fit imports and prepares eligible apparel up to your plan limit. You can continue with theme setup while this runs.

    Keep the preparation page open if requested. This first-time step may take several minutes for a large catalog.
  </Step>

  <Step title="Open the theme editor">
    Select **Open theme editor** in virtual.fit.

    You can also go to **Shopify admin → Online Store → Themes → Customize → App embeds**.
  </Step>

  <Step title="Activate the app embed">
    Turn on **Virtual Fitting Room**, then select **Save**.

    The integration overlays the product gallery, so you do not need to place an app block in the product template.
  </Step>
</Steps>

Shopify documents app embed activation under **Theme settings → App embeds** in its [theme app extension guide](https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration#app-embed-blocks).

## Verify the installation

Wait until at least one apparel product is **Active** and ready, then open its public storefront URL.

<Check>
  A correct installation has all of these behaviors:

  * **Try On** appears once over the main product media.
  * The interface opens without leaving the product page.
  * An inactive product does not show the control.
  * A completed try-on appears under **Results** in virtual.fit.
</Check>

<Warning>
  The theme editor preview is useful for placement, but it does not replace a test on the saved public or password-protected storefront.
</Warning>

## When you change themes

App embed state belongs to the theme. After publishing a different theme:

1. Open that theme in the theme editor.
2. Activate **Virtual Fitting Room** under **App embeds**.
3. Save the theme.
4. Repeat the storefront launch checks.

The app embed does not permanently modify your theme's Liquid source. Turning off the app embed is the fastest storefront rollback.

## Next steps

<CardGroup cols={2}>
  <Card title="Configure the experience" icon="sliders" href="/shopify/configure">
    Set placement, appearance, customer access, limits, and shopper copy.
  </Card>

  <Card title="Review products" icon="shirt" href="/shopify/products">
    Understand preparation, recommendation readiness, and product images.
  </Card>
</CardGroup>