Heatmap

What is a heat map?

A heatmap uses colors to show user behavior on a webpage. Warm colors (red, orange) indicate areas of high activity, while cool 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 it.

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 attract the most attention—and, just as importantly, which ones are ignored. You can discover whether users are clicking on elements that aren’t clickable (frustrating UX) or whether important CTA buttons are being overlooked.

Scroll heatmap

Shows how far down the page users scroll. This is important for understanding whether your content is even being seen. 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 a perfect one) between mouse movement and eye movement. This provides an indication of where users’ attention is focused.

Attention heatmap

Combines time and visibility. It shows which parts of the page users spend the most time looking at. It is the most accurate indicator of what actually captures users’ interest.

What can you learn from heat maps?

Heatmaps answer specific questions about your online store:

• Is your CTA being seen? If your “Add to Cart” button is in a cold area, it should be moved or highlighted.
• Do users scroll far enough? If important information is below the fold and the scroll heatmap shows that only 20% of users reach that far, the content should be restructured.
• Is the navigation intuitive? Click heatmaps reveal whether users are finding the right links or clicking around aimlessly.
• Are your product pages working? See if customers are interacting with product images, size guides, reviews, and other elements.
• Are there distractions? If users click on decorative elements or images that aren’t links, there’s a UX issue.

Popular heatmap tools

The most commonly used heatmap tools for online stores are:

• Hotjar: The most popular choice. Combines heatmaps with session recordings, surveys, and feedback. Free plan for smaller sites.
• Microsoft Clarity: A free tool from Microsoft that offers heatmaps and session recordings. No traffic limits.
• Crazy Egg: A specialized heatmap tool with scroll maps, confetti reports, and A/B testing.
• Lucky Orange: Combines heatmaps, recordings, and live chat in a single 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. Be sure to:

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

Best Practices for Heatmap Analysis

• Collect enough data: Wait until you have at least 1,000–2,000 page views before drawing conclusions. Too few data points yield 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—the 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 greatest impact.