Using Heatmaps to Understand Shopper Behavior and Improve Conversions
Types of Heatmaps and What Each Reveals
Click Maps
Click maps (also called tap maps on mobile) show where visitors click or tap on a page, displayed as colored overlays where red indicates heavy click concentration and blue indicates few or no clicks. Click maps reveal which elements attract visitor attention and which are ignored. They also expose "rage clicks" (rapid repeated clicks on elements that are not interactive, indicating frustration) and "dead clicks" (clicks on non-clickable elements that visitors expected to be links or buttons). If visitors are clicking on an image that does not link anywhere, that image should probably be a link. If visitors are ignoring your add-to-cart button, it may be too small, poorly placed, or lacking visual contrast.
Scroll Maps
Scroll maps show what percentage of visitors scroll to each depth on a page. The top of the page is red (100 percent of visitors see it) and the color cools toward blue as fewer visitors reach lower sections. Scroll maps answer a critical question: do visitors actually see your important content? If only 30 percent of product page visitors scroll far enough to see the customer reviews section, that placement is failing 70 percent of your potential social proof impact. If your add-to-cart button sits below the point where 40 percent of mobile visitors stop scrolling, you are hiding your primary conversion element from nearly half your mobile audience. Scroll data directly informs content placement decisions and reveals whether your pages are too long, too front-loaded, or structured in ways that lose visitors before they reach the information that would convince them to buy.
Move Maps and Attention Maps
Move maps (desktop only) track cursor movement, which research shows correlates strongly with eye tracking. Areas where visitors move their cursor linger represent areas of visual attention and consideration. Attention maps combine click, scroll, and time-on-section data to show which parts of a page receive the most total engagement. These maps are useful for understanding whether visitors are reading your product descriptions, examining your pricing details, or simply scanning the page and clicking the first interesting element they find. On product pages, attention maps often reveal that visitors spend significant time examining images and reviews but only seconds on the written product description, which has implications for how you structure and prioritize content.
Session Recordings
Session recordings capture individual visitor journeys as playable video. You watch exactly what the visitor saw, where they clicked, how they scrolled, where they paused, and where they left. Session recordings provide the qualitative "why" that heatmap aggregates cannot. Watching 20 to 30 recordings of visitors who abandoned during checkout reveals specific, observable friction points: a visitor who enters a discount code and gets an error message, a visitor who cannot figure out how to select their size variant, a visitor who scrolls up and down repeatedly looking for shipping information. These recordings generate better A/B testing hypotheses than any other data source because they show real people struggling with real problems on your actual website.
Step by Step: Implementing Heatmaps for Your Store
Microsoft Clarity is completely free with unlimited data and provides click maps, scroll maps, session recordings, and an AI-powered insights feature. It installs by adding a small JavaScript snippet to your site header. Hotjar offers a free tier (35 daily sessions) and paid plans starting at $32 per month for more data, plus features like surveys and user feedback widgets. Both tools integrate with every major ecommerce platform. On Shopify, paste the snippet into your theme's header (Online Store > Themes > Edit Code > theme.liquid). On WooCommerce, use a header scripts plugin or your theme's built-in custom code section. The tracking code is lightweight (under 15KB) and loads asynchronously so it does not affect your page speed.
Heatmaps need sufficient sample sizes to be meaningful. A click map from 50 visitors shows individual behaviors, not patterns. A click map from 500 or more visitors shows reliable patterns that represent how your audience actually interacts with the page. Let the tool collect data for at least 7 days to capture both weekday and weekend behavior, which often differs significantly in ecommerce. If your traffic is low, allow 2 to 4 weeks before drawing conclusions. Focus data collection on your highest-traffic, highest-impact pages first: your top 5 product pages, your cart page, your checkout page, and your homepage.
Start with your product pages. Look for where the heaviest click concentration falls. Is the add-to-cart button one of the most-clicked elements? If not, it may need to be larger, more prominently colored, or repositioned. Are visitors clicking on product images? If so, make sure those clicks lead to zoom views or gallery navigation. Are visitors clicking on non-interactive text that looks like it could be a link? Consider making those elements interactive. On mobile, check whether tap targets are sized appropriately, because tiny taps on elements near each other cause misclicks and frustration. On the cart page, verify that the "Proceed to Checkout" button receives heavy click activity. On checkout pages, look for rage clicks on form fields (indicating validation errors or input difficulty) and clicks on trust badges (indicating security concern).
For each key page, note the percentage of visitors who scroll past the 25, 50, 75, and 100 percent depth marks. On product pages, determine what percentage of visitors see the review section, the detailed specifications, and the related products. If important conversion-supporting content sits below the point where 50 percent of visitors stop scrolling, that content needs to move higher or you need to add visual cues (like a "Read reviews below" link or a scrolling indicator) to encourage continued scrolling. On long-form landing pages, scroll maps reveal exactly where visitors disengage, which tells you whether your content order is effective or whether you are burying your strongest arguments below the attention threshold.
Filter recordings by visitors who added items to cart but did not purchase, or visitors who reached the checkout page but did not complete the order. Watch at least 20 recordings from each funnel stage where you see high drop-off rates. Take notes on patterns you observe: repeated behaviors, common confusion points, specific elements that cause hesitation or frustration. Common discoveries include visitors searching for information that is not visible (like a size guide or shipping policy), struggling with variant selectors that do not clearly show available options, encountering error messages that do not explain how to fix the problem, or abandoning after discovering unexpected costs. These specific observations become the foundation for targeted A/B tests.
Each pattern you observe in heatmap data should generate a specific, testable hypothesis. "Scroll maps show only 35 percent of mobile visitors see the reviews section. We believe moving the star rating summary and a featured review above the fold will increase mobile add-to-cart rate because visitors will encounter social proof before making the scroll-or-leave decision." This hypothesis is specific (mobile visitors, above fold), measurable (add-to-cart rate), and grounded in data (the 35 percent scroll figure). Prioritize hypotheses using the ICE framework (Impact, Confidence, Ease) described in the CRO basics guide, and test the highest-priority hypotheses through A/B tests rather than implementing changes directly.
Common Heatmap Findings and What They Mean
Visitors clicking on non-clickable images: they expect those images to zoom, link to a product, or provide more information. Make them interactive. Visitors rage-clicking on form fields: the field is not responding, validation is blocking input, or the field is too small to tap accurately on mobile. Fix the input experience. Heavy clicks on navigation during checkout: visitors are trying to leave checkout to check something (shipping policy, product details, sizing), which means that information should be available within the checkout page. Visitors scrolling back to the top of a product page after reaching the bottom: they are looking for the add-to-cart button after being convinced by the content below, which means a sticky add-to-cart button would serve them better.