If you're using advanced page builders like Replo, Zipify, or GemPages for your Shopify store, you'll need to take extra steps to ensure Heatmap.com tracks all your pages correctly.
This guide will help you integrate Heatmap with these popular Shopify page builders.
Why Additional Setup is Needed
These page builders often create pages outside of Shopify's standard theme structure. As a result, the default Heatmap.com installation might not capture data from these custom-built pages. To ensure Heatmap can track these pages, we recommend installing the Tracking Code Snippet within your page builder directly.
Accessing your Heatmap Tracking Code Snippet:
In order to access your tracking code snippet, you can follow these steps:
Go to the Settings tab within your portal.
Click "Snippet"
Here you will see two codes available to copy. You'll need the theme.liquid file Tracking Code snippet for your 3rd-Party builder.
Note: You will need to install this in addition to your Shopify theme. For instructions on how to install the heatmap snippets on your Shopify store, please reference this article.
Installing the Heatmap Tracking Snippet on Specific Page Builders
Follow the instructions below to properly install the Heatmap Tracking Code Snippet for your specific Page Builder.
Replo
Open Your Replo Dashboard
From the sidebar, go to "All Pages".
Choose the specific page where you want to add the snippet.
⚠️ If you’re on a blog post, product template, or section, the Settings tab will not appear.
With a page selected, click on the Settings > Advanced.
Scroll to the "Custom Page Head" section.
Paste your Heatmap tracking snippet into the field provided.
Click "Publish" to save and apply your changes.
Zipify Pages
1. In your Shopify admin, go to "Apps" > "Zipify Pages".
2. Navigate to "Settings" > "Tracking".
3. Find the "Header Code" section.
4. Add your Heatmap.com tracking code.
5. Click "Save" to apply the changes.
GemPages
1. Open the GemPages editor.
2. Click on "Settings" in the left sidebar.
3. Select the "Custom Code" tab.
4. In the "Header" section, paste your Heatmap.com tracking code.
5. Click "Save" to apply the changes.
PageFly
Log in to your PageFly dashboard.
Click on the Custom Code Editor (8th icon on the left toolbar).
Locate the Custom CSS and Custom JavaScript sections.
Paste your heatmap.com tracking code in the Custom JavaScript section.
The changes will be saved automatically.
Verifying Installation
After adding the code, publish or update a page created with your page builder.
You should be able to see the data start to appear in your heatmap dashboard after ~12 hours. To verify your snippet is working correctly:
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.
Troubleshooting
If you're not seeing data for pages created with your page builder:
Ensure you've added the code to both your Shopify theme and the page builder settings.
Check if your page builder has a caching system and clear it if necessary.
Verify that you're using the correct tracking code for your Heatmap.com account. You should be using the Heatmap Tracking Code snippet (theme.liquid file).
Need Help?
If you're using a different Shopify page builder or encountering issues, please contact our support team at support@heatmap.com. Provide details about your page builder and Shopify setup for faster assistance.