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

# Shopify

> Add pagent to your Shopify store with one snippet in your theme, and count orders with a custom pixel.

You add pagent to your Shopify theme once. It then loads on every page of your store. This takes about five minutes.

Copy your pagent snippet. You find it in the install step after you start your trial, and any time later in pagent under **Settings → Setup**. It looks like this, with your own client key:

```html theme={"dark"}
<script
  src="https://cdn.pagent.ai/js/sdk.js"
  data-client-key="YOUR_CLIENT_KEY">
</script>
```

Paste it unchanged. Don't add `async`, `defer` or `type="module"`: pagent needs to load before your page shows, so visitors never see the original flash.

## Add the snippet to your theme

**1. Open your themes**

In your Shopify admin, go to **Online Store → Themes**.

**2. Make a backup**

Next to your current theme, click **⋯ → Duplicate**. Shopify keeps the copy, so you can always go back.

**3. Open the code editor**

Next to your current theme, click **⋯ → Edit code**.

**4. Open theme.liquid**

In the file list, open **Layout → theme.liquid**.

**5. Paste the snippet**

Find the line `<head>` near the top. Paste your snippet on the next line, right after `<head>`.

**6. Save**

Click **Save**. The change is live on your store straight away.

> [!WARNING]
>
> When you update your theme, Shopify carries your code changes over, unless they conflict with the update. Check that the snippet is still in `theme.liquid` before you publish the new version.

> [!NOTE]
>
> Tests run on your storefront pages: home, collections, products, cart and your other pages. Shopify doesn't run your theme's code on its checkout, so tests stop at the last step before checkout. To count the orders that follow, add the pixel below.

## Check it worked

1. Open your site in a private browser window, so no cached version shows.
2. Back in pagent, click **Check connection** in the install step. If you've finished setup already, open **Settings → Setup**: it shows **You are ready** once pagent has received visits from your site.
3. pagent loads your live site and looks for the snippet. When it finds it, you can start your first test.

> [!TIP]
>
> pagent couldn't find the snippet? Make sure you published or saved the change on your live site, then check again. If you installed it through Google Tag Manager, open your site once in a normal browser window first.

## Count orders and revenue

Your theme snippet can't see Shopify's checkout, so orders aren't counted yet. A **custom pixel** reports every order to pagent, with its revenue, currency and products. It only tracks: your tests still run on your storefront.

**1. Copy your pixel**

In pagent, go to **Settings → Setup**, open **Shopify** and click **Copy**. The pixel already contains your client key.

**2. Add a custom pixel in Shopify**

In your Shopify admin, go to **Settings → Customer events** and click **Add custom pixel** (or **Add pixel**). Name it `pagent`.

**3. Paste, save and connect**

Under **Customer privacy**, set the permission to **Analytics**. Paste the pixel into the code field, then click **Save** and **Connect** (or **Connect pixel**).

**4. Create a purchase goal**

In pagent, create a [conversion goal](https://www.pagent.ai/docs/guides/tracking/conversion-goals.md) with the tag `purchase`. Orders arrive without it too, but you need the goal to pick them for a test.

**5. Check it**

Place one test order and check that it shows up in pagent.

> **What the pixel does**
>
> It loads pagent in analytics-only mode and reports each completed checkout once, even if the thank-you page is reloaded. Each order includes its revenue, currency and line items, so a goal can also target specific products.
>
> ```javascript theme={"dark"}
> // pagent order tracking for the Shopify checkout.
> var script = document.createElement("script");
> script.src = "https://cdn.pagent.ai/js/sdk.js";
> script.setAttribute("data-client-key", "YOUR_CLIENT_KEY");
> script.setAttribute("data-analytics-only", "true");
> document.head.appendChild(script);
>
> analytics.subscribe("checkout_completed", function (event) {
>     var checkout = event.data.checkout;
>     var order = checkout.order || {};
>     var orderId = order.id || null;
>
>     // Shopify can replay this event when the thank-you page is reloaded.
>     // Wrapped: if storage is unavailable, send the order rather than lose it.
>     try {
>         if (orderId) {
>             if (localStorage.getItem("pgnt-order-" + orderId)) return;
>             localStorage.setItem("pgnt-order-" + orderId, "1");
>         }
>     } catch (e) {}
>
>     var items = (checkout.lineItems || []).map(function (line) {
>         var variant = line.variant || {};
>         var product = variant.product || {};
>         var price = variant.price || {};
>         return {
>             title: line.title || null,
>             product_id: product.id || null,
>             variant_id: variant.id || null,
>             quantity: line.quantity || 0,
>             price: Math.round(Number(price.amount || 0) * 100),
>         };
>     });
>
>     window._pgnt = window._pgnt || [];
>     window._pgnt.push({
>         kind: "conversion",
>         label: "purchase",
>         revenue: Math.round(Number(checkout.totalPrice.amount) * 100),
>         properties: {
>             order_id: orderId,
>             currency: checkout.currencyCode || null,
>             item_count: items.length,
>             items: items,
>         },
>     });
> });
> ```

> [!NOTE]
>
> Where your store asks visitors for cookie consent, the pixel only runs once they accept analytics. Orders from visitors who decline aren't counted. New pixels ask for marketing consent too by default, which is why you set the permission to Analytics.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.