Heatmap

What is a heatmap?

A heatmap uses colors to show user behavior on a web page. Warm colors (red, orange) indicate areas of high activity, while cold colors (blue, green) show areas of low activity. This gives you an intuitive overview of how visitors actually use your pages.

Heatmaps are a key tool in Conversion Rate Optimization (CRO) because they reveal the difference between how you think users navigate and how they actually do.

Types of heatmaps

There are several types of heatmaps that show different aspects of user behavior:

Click heatmap

Shows where users click on the page. It reveals which buttons, links and elements draw the most attention - and just as importantly, which ones are ignored. You can discover if users are clicking on elements that aren't clickable (frustrating UX) or if important CTA buttons are being overlooked.

Scroll heatmap

Shows how far down the page users scroll. This is important to understand if your content is being viewed at all. If 80% of your visitors never scroll past the first 500 pixels, your most important messages and CTA buttons should be placed at the top.

Movement heatmap

Shows where users move their mouse. There is a correlation (albeit not perfect) between mouse movement and eye movement. It gives an indication of where users' attention is located.

Attention heatmap

Combines time and visibility. It shows which parts of the page users spend the most time on. It's the most accurate indicator of what actually captures users' interest.

What can you learn from heatmaps?

Heatmaps answer specific questions about your online store:

• Is your CTA being seen? If your "Add to cart" button is in a cold spot, it should be moved or highlighted.
• Are users scrolling far enough? If important information is below the fold and the scroll heatmap shows that only 20% are getting there, the content should be restructured.
• Is the navigation intuitive? Click heatmaps reveal whether users are finding the right links or clicking around in confusion.
• Are your product pages working? See if customers are interacting with product images, sizing guides, reviews and other elements.
• Are there distractions? If users click on decorative elements or images that aren't links, there's a UX flaw.

Popular heatmap tools

The most commonly used heatmap tools for webshops are:

• Hotjar: The most popular choice. Combines heatmaps with session recordings, surveys and feedback. Free plan for smaller sites.
• Microsoft Clarity: Free tool from Microsoft with heatmaps and session recordings. No limit on traffic.
• Crazy Egg: Focused heatmap tool with scroll maps, confetti reports and A/B testing.
• Lucky Orange: Combines heatmaps, recordings and live chat in one tool.

Most heatmap tools are installed by adding a JavaScript snippet to your online store. In Shoporama, you can do this via Google Tag Manager or directly in your theme.

Heatmaps and GDPR

Heatmap tools collect user data and therefore require cookie consent under GDPR. Make sure you do:

• Include the heatmap tool in your cookie policy
• Only load the script after the user has given consent to statistics cookies
• Verify that the tool anonymizes personal data (form fields, emails, etc.)

Best practices for heatmap analysis

• Gather enough data: Wait until you have at least 1,000-2,000 page views before drawing conclusions. Few data points give unreliable results.
• Segment: Compare heatmaps from mobile vs. desktop, new vs. returning visitors, and different traffic sources.
• Focus on key pages: Start with your most important pages - homepage, top product pages and checkout - rather than analyzing the entire site.
• Combine with other data: Use heatmaps alongside Google Analytics data and conversion rates to prioritize changes with the biggest impact.