Where to Add HotJar Code in Shopify

alt
Elliot Sheen - Co-founder Written on May 21st, 2019, Last updated on July 18th, 2022

Have you recently signed up for HotJar for your Shopify store but are struggling to implement the code in your theme? Below I’ll guide you through the steps needed to have you heat-mapping and viewing user recordings in no time.

Install HotJar on Shopify

Step 1

Navigate to the edit code section of your theme by going to: Online Store > Themes > Actions (next to your current theme) > Edit Code

Where to Add HotJar Code in Shopify
Navigate to your theme code

Step 2

Under the Layout section of the code editor select theme.liquid

Step 3

Find the closing </head> section of the theme.liquid file. Note that some themes will use a variation of this, such as {/head}, [/header] or [/head].

You can search for </head> within the theme.liquid by clicking into the code and pressing CTRL + F on Windows or command + F on Mac.

How to install HotJar on Shopify
Locate the closing tag within theme.liquid

Step 4

Your install code should be readily available on HotJar if you haven’t verified your installation yet (the whole reason you’re here). Otherwise, you can find it by navigating to your account and clicking the Tracking button in the top right of your account. Copy the code to your clipboard and paste it immediately before the closing </head> tag.

Grab your install code from HotJar
Grab your install code from HotJar

Step 5

Click save to deploy your newly added HotJar code. That’s it for implementing HotJar on the storefront of your Shopify website. Within Shopify you can also add additional code to the Order Confirmation page. Please note, the checkout flow itself will be excluded as Shopify does not support third party scripts here.

Now there isn’t much use in looking at recordings or heat-maps on the order confirmation page, however, deploying HotJar here will allow you to utilise HotJar funnels through to order completion.

In order to install HotJar on the Shopify order confirmation page you will need to navigate to: Settings > Checkout.

Here you will see an Additional Scripts input box. Add your HotJar code here and click save.

Verify Your Install

Once you’ve added your HotJar code within Shopify, return to HotJar and verify the install using their built-in checker.

HotJar verification
HotJar verification

 

Happy Heat-mapping

If you had any trouble with the above steps leave a comment below and I’ll be happy to help out. Otherwise, sit back, relax and let the data roll in.

If you’re interesting in learning more about utilising your newly installed HotJar account, I’ve written an article containing my top tips: Making The Most of Your HotJar Basic Account ?

 

alt
Elliot Sheen - Co-founder 👋 Hey there, I'm Elliot, Co-founder of Bind Media. I've been working in paid media for all of my professional life. I have a particular penchant for making data accessible and actionable through beautiful dashboards. I'm a country-boy at heart, born and raised in the Forest of Dean, Gloucestershire.

Ready to supercharge your paid media?