> ## 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 — theme.liquid (manual)

> Add Wearo virtual try-on by editing your Shopify theme.liquid directly.

# Install on Shopify via theme.liquid

Use this method if you don't use Google Tag Manager and prefer to edit your theme directly.

## Prerequisites

* A Wearo account ([sign up](https://wearo.io/signup))
* Your Wearo API key ([get yours](/getting-started/api-key))
* Access to your Shopify theme editor (**Online Store → Themes → Edit code**)

<Steps>
  <Step title="Open your theme code">
    In your Shopify admin, go to **Online Store → Themes**.
    Next to your active theme, click **Actions → Edit code**.
  </Step>

  <Step title="Open theme.liquid">
    In the **Layout** folder, click `theme.liquid`.
  </Step>

  <Step title="Add the snippet before </body>">
    Find the closing `</body>` tag (near the end of the file) and paste the
    Wearo snippet just before it:

    ```html theme={"dark"}
    <script src="https://wearo.io/widget/tryon-widget.js"></script>
    <script>
      TryOnWidget.init({
        apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
        productSelector: '.product__media img, .product-featured-media img',
        brandColor: '#000000'
      });
    </script>
    </body>
    ```

    Replace `wearo_xxx...` with your API key.
  </Step>

  <Step title="Save the file">
    Click **Save** in the top right corner.
  </Step>

  <Step title="Verify it works">
    Open a product page in an incognito tab. You should see the "Try it on" button.
    Check your dashboard **Analytics** to confirm the widget is tracking.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="The button doesn't appear on my theme">
    Your theme may use different CSS classes than Dawn/Sense/Refresh. Try this
    generic selector that works on any Shopify CDN image:

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

  <Accordion title="I prefer not to edit theme files">
    Use the [GTM method](/install/shopify-gtm) instead — it doesn't require
    touching your theme code.
  </Accordion>
</AccordionGroup>

## Need help?

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