Heat Maps: What they are and how to use them

| By Kelly Vaughn

Heat Maps: What they are and how to use them

Heatmaps are an excellent tool for analyzing the behavior of your site’s visitors. When it comes to conversion rate optimization, heatmapping is a cost-effective way to capture interactive customer data which can be directly used for conversion rate optimization. We use heatmapping for all of our clients who sign up for our advisory consults. We even use it on our own site!

An Introduction to Heatmapping

Wondering what exactly you’re looking at? The screenshot above is an example of a click heatmap. You can see exactly what your customers are interacting with using this map. It's useful for learning if customers are interacting with the site as you would expect. If not, you've found some opportunities for improvement!

This is one of three useful maps. The other two are scroll maps and move maps.

Scroll maps show where most of your customers are scrolling to before leaving the page. If they're not scrolling all the way to the bottom (and oftentimes they don't), they may be missing important information. It's good for knowing what's getting seen and if you should reorder content on your page.

The last map is a move map. You can see exactly where a customer is moving their cursor on a page. It looks like a mess, but it's useful for the same reasons mentioned above.

You can also get maps generated for desktop, tablet, and mobile views. There’s no move map for tablets or mobile devices because unfortunately systems aren't able to detect when customers are hovering over their devices.

Generating your own heat maps

Have we piqued your interest? Then your first step is to sign up for an account at Hotjar. It's free to get started, but if you want to gather more page views on each analysis, you'll need to upgrade to a paid plan. The paid plans are useful for stores with more traffic; the more page views you can gather, the more likely the report will be a closer representation of your actual audience.

You'll then follow the prompts to get Hotjar integrated into your store's theme (you'll add a snippet of code to theme.liquid) and start your first heatmaps. We recommend starting with heatmaps for your homepage and product page.

Analyzing Your Heat Maps

So you’ve generated a bunch of heat maps, now what? Time to analyze! When you're analyzing your heatmaps, you'll want to keep in mind these 5 questions:

  1. Are people seeing important content?
  2. Are people clicking on key page elements (links, buttons, and CTAs)?
  3. Are people confused by non-clickable elements?  
  4. Are people getting distracted?
  5. Are people experiencing issues across devices?

Make sure you pay attention to the traffic split for each device type. If a majority of your website traffic is coming from mobile devices, put less weight on the results for your desktop and tablet views. 

Let’s look at a real life example of a product page heat map analysis.

Traffic is highly weighted towards mobile, so we’ll pay most attention to the mobile view of the heatmaps.

The scroll map shows the product title isn't even visible on the average fold, which is what you can see on your screen when you first load a page without scrolling down. The product title should ideally be showing up without having to scroll.

People are interacting with the thumbnails, but they're tiny and likely difficult to tap on. In this case, we'd suggest removing the thumbnails and turning the primary image into the slider. This will also help with the suggestion above regarding the fold.

Looks like nobody is interacting with the social sharing buttons, so we’d say to remove them. It's minimal, but the placement of these buttons add to the load time and add extra friction in tapping that add to cart button.


The scroll map shows almost 90% of the customers from this heatmap didn't scroll to the reviews section. Reviews are huge for conversions, giving customers the social proof they need to add an item to their cart. Focus on making this reviews section more prominent by either moving it up on the page or tightening up the content above to require less scrolling to get to this point.


Still with us? Great! Heat mapping is a great tool that with a little time and knowledge can prove invaluable in developing your online store. This has been just a small peek into the world of heat mapping analysis, so you can only imagine what sort of great data and insights you’d get from a full analysis of your store.


Want to learn more? Get in touch with us to find out about how we can help!

Want to know when our next article is published? Sign up for our newsletter!


Leave a comment