Install analytics on Shopify

It takes about 5 minutes: you paste one piece of code into your theme and check that events are coming in.

Before you start

1. You need permission to edit your store's theme code.
2. You need your HeyCatch project key. It starts with hck_pk_.

1. Find your project key

Your project key starts with hck_pk_. Before your first install is confirmed it sits on the Analytics, Install screen in the sidebar; once an install is confirmed it sits behind the gear icon in the top right of the Product page. Press Copy prompt, paste the text into a note and copy just the key, from hck_pk_ to its last character. If a full stop follows the key, leave it out.

2. Copy this code

Replace YOUR_PROJECT_KEY with your key and keep the quotes:

<script type="module">
  import { analytics } from 'https://esm.sh/@heycatch/sdk@0.8.0';
  analytics.init({
    projectKey: 'YOUR_PROJECT_KEY',
    requestBatching: false,
    install: { framework: 'shopify', agent: 'other' },
  });
</script>

Keep requestBatching: false. Shopify stores load a new page on every click, and without that line visits from iPhones get lost.

3. Make a backup of your theme

In your Shopify admin, go to Online Store, then Themes. Press the three dots next to your current theme and choose Duplicate. If anything goes wrong, you can switch back to the copy.

4. Paste the code into your theme

1. Press the three dots next to your current theme again and choose Edit code.
2. In the left sidebar, under Layout, open theme.liquid.
3. Find the closing head tag, </head>. Press Ctrl+F, or Cmd+F on a Mac, to search for it.
4. Paste the code on a new line just above it.
5. Press Save.

The change is live as soon as you save.

5. Visit your live store

Open your live store in a normal browser and click through a few pages. Visits from bots, scripts and automated browsers are filtered out, so it has to be you, clicking.

6. Check in HeyCatch

Back in HeyCatch, on the screen where you copied the prompt, press "I've installed" within the next half hour. The check only counts events from the last 30 minutes, so do it straight after your visit.

Not seeing events?

1. Did you edit the live theme? If you pasted into a copy, the live store does not have the code.
2. Is the key right? It starts with hck_pk_ and sits inside the quotes, with no extra spaces.
3. Is the code above the closing head tag? Not inside another block of code, and not at the bottom of the file.
4. Is your store password-protected? Open it in a browser where you have entered the password, then click around.
5. Did you change your theme since? A new theme does not carry the code, so paste it into the new one too.

Still stuck? Write to us in the chat and we will look at your store.

Good to know

This tracks your storefront pages. Shopify's checkout pages do not run theme code, so visits there do not show up.

Short links

Short links are a separate step. Each link needs one redirect rule on your site, from /i to /?utm_campaign=i for each letter you use. Shopify has a redirect screen for this. The Short links article explains the rule.