How to Install a Heatmap on Your Shopify Store (No App Required, One Line of Code)

Article summary

Adding a heatmap to Shopify only requires pasting a single line of code into theme.liquid — no app install needed

Always duplicate your theme as a backup before editing. Changes take effect as soon as you save — unlike STUDIO, there's no separate re-publish step

Checkout pages don't run theme code, so they aren't tracked. Success means the count actually increasing in the HeatMapX dashboard — not just "no errors"

Wondering if you can add a heatmap to your Shopify store without installing an app? You can. Shopify lets you paste one line of tag code directly into your theme, with no app required. This guide walks through the backup step you should always do first, how to add the tag, how to confirm it's working, and a few things to watch out for.

Step 1: Get Your Site Key

First, sign up at HeatMapX (a free plan is available), register your store, and get your site key. No credit card is required.

Once you have your site key, use the tag below, replacing YOUR_SITE_KEY with the actual key you were given.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Steps: Add the Tag to theme.liquid

1. (Required) Duplicate your theme as a backup

Before editing code directly, always duplicate your current theme first. In your Shopify admin, go to Online Store → Themes, find your published theme, click the "…" (actions) menu, and choose Duplicate. This gives you a safe copy to roll back to if anything goes wrong. Skipping this step means you have no way to undo a mistaken edit.

2. Open the code editor

In your Shopify admin, go to Online Store → Themes
On your published theme, click the "…" (actions) menu and choose Edit code
A file browser for your theme will open on the left

3. Add the tag inside layout/theme.liquid

In the file list, open the "Layout" folder and click theme.liquid
Search the file for </head> and paste the tag above right before it
Save the file

4. Saving is all it takes — no re-publish needed

In Shopify, editing theme code takes effect the moment you save it. Unlike STUDIO, there's no separate "publish" or "re-publish" step. Once you save, your live store already has the tag loaded.

How to Confirm It's Actually Working

Once you've added the tag, browse a few pages on your own store. But here's the important part.

A page loading without errors is not the same thing as tracking actually working. Even if your browser console shows nothing wrong, a mistyped site key or a tag pasted in the wrong place can mean no data is ever reaching HeatMapX.

The only reliable check is to open the HeatMapX dashboard, find your site in the site list, and confirm that its count has actually gone up. After visiting a few pages — product pages, collection pages, and so on — if the count increases, your installation is working.

Things to Watch Out For

Checkout pages are not tracked

The tag you added to theme.liquid runs on your storefront — the homepage, product pages, collection pages, and cart — but it does not run on checkout pages (the payment pages under /checkouts/). Checkout is hosted directly by Shopify, separately from your theme, and theme code from theme.liquid is never loaded there. If you notice no data for checkout pages in your dashboard, that's expected behavior, not a bug.

Switching themes means re-adding the tag

The tag only exists in the theme.liquid file of the theme you edited. If you later switch to a different theme (publish a new theme), its theme.liquid won't carry the tag over automatically. Whenever you switch themes, repeat the same steps to add the tag to the new theme.

FAQ

Q. Will this slow down my store? A. The tag loads asynchronously and is lightweight, so the impact on page load speed is minimal.

Q. I added the tag, but the count in the dashboard isn't increasing A. The most common cause is a mismatched site key — pasting the key from a different site, or a character getting dropped when you copied it. Also check that the pages you're testing are storefront pages (home, product, collection) rather than checkout pages, since checkout is never tracked.

Wrapping Up

Adding a heatmap to Shopify comes down to pasting one line of code into theme.liquid — no app required. HeatMapX is free to get started with, so give it a try and see how shoppers are actually experiencing your store.