Skip to main content

​
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)
  • Your Wearo API key (get yours)
  • Google Tag Manager installed on your Shopify store
  • Publishing rights on your GTM container
1

Open Google Tag Manager

Log into tagmanager.google.com and open the container associated with your Shopify store.
2

Create a new Custom HTML tag

  1. Click Tags → New.
  2. Name the tag Wearo Widget.
  3. Click on Tag Configuration → Custom HTML.
3

Paste the Wearo snippet

GTM defers script execution, so use the queue pattern to avoid race conditions:
<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.
The productSelector above works for most Shopify themes (Dawn, Sense, Refresh). If your theme is custom, see Custom selectors.
4

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/.*).
5

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

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.

​
Troubleshooting

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:
productSelector: 'img[src*="cdn.shopify.com/s/files/"]'
Still stuck? Book a 15-min debug call.
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.
Your selector matches more than one image. Restrict to the first match:
productSelector: '.product__media:first-child img'
Check the console for errors. Most common: invalid API key, or domain not whitelisted. See API key domain restrictions.

​
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 →

​
Need help?

Book a 30-min integration call

We’ll review your store and set up Wearo live with you.