How to Install Heatmap Snippets on Your Shopify Store
To fully enable heatmap functionality on your Shopify store, you need to install two important snippets: the Heatmap Tracking Code Snippet and the Heatmap Conversion Code Snippet.
Accessing your Heatmap Tracking Code Snippet & Heatmap Conversion Code Snippets:
In order to access your code snippets, you can follow these steps:
1. Go to the Heatmap membership area
2. Click "All Websites"
3. Find your site in the list and click "View Snippet"
4. A modal will open containing both the Heatmap Tracking Code Snippet and 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 code.
If you want to install the Heatmap Tracking Code Snippet via Google Tag Manager, read this article here.
Installing the 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
Image showing how to access the “Online Store” on Shopify
4. In the Layout folder, open the `theme.liquid` file
5. Locate the `<head>` tag
6. Paste the heatmap tracking code snippet just before the closing `</head>` tag
7. Click "Save"
Image showing the section to paste the Heatmap Tracking Code Snippet
in Shopify’s theme.liquid
Installing the Heatmap Conversion Code Snippet
The Heatmap Conversion Code Snippet ties user interactions to revenue for every session.
For a visual guide on installing the Heatmap Conversion Code Snippet, you can watch this video here.
Follow these step-by-step instructions to ensure proper installation:
1. In your Shopify admin, click "Settings" in the bottom left corner
2. Select "Customer Events" from the left side menu
3. Click "Add Custom Pixel"
4. Name the pixel "heatmap-revenue"
Image showing a Custom Pixel being created in Shopify Customer Events
5. Replace the content in the text area with the provided Heatmap Pixel code
6. Click the "Save" button in the top right corner
7. Activate the pixel by clicking "Connect"
Verification
After installation and official verification on the heatmap platform, wait about 12 hours for data to start appearing in your heatmap dashboard. If you don't see any data after 24 hours, double-check that both snippets are correctly installed or reach out to Support@heatmap.com
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.