Shopify doesn't allow third-party scripts in their built-in Checkout
You can only track your Storefront and your "Order Confirmation" page with Hotjar, because Shopify's default checkout pages blocks Hotjar and other third-party scripts.
Install within Shopify Theme
Within your Shopify dashboard, click on Online Store.
Click on Themes.
Click on the Actions button on the top right and choose Edit Code.
Under layout, select theme.liquid.
Scroll down the page until you find the following tag: </head>.
Head themes will use a variation of tags
Some themes will use the tag, {/head}, [/header], or other variations of [/head]. These will work in the same way.
Paste your Hotjar Tracking Code just before this closing </head> tag.
Each site you add to your Hotjar account will have its own unique Tracking Code to install. You can find your Tracking Code to install by going to Sites & Organizations and clicking on the TRACKING CODE button next to the site URL.
Click Save and Publish your Theme to apply the changes.
The Hotjar Tracking Code should now be installed on your Storefront. To also track order confirmations, you will need to install the Tracking Code in another section. Follow Steps #8-11 in order to do so.
Click on the gear icon at the bottom left to open Settings.
Click on Checkout.
Scroll down until you reach the Additional Scripts box. Paste the Hotjar Tracking Code.
Click Save.
The Hotjar Tracking Code should now be installed on your Order Confirmation page, however, this does not install it to your Checkout page.
Check your Hotjar Site Dashboard to verify the installation.
Once you have added the Hotjar Tracking Code to your site, you will need to wait a few minutes for Hotjar to check if it is installed correctly. This usually happens the moment your site is loaded with the Hotjar code on it, but you can visit the page yourself to speed up the process up. Once Hotjar has detected the Tracking Code on your site, the Site Dashboard will show a notice like the one below:
Double-check your Tracking Code installation after making design changes
If your website undergoes a major design change after you install the Tracking Code, check to ensure your Tracking Code is still installed. Design changes may cause the Tracking Code to be removed, which will prevent Hotjar from collecting data.
Still Having Trouble Installing?
You can verify the installation manually by following these steps or reach out to our support team so we can help you!
Once Your Tracking Code is Installed
You can start using any of Hotjar's features: Heatmaps, Recordings, Surveys, and Incoming Feedback. Have a look at the guides below to get started.
- Creating Your First Heatmap with Snapshots
- How to Start Continuous Heatmaps
- How to Start Recordings on Basic Plans
- How to Start Continuous Recordings
- Creating Your First Survey
- Starting to use Incoming Feedback
Next Steps
- Add team members to your organization.
- Add sites to your organization.
- Understand the difference between Accounts, Organizations, and Sites.
- Use Hotjar for your clients.