Skip to main content

Install the Tie Pixel on Shopify

Add the Tie Pixel loader to your theme and the Customer Events pixel to your Shopify settings, including stores whose theme is published from code.

T
Written by Tim Hughes

Your team installs the Tie Pixel on your Shopify store, and this guide covers everything it takes. If you would rather Tie install it for you so you go live faster, see the last section.

There are two pieces, and you need both. Installing only one is the most common reason a store goes live with half its data missing.

Do this once your domain is connected. Tie sends your install files after DNS verification passes, so they cannot be sent earlier.

What you are installing

Piece

What it does

Where it goes

Tie Pixel loader

Loads Tie on every page and identifies your visitors

Your theme, in the page head

Customer Events pixel

Captures product, cart, and checkout activity

Shopify Settings, Customer events

Tie sends you both as files, named for your store. On Shopify you do not write any tracking code yourself.

The two pieces of the Tie Pixel on Shopify: the loader in your theme, and the Customer Events pixel in your Shopify settings

Before you start, check how your theme is published

Some stores publish their theme from code rather than editing it in Shopify, usually because a developer or an agency maintains it. Check this first, because it changes who adds the loader.

In Shopify, go to Online Store, then Themes, and look at your live theme.

  • A GitHub icon with a repository and branch name means your theme is connected to GitHub.

  • A name with a date or a code in it, or a list of draft themes named after pull requests, usually means a deployment pipeline publishes it.

  • If you see neither, your theme is most likely edited in Shopify, and the steps below are all you need.

If you are not sure, ask whoever builds your theme.

If your theme is published from code

The loader belongs in your codebase, added by whoever maintains it. Send them the loader file and Step 1 below. A change made only inside Shopify does not hold up on these themes.

  • If a pipeline publishes your theme, a change made only inside Shopify is replaced the next time it publishes, and tracking stops without an error or a warning. That includes a copy Tie added to get you started, so the one in your codebase is the one that lasts.

  • If your theme is connected to GitHub, a change saved in Shopify is committed to your repository automatically. It lands in your developer's code without going through their review, so let them add the loader the way they make every other change.

Your checkout tracking does not wait on this. The Customer Events pixel lives in your Shopify settings, not your theme, so it keeps capturing checkouts and orders while the loader goes through your developer's process. If Tie already set up the Customer Events pixel for you, skip Step 2. A second copy counts every checkout twice.

For how theme history and GitHub-connected themes work, see Understanding version control before you edit your theme.

Step 1: Add the Tie Pixel loader to your theme

The loader belongs in the head of every page on your store.

  1. In Shopify, go to Online Store, then Themes, then Edit code on your live theme.

  2. Create a new snippet called tie_loader.liquid and paste the loader file into it.

  3. Open layout/theme.liquid and add this line directly after the opening head tag, as high as possible:

{% render 'tie_loader' %}

Do steps 2 and 3 in that order. The snippet has to exist before anything points at it. If you add the render line to theme.liquid first, your live storefront shows "Liquid error (layout/theme line 7): Could not find asset snippets/tie_loader.liquid" as visible text on every page, to every shopper, until you create the snippet. Doing it the other way round is harmless, because a snippet nothing calls yet does nothing.

If your theme uses more than one layout file, add the render line to each layout your storefront pages use.

Paste the loader exactly as we sent it. Its script is one long minified line, and reformatting, re-indenting, or letting an editor wrap it will break it. Copy it from the file or install guide we sent, and check that it lands as a single unbroken line.

Keep the loader in one place only. If you would rather load it through your own tag manager, ask your Tie contact for the tag manager version, and do not also add it to your theme. Two copies send every event twice.

If you use a consent banner, load the snippet 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 Customer Events pixel

This is a separate script from the loader, and it is the piece stores most often miss. If Tie already set it up for you, a pixel named Tie Tracker is already listed, and you can skip this step.

  1. In Shopify, go to Settings, then Customer events.

  2. Click Add custom pixel and name it Tie Tracker.

  3. Set Permission to "Not required".

  4. Set Data sale to "Data collected qualifies as data sale."

  5. Open the pixel script file Tie sent you, copy all of it, and paste it into the code editor.

  6. 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.

Do you need to build a data layer?

On Shopify, no. This is worth stating plainly, because you may have seen Tie's data layer reference and wondered whether your developers need to implement it.

Once the loader and the Customer Events pixel are both in, Tie assembles the full set of ecommerce events on our side. Your product views, add to carts, checkouts, and purchases all come through without anyone writing tracking code on your store.

Implementing the data layer by hand applies to sites that are not on Shopify, where there is no Customer Events pixel to capture that activity.

Step 3: Verify

Two quick checks confirm both pieces are in.

  1. The loader. Open a product page on your live store in Chrome with DevTools open, and in the Network tab filter by your tracking subdomain (for example zone.yourdomain.com). You should see Tie's loader load with a 200 response. Check a second page type too, such as your home page or a collection page.

  2. The Customer Events pixel. In Shopify, go to Settings, then Customer events, and confirm Tie Tracker shows as connected.

The full set of checks is in Verify your Tie installation.

Then tell your Tie contact you are done. We validate the whole funnel end to end with you and confirm the data is landing on our side before you go live.

Connect your store for order history

The Tie Pixel tracks activity on your site. Your order history comes through a separate read-only app on your store, and you need both. If you have not connected it yet, see Connect your Shopify store to Tie.

What does not happen

Adding the loader does not change your theme's design, your product pages, or your checkout, and the previous version of every file stays in your theme's history. If something is not coming through after you install, see Installed but not seeing data yet.

Want Tie to install it instead?

If you would rather not wait on your team, Tie can install both pieces for you on a standard Shopify theme to get you live faster. You share collaborator access, and we install and test it. See Set up Tie as a Shopify collaborator and Where to find your Shopify collaborator request code.

If your theme is published from code, your developer still adds the loader to your codebase, as described above. And if the access Shopify grants us arrives without working theme permissions, your Tie contact will let you know and send you the files, so you can finish with the steps in this guide.

A quick checklist

  • Checked how your theme is published, and looped in your developer if it is published from code

  • Loader snippet created, then the render line added after the opening head tag

  • Customer Events pixel pasted, saved, and connected, or skipped because Tie already set it up

  • Loader confirmed on more than one page type

  • Told your Tie contact you are ready for validation

Did this answer your question?