Beginner
How to set up Hotjar tracking on Shopify
Quick Answer
Setting up Hotjar tracking on Shopify involves copying your Hotjar tracking code from your site settings and installing it via Shopify's theme editor or a tracking app. The process typically takes 10-15 minutes and starts collecting visitor data immediately after implementation.
Prerequisites
- Active Hotjar account
- Shopify store with admin access
- Basic understanding of website analytics
1
Access your Hotjar tracking code
Log into your Hotjar dashboard and navigate to Sites & Organizations. Select your site and click on Tracking Code in the left sidebar. Copy the complete tracking code that starts with
<script> and includes your unique Site ID.Tip
Make sure you're copying the full script including the opening and closing script tags.
2
Open Shopify theme editor
In your Shopify admin panel, go to Online Store > Themes. Find your current theme and click Actions > Edit Code. This will open the theme code editor where you can modify your store's files.
Tip
Always create a theme backup before editing code by duplicating your theme first.
3
Locate the theme.liquid file
In the code editor, look for the Layout folder in the left sidebar. Click on theme.liquid to open your main template file. This file contains the HTML structure that loads on every page of your store.
4
Insert the Hotjar tracking code
Scroll down to find the
</head> tag in the theme.liquid file. Paste your Hotjar tracking code just before this closing head tag. The code should be placed after any existing scripts but before </head>.Tip
Use Ctrl+F (or Cmd+F on Mac) to quickly find the closing head tag in the file.
5
Save and verify installation
Click Save to apply the changes to your theme. Open your Shopify store in a new browser tab and visit a few pages. Return to your Hotjar dashboard and check the Setup section - you should see a green checkmark indicating successful installation within a few minutes.
Tip
Clear your browser cache if the verification doesn't appear immediately.
6
Configure tracking settings
In your Hotjar dashboard, go to Settings > Site Settings. Configure your data collection preferences including Do Not Track compliance, Cookie Settings, and Data Retention periods according to your privacy requirements and local regulations.
Tip
Enable cookie consent integration if you're using a cookie banner on your Shopify store.
7
Test heatmaps and recordings
Navigate to Heatmaps in your Hotjar dashboard and create your first heatmap by clicking + New Heatmap. Set up page targeting for key pages like your homepage, product pages, and checkout. Also enable Recordings to start capturing user sessions automatically.
Tip
Start with your most important pages and expand tracking to other areas once you confirm everything is working properly.
Troubleshooting
Hotjar tracking code not detected after installation
Check that the code is placed correctly before the
</head> tag and that there are no syntax errors. Clear your browser cache and wait up to 10 minutes for detection. Verify your Site ID matches the one in your Hotjar dashboard.Heatmaps showing no data
Ensure your site has sufficient traffic (at least 30 page views) and that the heatmap page targeting rules match your Shopify URLs exactly. Check that JavaScript is enabled and not blocked by ad blockers during testing.
Recordings not capturing visitor sessions
Verify that session recordings are enabled in your Privacy Settings and that visitors aren't opting out via Do Not Track settings. Check if your site has cookie consent requirements that might be blocking tracking.
Tracking code conflicts with other apps
If using other analytics tools, ensure there are no JavaScript conflicts by testing page load speeds. Consider using Shopify's Google & YouTube app or similar tracking apps that handle multiple scripts more efficiently.
Ready to get started with Hotjar?
Put this tutorial into practice. Visit Hotjar and follow the steps above.
Visit Hotjar →