Shopify + Custom - 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. You don’t use the Shopify connector.

Most Shopify stores don’t need this page. Because your checkout runs on Shopify, you still install tracking with the Shopify guide, 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:

Import your Shopify orders into your OMS.
Replace the Shopify customer ID with your OMS customer ID.
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. Before you click Save, change one line in the script.

Find the id line

In the firePurchaseEvent script, find the // Subscription Hook section. The first line inside firePurchaseEvent sets the id:

id: event.data.checkout.token,

Change it to the order ID

Replace that line with:

id: event.data.checkout.order.id,

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

// 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
  });
});

Save and connect

Click Save, then finish the rest of the Shopify guide as normal.

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.

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

​Why you’d have this setup

​Why the pixel needs a change

​Update the Custom Pixel

Why you’d have this setup

Why the pixel needs a change

Update the Custom Pixel