On a headless store your storefront is your own app, but checkout still runs on Shopify. So the Tie Pixel install splits in two. Your developers add the loader and two browsing events to your app, and a Customer Events pixel in your Shopify settings captures checkout and purchase. Your team does all of it. There is no theme for Tie to edit, so nothing here needs Tie to have access to your storefront.
Do this once your domain is connected. Tie sends your install files after DNS verification passes, so they cannot be sent earlier.
If your storefront is a standard Shopify theme, this is not your guide. See Install the Tie Pixel on Shopify instead.
Who produces which event
Event | Where it comes from |
| Your app. Your developers write this. |
| Your app. Your developers write this. |
| The Customer Events pixel in Shopify. No code. |
| The Customer Events pixel in Shopify. No code. |
Your app cannot see Shopify's hosted checkout, so it cannot produce the last two. That is what the Customer Events pixel is for, and it is not optional. Without it you get browsing data only, with no checkouts and no orders.
Step 1: Add the Tie Pixel loader to your app
The loader belongs in the head of every page your app renders.
Add it to the root document your framework renders on every page. On Hydrogen that is
app/root.tsx. On other frameworks it is the root layout or document component.Render it on the server so it is in the initial HTML. A loader added after hydration misses the first page view.
Commit it to your repository. The loader must ship through your normal deploy. If it lives anywhere else, your next deploy removes it and tracking stops without an error or a warning.
Paste the loader exactly as we sent it. Its script is one long minified line, and reformatting or letting an editor wrap it will break it. Take it from the file we sent, not from an email body.
If you use a consent banner, load it under your marketing or analytics consent category so Tie fires only after the visitor consents. See Install the Tie Pixel with your consent banner (CMP).
Step 2: Add the two browsing events to your app
Your app pushes two events to window.dataLayer:
rr_view_itemwhen a product detail page rendersrr_add_to_cartwhen a product is added to the cart
Each uses a two-push pattern. First push ecommerce: null to reset, then push the event with its ecommerce object. Every product object carries the full field set, including image, and numbers stay numbers. The exact fields and a sample push for each event are in The Tie data layer: rr_* event reference.
Do not implement rr_begin_checkout or rr_purchase in your app. The Customer Events pixel produces them, and a second copy would count every checkout twice.
Step 3: Add the Customer Events pixel in Shopify
In Shopify, go to Settings, then Customer events.
Click Add custom pixel and name it Tie Tracker.
Set Permission to "Not required".
Set Data sale to "Data collected qualifies as data sale."
Open the pixel script file Tie sent you, copy all of it, and paste it into the code editor.
Click Save, then click Connect.
The pixel is not live until you click Connect, so do not stop at Save.
With these two settings the Tie Pixel runs for shoppers who have not opted out, and Shopify stops it for any shopper who opts out of the sale or sharing of their data, including through a Global Privacy Control signal from their browser.
The Data sale setting only takes effect where your store offers Shopify's data sharing opt-out page, so turn that on too. In Shopify, go to Settings, then Customer privacy, turn on the data sharing opt-out page, and select the US regions where you sell. Without it, Shopify has no opt-out to act on.
If you use a consent banner, make sure it is connected to Shopify's Customer Privacy API so each shopper's choices reach checkout. Shopify's own banner does this, and most third-party banners do it through their Shopify app. You will see slightly fewer Tie events from shoppers who opt out, and that is expected.
Step 4: Connect your store for order history
The Tie Pixel tracks activity on your site. Your order history comes through a small read-only app that Tie builds for your store, and you install it with one click. See Connect your Shopify store to Tie.
Step 5: Verify
Run the checks in Verify your Tie installation. On a headless store you are looking for the loader loading with a 200 on more than one page type, rr_view_item and rr_add_to_cart in your console as you browse, Tie Tracker showing as connected in Shopify, and a tie_user_attributes event in the same list.
Two things are normal on a headless store. The checkout and purchase events never appear in your storefront console, because they fire inside Shopify's checkout, and we confirm them on our side. And on a preview or staging address the enrich request shows a CORS error, because it only answers on your live domain.
Then tell your Tie contact you are done. We validate the whole funnel end to end with you before you go live.
A quick checklist
Loader in your root document, rendered on the server, committed to your repository
The two browsing events pushed from your app, with every field populated
Customer Events pixel pasted, saved, and connected
Store connected for order history
Told your Tie contact you are ready for validation