RF
Conversion & Funnel (CRO)· SOP 1

How to Use Hotjar to Implement & Analyze Heatmaps

Install Hotjar on your store, set up heatmaps, and read the data to find exactly where visitors click, scroll, and drop off.

1 to 2 hours to set up, a few days to gather data13 steps979 words

Prefer a shortcut? 16 free tools do parts of this for you.

Aim: To install Hotjar on your store and use heatmaps to see exactly how visitors interact with your pages — where they click, how far they scroll, and where they lose interest.

Optimal Outcome: A working set of heatmaps for your most important pages, plus the ability to read that data and turn it into concrete conversion-rate improvements.

What do you need to start:

  • A Hotjar account (the free plan is enough to begin)

  • Access to your store's theme code or tag manager so you can install the tracking snippet

  • A clear idea of which pages you want to study first (homepage, collection pages, product pages, cart)

Why is this SOP Important: Analytics tells you what happened — how many people visited and how many converted. Heatmaps tell you why. They show you the elements people actually engage with, the calls to action they ignore, and the point on the page where they stop scrolling. That insight is the raw material for every meaningful CRO test you run.

When and Where to execute: Set Hotjar up early in your optimization work, before you start making design or copy changes, so you have a baseline to compare against. You'll work inside your Hotjar dashboard and your store's admin/theme.

Who Should Be Doing This: The store owner, the CRO specialist, or the person responsible for the website's performance.

What is a Heatmap?

A heatmap is a visual, color-coded representation of how visitors interact with a page. "Hot" areas (usually red or orange) get the most engagement; "cold" areas (blue) get the least. Hotjar produces three main types:

  • Click maps — show where people tap or click. Useful for spotting elements people think are clickable but aren't, and CTAs that get ignored.

  • Scroll maps — show how far down the page people scroll, so you can see whether your key message or "Add to cart" button sits above the fold of attention.

  • Move maps — track desktop mouse movement, a rough proxy for where attention is focused.

Execution

Resources/Tools & Set up

  • A Hotjar account

  • Access to your store's theme or a tag manager (e.g. Google Tag Manager)

Set up your Hotjar account

  1. Go to https://www.hotjar.com and click Sign up (or Get started free).

  2. Create your account using your email or a Google login, then verify your email address.

  3. When prompted, enter the URL of the site you want to track and give your organization a name.

Install the Hotjar tracking code

Once your account is created, Hotjar gives you a tracking snippet. This small piece of JavaScript is what records visitor behavior on your site.

  1. In your Hotjar dashboard, open Settings → Sites & Organizations and locate your tracking code.

  2. Copy the full snippet.

  3. Install it on every page you want to track by placing it in the <head> section of your site. On Shopify, open Online Store → Themes → Edit code, open theme.liquid, and paste the snippet just before the closing </head> tag. Save.

Tip: If you use Google Tag Manager, you can paste the Hotjar snippet into a new Custom HTML tag set to fire on All Pages instead of editing theme code directly.

  1. To confirm it's working, open Hotjar's Verify installation tool, or visit your live site and check that new sessions start appearing in your dashboard within a few minutes.

Create a heatmap

  1. In your Hotjar dashboard, go to Heatmaps and click New heatmap.

  2. Give the heatmap a clear name (e.g. "Homepage – desktop") so you can find it later.

  3. Enter the URL of the page you want to study. Use the matching option that fits your goal — match a single exact URL for one specific page, or use a pattern to group similar pages (such as all product pages).

  4. Choose the device type you want to capture — desktop, tablet, or mobile. Behavior differs a lot between devices, so it's worth creating separate heatmaps for each.

  5. Set the number of pageviews to collect before the heatmap is considered complete. The more traffic the page gets, the more data you should gather for a reliable picture.

  6. Save the heatmap and let it run. It needs time and traffic to collect enough data to be meaningful.

Analyze your results

Once your heatmap has gathered enough data, open it and switch between the Click, Scroll, and Move views. As you read it, ask:

  • Are visitors clicking your main call to action? If your primary CTA is cold, the button copy, color, or placement may need work.

  • Are people clicking things that aren't links? That signals a missed opportunity — make those elements clickable.

  • Where does the scroll map fade out? If most visitors never reach your "Add to cart" button or your key proof points, move that content higher up the page.

  • Is attention going to the wrong areas? Distracting elements that pull focus away from the path to purchase are candidates for removal.

Turn insights into tests

Heatmaps don't fix conversion rates — the changes you make based on them do. For each clear finding, form a simple hypothesis ("Moving the reviews above the fold will increase add-to-cart rate"), make the change, and measure the result. Then create a fresh heatmap and compare it against your baseline to confirm the improvement.

Conclusion

You're done! You now have Hotjar installed, heatmaps running on your key pages, and a framework for reading that data and acting on it.

Execution Checklist:

  • Create a Hotjar account

  • Install the Hotjar tracking code on your site

  • Verify the installation is recording sessions

  • Create heatmaps for your most important pages (per device)

  • Let each heatmap gather enough data

  • Analyze the click, scroll, and move maps

  • Turn each finding into a conversion test and re-measure