Northbeam DashboardQuestions? Reach out to our team!
Technical Guides

Shopify Installation

Add the Northbeam pixels and events to your Shopify storefront

Suggest Edits

To start collecting marketing and behavioral data in Northbeam, you’ll need to install a few scripts on your Shopify store.

Here's how each one works and where to install it.

🧠 Core Scripts Overview

Event / PixelDescriptionHow to Install
Northbeam PixelCollects behavioral information about your website visitors – including their marketing touchpoints and pages they’ve visited.

This is a prerequiste for all event tracking in Northbeam. 		Theme.liquid
Metadata ScriptStores the visitor’s region and currency in localStorage.

(Currently only used for "Multi-Region" dashboards, but should be inserted on all Shopify stores to support future global features.)		Theme.liquid
Customer EventTracks completed purchases that occur on Shopify's checkout.

Triggered by Shopify's checkout_completed standard event.		Customer Events
Post Purchase UpsellTracks upsell purchases that happen after Shopify checkout.

(This is optional. This is only required if your store has a Post-Purchase Checkout.)		Checkout Settings

Northbeam Pixel

The Northbeam Pixel collects behavioral data from your website visitors, including their marketing touchpoints and pageviews.

This script is a prerequisite for all event tracking in Northbeam and must fire on every page of your site.

Step 1: Find the Northbeam Pixel script

  1. In the Onboarding Flow:
    1. Navigate to Step 7: Add Pixel
    2. Find the script called Northbeam Pixel
  2. In the Dashboard:
    1. Click on Settings
    2. Click on Northbeam Pixel and Event Tracking
    3. Find the script called Northbeam Pixel
Northbeam Pixel

Northbeam Pixel

Step 2: Insert the script in theme.liquid

  1. Log into Shopify
  2. Navigate to Online Store and click on Themes
  3. Click the three dots (⋮) and click Edit Code
  4. In the left-hand sidebar, open the Layout folder and click on theme.liquid
  5. Paste the entire Northbeam Pixel script within the <head> section of the file.
    1. Ideally, place it near the top, just after <head> opens, to ensure it loads immediately
  6. Click Save
Online Store > Themes > Edit Code > theme.liquid

Online Store > Themes > Edit Code > theme.liquid

Metadata Script

This script stores the visitor’s region and currency in localStorage using Shopify’s localization object.

While it’s currently only used for Multi-Region dashboards, we recommend all Shopify stores add it now to ensure compatibility with future global features and reporting capabilities.

Step 1: Find the Metadata Script

  1. In the Onboarding Flow:
    1. Navigate to Step 7: Add Pixel
    2. Find the script called Shopify: Northbeam Base Pixel Metadata Script
  2. In the Dashboard:
    1. Click on Settings
    2. Click on Northbeam Pixel and Event Tracking
    3. Find the script called Shopify: Northbeam Base Pixel Metadata Script
Metadata Script

Metadata Script

Step 2: Insert the script in theme.liquid

  1. Log into Shopify
  2. Navigate to Online Store and click on Themes
  3. Click the three dots (⋮) and click Edit Code
  4. In the left-hand sidebar, open the Layout folder and click on theme.liquid
  5. Paste the entire Metadata Script in <head> section, above the Northbeam Pixel
  6. Click Save
Online Store > Themes > Edit Code > theme.liquid

Online Store > Themes > Edit Code > theme.liquid

Customer Event

This script tracks completed purchases from your Shopify Checkout. This is required for tracking Purchases in Northbeam.

Step 1: Find the Customer Events script

  1. In the Onboarding Flow:
    1. Navigate to Step 7: Add Pixel
    2. Find the script called Shopify: Customer Events
  2. In the Dashboard:
    1. Click on Settings
    2. Click on Northbeam Pixel and Event Tracking
    3. Find the script called Shopify: Customer Events
The script in your dashboard is pre-populated with your unique Client ID

Shopify: Customer Events

Step 2: Add the script in your Customer Events

  1. Log into your Shopify account, click Settings
  2. In the side navigation, click Customer Events
  3. In the top right, click Add Custom Pixel
  4. Name the pixel anything you'd like (e.g. "Northbeam Event Tracking”), then click Add Pixel
  5. Paste the script into the code editor
  6. In the top right corner, click Save
  7. Below the editor, click Connect
  8. In the modal, click Connect to give the pixel secure access to your online store, checkout, and order confirmation.

Step 3: Notify Northbeam

Once the script is installed, submit a support ticket to let our team know. We'll finalize setup to ensure accurate page view tracking.

🚧

Important:

Failing to notify our team may result in incorrect page view tracking.

Page view tracking is a foundational event in Northbeam's conversion tracking system—without it, purchase attribution may be incomplete or inaccurate.

Settings > Customer Events

Settings > Customer Events

❗️

Can I install these scripts through Google Tag Manager?

Strongly NOT recommended — these need to be added through Shopify’s Customer Events.

Northbeam’s scripts are built specifically for Shopify and depend on Shopify-native variables that tagging tools like GTM or Elevar don’t have access to.

Also, splitting the scripts — for example, placing the Pixel in GTM and the firePurchaseEvent in Customer Events — can lead to failures. We can’t guarantee the Pixel will fire in time before the purchase event, which may cause tracking issues.

Keeping both the Pixel and firePurchaseEvent together in the Customer Events environment ensures everything fires in the right order and preserves data accuracy.

This is a recommendation from Google's Tag Manager Team.

Post Purchase Upsell

If you use Post-Purchase on Shopify, please follow the instructions below to add the post-purchase pixel.

Step 1: Find the Customer Events script

  1. In the Onboarding Flow:
    1. Navigate to Step 7: Add Pixel
    2. Find the script called Shopify: Post-Purchase Upsell Page
  2. In the Dashboard:
    1. Click on Settings
    2. Click on Northbeam Pixel and Event Tracking
    3. Find the script called Shopify: Post-Purchase Upsell Page
Shopify: Post-Purchase Upsell Page

Shopify: Post-Purchase Upsell Page

Step 2: Insert the script in your Post-Purchase Page Additional Scripts

  1. Log into your Shopify account, click Settings
  2. Click Checkout
  3. Scroll down to the Post-Purchase Page section and paste script under Additional Scripts
  4. Click Save
Settings > Checkout

Settings > Checkout

Updated 4 days ago