Heatmap

A heatmap is a visualisation of where users click, tap, scroll, or move their cursor on a webpage — colour-coded so frequent activity shows hot (red/orange) and infrequent activity shows cold (blue). It's a UX diagnostic tool: a way to see what visitors actually do on a page, rather than what the team assumes they do.

The main types of heatmaps

• Click heatmaps: aggregate clicks across visitors. Reveal which CTAs are working, which buttons get ignored, and which non-clickable elements visitors mistakenly try to click.
• Scroll heatmaps: show how far down the page visitors scroll. Surface where the page loses attention — often above the fold has 100% visibility while content below 75% page depth might only get 25% of visitors.
• Movement (cursor) heatmaps: track cursor movement, used as a proxy for visual attention on desktop. Less reliable than eye-tracking but cheap and useful for spotting where attention concentrates.
• Tap heatmaps (mobile): the mobile equivalent of click heatmaps, often revealing UX issues unique to touch interfaces.

Why heatmaps matter

Analytics tells you that conversion rate is 2.1% on a product page. It doesn't tell you why. Heatmaps add the layer of behavioral evidence: customers are skipping past the size guide, missing the trust badges, or clicking on a non-clickable image because it looks like a button. They turn aggregate metrics into specific UX hypotheses worth testing.

Common heatmap tools

• Microsoft Clarity: free, full-featured, and the most common choice for Shopify brands. Includes click heatmaps, scroll heatmaps, and session recordings.
• Hotjar: longer-established alternative; strong session recording and survey integration alongside heatmaps.
• FullStory: enterprise-grade with deeper customer-journey analysis; common at the larger end of the ecommerce market.
• Lucky Orange: Shopify-native option with conversion-focused features.

How to use heatmaps effectively

• Look at high-traffic pages first. Heatmaps need volume to be statistically meaningful. Below 1,000 sessions per page, the patterns are usually noise.
• Segment by device. Mobile and desktop behavior differ substantially. Aggregate heatmaps blur the differences that matter most for fixing things.
• Pair heatmaps with session recordings. Heatmaps show where people clicked; recordings show why. Together they're diagnostic; alone, each is incomplete.
• Use them to generate hypotheses, not conclusions. Heatmaps show what's happening; A/B testing confirms whether fixing it actually lifts conversion.

Common heatmap pitfalls

• Reading patterns into noise: low-traffic pages produce heatmaps that look meaningful but aren't statistically reliable.
• Optimising the wrong page: spending heatmap time on pages that don't materially affect conversion is busywork. Focus on product, cart, and checkout pages.
• Confusing clicks with conversions: the page with the most clicks isn't necessarily the page that converts best. Heatmaps measure attention; conversion measures outcome.
• Privacy and PII: session recordings can capture sensitive information if forms aren't masked. Most tools support automatic masking, but it has to be configured.