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

# Shopify

> Install the Tag on a Shopify storefront and track conversions from the sandboxed checkout.

Shopify needs a two-part setup:

1. **Storefront** — install `tag.min.js` like any other site (direct JS or [GTM](/advertisers/attribution/tag/guides/google-tag-manager)). It captures the click token from the landing URL and stores it in a cookie on your apex domain (e.g. `.yourshop.com`).
2. **Checkout** — the checkout page runs inside a sandboxed [Web Pixels API](https://shopify.dev/docs/api/web-pixels-api) context where `tag.min.js` can't reach. We use Shopify's **Custom Pixel** API to read the cookie via `browser.cookie.get()` and POST the conversion to Thrad directly.

## 1. Install the Tag on your storefront

Same as any other site — pick one path:

* **Direct JS** — follow [Install](/advertisers/attribution/tag/install), pasting the snippet into `theme.liquid` (above `</head>`).
* **GTM** — follow the [GTM guide](/advertisers/attribution/tag/guides/google-tag-manager). The loader tag fires on All Pages of the storefront.

The Tag stores the click token in a cookie called `thrad_click` on your apex domain so checkout can read it.

## 2. Add the Custom Pixel for checkout

In Shopify Admin → **Settings → Customer events → Add custom pixel**, name it `thrad pixel`, and paste:

```js thrad pixel.js theme={null}
analytics.subscribe("checkout_completed", async (event) => {
  try {
    const raw = await browser.cookie.get("thrad_click");
    if (!raw) {
      // No cookie = organic visitor, not an attributable conversion. Skip.
      return;
    }

    let token;
    try {
      token = JSON.parse(decodeURIComponent(raw));
    } catch {
      return;
    }

    if (!token.clickId || !token.exp || !token.sig) {
      return;
    }

    const checkout = event.data.checkout || {};
    const payload = {
      tag_id:   "<YOUR_TAG_ID>",
      order_id: (checkout.order && checkout.order.id) || checkout.token,
      value:    checkout.totalPrice && checkout.totalPrice.amount,
      currency: checkout.totalPrice && checkout.totalPrice.currencyCode,
      click_id: token.clickId,
      exp:      Number(token.exp),
      sig:      token.sig,
    };

    await fetch("https://events.thrad.ai/v1/conversion", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
      keepalive: true,
    });
  } catch {
    // Swallow errors — pixel failures must never break checkout.
  }
});
```

Replace `<YOUR_TAG_ID>` with the tag ID Thrad sent you.

Save the pixel and toggle it to **Connected**.