To fully enable heatmap functionality on your Shopify store, you'll need to install two important snippets: the Heatmap Tracking Code Snippet and the Heatmap Conversion Code Snippet. Installing both snippets will allow Heatmap to properly track all customer interactions and revenue data.
Accessing your Heatmap Tracking Code Snippet & Heatmap Conversion Code Snippets:
In order to access your code snippets, you can follow these steps:
Go to the Settings tab within your portal.
Click "Snippet"
Here you will see two codes available to copy
theme.liquid file is the Heatmap Tracking Code Snippet
Pixel is the revenue Heatmap Conversion Code Snippet
Image showing where to access the Shopify Snippets on your Heatmap account
Important Note for Third-Party Page Builders
If your Shopify store uses third-party page builders such as Replo, Gempages, Zipify, Webflow, Pagedeck or other builders outside of core Shopify pages, you'll need to add the tracking snippet to all pages created with those tools.
Consult your page builder's documentation for instructions on adding tracking code.
If you want to install the Heatmap Tracking Code Snippet via Google Tag Manager, read this article here.
Installing your Heatmap Tracking Code Snippet & Heatmap Conversion Code Snippets:
For a visual guide on installing both code snippets, watch this video below:
Installing the theme.liquid Heatmap Tracking Code Snippet
The Heatmap Tracking Code Snippet is what tracks the user interactions on your website. This goes in the global header of your Shopify theme and enables basic tracking and heatmap generation.
To ensure successful installation of your heatmap tracking code snippet, please follow these steps:
1. Log in to your Shopify admin panel
2. Go to "Online Store" > "Themes"
3. Click "Actions" > "Edit code" for your current theme
4. In the Layout folder, open the `theme.liquid` file
5. Locate the `<head>` tag
6. Copy and paste the theme.liquid file heatmap tracking code snippet just before the closing `</head>` tag within your Shopify theme
⚠️ Important! Please note heatmap's snippet must be the first snippet at the top of your header for maximum data accuracy.
If you have other snippets above, this may reduce accuracy of data collection.
7. Click "Save" on the top right corner of your theme file
Installing the Heatmap Conversion Code Snippet Pixel
The Heatmap Conversion Code Snippet ties user interactions to revenue for every session.
Follow these step-by-step instructions to ensure proper installation:
In your Shopify admin, click "Settings" in the bottom left corner
Select "Customer Events" from the left side menu
Click "Add Custom Pixel"
Name the pixel "heatmap-revenue"
Remove the copy included by default in the text area.
Copy and paste the pixel code provided in Heatmap for the Heatmap Conversion Code Snippet.
Click the "Save" button in the top right corner
Activate the pixel by clicking "Connect"
Snippet Installation Verification
After installation and official verification on the heatmap platform, wait about 12 hours for data to start appearing in your heatmap dashboard. To verify your snippet:
Log in to your Heatmap.com account and go to the Settings tab within your portal.
Click "Snippet"
Click the "Verify My Snippet" button in the bottom right corner.
You'll receive a pop-up validating if the snippet was installed correctly. If you don't see any data after 24 hours or believe there is a data collection issue, double-check that both snippets are correctly installed.
Need Help?
If you have questions or run into any issues while using Heatmap, our support team is here to help. Contact us anytime at Support@heatmap.com.