This article steps through how to install your Hotjar Tracking Code on your Shopify site.
The built-in Shopify checkout doesn't allow any third-party scripts like Hotjar to be installed. However, we've provided a workaround for tracking your Shopify checkout flow in a separate section below.
- How to install Hotjar on your Shopify storefront
- How to install Hotjar on your Shopify order status page
- A workaround for tracking the Shopify checkout flow
Hotjar is only able to capture checkout data while the store is still using checkout.liquid.
If you have Shopify Plus, you may be able to add third-party scripts to your checkout page and should talk to your Merchant Success Manager at Shopify to add Hotjar to your checkout.
For non-Shopify Plus customers and customers using the new Checkout extensibility upgrade, you can install Hotjar on your Shopify storefront, however the built-in Shopify checkout will block third-party scripts, including Hotjar. This is a limitation within Shopify, however, we can suggest a workaround for tracking your Shopify checkout flow.
How to install Hotjar on your Shopify site
Hotjar won't work in Shopify sandbox environments
If the Hotjar tracking code is installed in a Shopify sandbox environment, no data will be collected and Ask tools won't display. This is due to Shopify's security measures around what data is made available within the sandbox.
To learn more, vist Shopify's Help Center article: Sandbox Pixel Limitations
Go to your Hotjar Sites page and click on Install tracking code for your site.
Click on Add code manually.
Click on Copy to copy the Tracking Code to your clipboard.
Visit your Shopify Admin dashboard.
Click on Online Store, then click on Themes.
On your current theme, click on Actions and then select Edit code.
Within the Layout folder, click on theme.liquid.
Scroll down the theme.liquid page until you've found the </head> closing tag.
Some themes will use a variation of the <head> </head> tags such as {/head}, [/header], or other variations of [/head]. These all work in the same way.
Paste your Hotjar Tracking Code just before the closing </head> tag.
Click on Save to apply the changes.
How to install Hotjar on your Shopify order status page
Hotjar won't work for the order status page when using the Shopify Checkout Extensibility upgrade
Upgrading to Checkout Extensibility for the order status page means that Hotjar won't be able to work anymore due to Shopify's limitations for Pixels that run inside Checkout Extensibility pages.
To install the Tracking Code on your order status page, inside the Shopify Admin sidebar click on Settings.
Click on Checkout.
Scroll down until you reach the Order status page scripts section. Paste the Hotjar Tracking Code in the text field.
Click Save.
The Hotjar Tracking Code should now be installed on your order status page. This does not install the Tracking Code on your Shopify checkout, as Shopify's built-in checkout doesn't allow third-party scripts, such as Hotjar.
A workaround for tracking the Shopify checkout flow
Unfortunately, the built-in Shopify checkout does not allow third-party scripts, like Hotjar, to work on checkout pages. However, below is a possible workaround for tracking the Shopify checkout flow in Hotjar:
Track the order status page
Shopify allows Hotjar to work on your order status page. This means you can filter those users who made a purchase by using the URL contains filter for Recordings and Heatmaps, based on the order confirmation page URL for your site. For example, after a purchase, users may be shown a page with a URL that contains /thank_you and you can filter Recordings and Heatmaps based on this URL. You'll need to check the specific URL used for your website, which can be different to /thank_you, and use this when filtering.
Add event triggers to compare those who purchased against users who didn't finish the checkout process
If you're interested in comparing users who made a purchase versus those who began the checkout process, but didn't finish it, you can explore adding Event triggers to the buttons on your site that would take users to the checkout page. Recordings can then be filtered based on these events, to compare the following segments of users:
- Users that clicked the buttons and reached the order confirmation page.
- Users that clicked the buttons and did not reach the order confirmation page.
Having trouble installing the Hotjar Tracking Code?
Visit our articles on How to Check That Hotjar Is Working and Troubleshooting FAQS for Tracking Code Installation for troubleshooting guidance.