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

# Shopify + Custom

> For stores with a Shopify front end and checkout, but a custom backend that sends orders to Northbeam.

Use this page if your **front end is Shopify** but your **backend is custom**:

* **Front end (Shopify):** your storefront and checkout both run on Shopify.
* **Backend (custom):** your own system, such as an external order management system (OMS), sends orders to Northbeam through the [Orders API](/docs/orders-api). You don't use the [Shopify connector](/docs/shopify-order-sync).

Most Shopify stores don't need this page.

Because your checkout runs on Shopify, you still install tracking with the [Shopify guide](/docs/shopify-installation), not the Custom guide. The only difference is one line in the Custom Pixel.

## Why you'd have this setup

A common reason is keeping one customer ID across every system. For example, you might:

1. Import your Shopify orders into your OMS.
2. Replace the Shopify customer ID with your OMS customer ID.
3. Send all orders to Northbeam through the Orders API, including your Shopify orders.

## Why the pixel needs a change

The Northbeam Custom Pixel sends a purchase event to Northbeam when a customer checks out. Northbeam then matches that event to the real order.

* **With the Shopify connector**, Northbeam matches them using Shopify's **checkout token**. That's what the standard pixel sends.
* **With a custom backend**, Northbeam matches them using the **order ID** you send through the Orders API. The checkout token won't match anything, so the pixel needs to send the Shopify order ID instead.

## Update the Custom Pixel

Set up the Custom Pixel as usual by following [step 2 of the Shopify guide](/docs/shopify-installation#2-set-up-the-northbeam-custom-pixel). Before you click **Save**, change one line in the script.

<Steps>
  <Step title="Find the id line">
    In the **firePurchaseEvent** script, find the `// Subscription Hook` section. The first line inside `firePurchaseEvent` sets the `id`:

    ```javascript theme={null}
    id: event.data.checkout.token,
    ```
  </Step>

  <Step title="Change it to the order ID">
    Replace that line with:

    ```javascript theme={null}
    id: event.data.checkout.order.id,
    ```

    Leave the rest of the script as it is. The section should now look like this:

    ```javascript {4} theme={null}
    // Subscription Hook
    analytics.subscribe("checkout_completed", (event) => {
      window.Northbeam.firePurchaseEvent({
        id: event.data.checkout.order.id,
        totalPrice: event.data.checkout.totalPrice.amount,
        shippingPrice: event.data.checkout.shippingLine.price.amount || 0,
        taxPrice: event.data.checkout.totalTax.amount || 0,
        // ...the rest of the script stays the same
      });
    });
    ```
  </Step>

  <Step title="Save and connect">
    Click **Save**, then finish the rest of [the Shopify guide](/docs/shopify-installation#2-set-up-the-northbeam-custom-pixel) as normal.
  </Step>
</Steps>

<Warning>
  **The IDs must match exactly.** The `order_id` your backend sends through the Orders API must be the same Shopify order ID the pixel sends. If your OMS sends a different ID (for example, its own order number), Northbeam can't match the purchase to the order, and those orders won't be attributed.
</Warning>

<Tip>
  **Already have the Custom Pixel installed?** Go to **Settings → Customer events → Custom pixels**, open **Northbeam Event Tracking**, make the change above, and click **Save**.
</Tip>