Heatmap
A heatmap is a visual overlay on a web page that shows where visitors click, move and scroll, using warm colours for busy areas and cool colours for quiet ones.
What is a heatmap?
A heatmap is a picture of your page with colours laid over it to show how visitors behave. Hot areas, often red or orange, are where many people clicked, hovered or spent time. Cool areas, often blue, got little attention. Scroll heatmaps show how far down the page people read before leaving. For an online store, heatmaps matter because they reveal what shoppers actually notice, ignore or get confused by. That makes it much easier to decide what to change on a product page or home page, instead of guessing.
How heatmaps work
A heatmap tool adds a small script to your site that records clicks, mouse movement and scroll depth for a sample of visitors. It then combines those sessions into one image per page. For example, a click heatmap of a product page might show many people clicking a product photo that does not enlarge, which suggests they want a closer look. A scroll heatmap might show that only a small share of visitors reach the reviews at the bottom. You could then make photos zoomable and move a short review summary higher up, and measure whether conversion improves.
Pros and cons
Heatmaps are quick to understand, even for people who do not work with data, and they often reveal obvious problems like dead clicks, hidden buttons or content nobody reaches. They are a great starting point for improvement ideas. Their limits matter too. Heatmaps show what people did, not why, so you still need judgement or tests to confirm a fix. Pages with little traffic produce noisy maps. Mobile and desktop behave very differently and must be viewed separately. Recording scripts can slow pages slightly, and you must respect privacy laws and consent rules for tracking.
Best practices for heatmaps
Focus on your most visited and most valuable pages, such as top product pages, the home page and the cart. View mobile and desktop separately. Collect enough sessions before drawing conclusions, especially on smaller stores. Look for clicks on things that are not clickable, important buttons that get few clicks and key information below the point where most people stop scrolling. Pair heatmaps with session recordings to see the full context. Turn each finding into a specific change, then test it and measure conversion rather than just watching the map change.
Heatmap vs session recording
A heatmap combines many visits into one image, showing patterns across all visitors on a page. A session recording replays one visitor’s actual visit, showing every scroll, click and pause in order. Heatmaps are better for spotting broad trends quickly, such as which sections get ignored. Recordings are better for understanding why something happens, like watching a shopper struggle with a size selector. Most teams use heatmaps to find where to look and recordings to understand what is going wrong there. Together they turn vague guesses into clear, testable ideas for improving a page.
Questions
- Do heatmaps slow down my store?
- They can add a small amount of load because a tracking script runs on the page. Choose a lightweight tool, record only a sample of visitors and only the pages you are studying, and remove the script when you no longer need it.
- Are heatmaps allowed under privacy laws?
- Usually yes, if you follow the rules where your visitors live. That often means disclosing tracking in your privacy policy, getting consent where required and making sure the tool masks typed personal information like names, emails and payment details.
Related terms
- Conversion rate optimization (CRO)Conversion rate optimization (CRO) is the practice of improving a website so a larger share of visitors buy, sign up or take another goal action.
- Bounce rateBounce rate is the share of visits where someone lands on a page and leaves without interacting further, a quick signal of a page’s first impression.
- Product page (PDP)A product page, or product detail page (PDP), is the page in an online store that shows one product’s photos, price, details and buy button.
- Landing pageA landing page is the web page a visitor arrives on after clicking an ad or link, built to get them to take one action, such as buying or signing up.