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

# Shopify — Google Tag Manager

> Step-by-step guide to add Wearo virtual try-on to your Shopify store using Google Tag Manager.

# Install on Shopify via Google Tag Manager

This is the method used by Kookai in production. It takes 5 minutes and
doesn't require editing your theme code.

## Prerequisites

* A Wearo account ([sign up](https://wearo.io/signup))
* Your Wearo API key ([get yours](/getting-started/api-key))
* Google Tag Manager installed on your Shopify store
* Publishing rights on your GTM container

<Steps>
  <Step title="Open Google Tag Manager">
    Log into [tagmanager.google.com](https://tagmanager.google.com) and open
    the container associated with your Shopify store.
  </Step>

  <Step title="Create a new Custom HTML tag">
    1. Click **Tags → New**.
    2. Name the tag `Wearo Widget`.
    3. Click on **Tag Configuration → Custom HTML**.
  </Step>

  <Step title="Paste the Wearo snippet">
    GTM defers script execution, so use the queue pattern to avoid race conditions:

    ```html theme={"dark"}
    <script src="https://wearo.io/widget/tryon-widget.js" async></script>
    <script>
      window.TryOnWidgetQueue = window.TryOnWidgetQueue || [];
      window.TryOnWidgetQueue.push({
        method: 'init',
        config: {
          apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
          productSelector: '.product__media img, .product-featured-media img',
          brandColor: '#000000'
        }
      });
    </script>
    ```

    Replace `wearo_xxx...` with your API key, and `brandColor` with your brand's hex color.

    <Tip>
      The `productSelector` above works for most Shopify themes (Dawn, Sense, Refresh).
      If your theme is custom, see [Custom selectors](/configure/custom-selectors).
    </Tip>
  </Step>

  <Step title="Set the trigger">
    1. Click on **Triggering → All Pages** (built-in trigger).
    2. Or, for better performance, create a custom trigger that fires only on product pages
       (URL path matches RegEx `/products/.*`).
  </Step>

  <Step title="Save and publish">
    1. Save the tag.
    2. Click **Submit** in the top right.
    3. Add a version name like `Add Wearo widget` and publish.
  </Step>

  <Step title="Verify it works">
    Open your store in an incognito tab, navigate to any product page.
    You should see the "Try it on" button next to the product image.

    Back in your Wearo dashboard → **Analytics**, the "Widget Displayed" counter
    should increment on each product page view.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="The button doesn't appear">
    Open the browser DevTools console. You should see `[TryOnWidget]` messages.
    If you see "No matching product image found", your theme uses different
    CSS classes. Try this generic selector:

    ```js theme={"dark"}
    productSelector: 'img[src*="cdn.shopify.com/s/files/"]'
    ```

    Still stuck? [Book a 15-min debug call](https://calendly.com/wearo/integration).
  </Accordion>

  <Accordion title="The button appears, but on the wrong image">
    Your theme might have multiple matching images. Use a more specific selector
    based on your theme. Inspect the main product image in DevTools and copy
    its unique class or data attribute.
  </Accordion>

  <Accordion title="Multiple buttons appear">
    Your selector matches more than one image. Restrict to the first match:

    ```js theme={"dark"}
    productSelector: '.product__media:first-child img'
    ```
  </Accordion>

  <Accordion title="The button appears, but clicking does nothing">
    Check the console for errors. Most common: invalid API key, or domain not
    whitelisted. See [API key domain restrictions](/getting-started/api-key#restrict-your-key-to-specific-domains).
  </Accordion>
</AccordionGroup>

## Switching to the Shopify Public App (when available)

When the Wearo Shopify App launches, you'll be able to migrate by:

1. Installing the app from the Shopify App Store
2. Removing the GTM tag

[Join the waitlist →](https://wearo.io/waitlist/shopify)

## Need help?

<Card title="Book a 30-min integration call" icon="calendar" href="https://calendly.com/wearo/integration">
  We'll review your store and set up Wearo live with you.
</Card>