Grow your ecommerce results with heatmap analysis and conversion optimisation

Heatmaps in ecommerce: what visitors really do, and what shop owners miss

Google Analytics shows you what happens. Heatmaps show you how it happens. Most shops have heatmaps installed: Hotjar, Microsoft Clarity, Crazy Egg. Few turn them into consistent test hypotheses. Someone looks at the heatmap, has a lightbulb moment, and then nothing happens.

That is like getting an MRI scan and never reading the report.

Heatmaps belong in almost every analysis. Not as proof, but as a starting point. A heatmap shows you where a problem is. An A/B test shows you how to solve it. Together, they are the difference between guessing and knowing. This article shows what heatmaps can do in practice, and which mistakes stop shops from turning their heatmaps into revenue.

The three heatmap types, and when each one really helps

Click maps: where visitors click, even when nothing happens

Click maps show aggregated clicks. Red means many clicks, blue means few. The most important use case: spotting dead clicks, meaning clicks on elements that are not clickable.

An electronics shop found through click maps that 23% of clicks on the product page landed on the main product image, which could not be enlarged. Visitors expected a zoom and got nothing.

After a zoom function was added, time on page rose by 18% and the conversion rate by 7%. No redesign, no expensive development. Just meeting an expectation that already existed.

Another example from our work: a home and living shop had product images on its category page that were not linked. Only the product name was clickable. The click map showed 67% of clicks landing on the images and only 33% on the names.

The owner had left the images unlinked on purpose, “so visitors stay on the page longer”. The logic: more time = more engagement = more sales. The reality: click, nothing happens, frustration, exit. After the images were linked, the category page’s conversion rate rose by 9%.

Scroll maps: where visitors stop scrolling

The scroll map is the most underrated heatmap. It does not show how far visitors scroll. It shows where they stop. And that is usually not at the end of the page.

A fashion shop placed its USPs (“Shipping”, “30-day returns”, “Express delivery”) below the fold. The scroll map showed that only 35% of visitors scrolled that far. 65% never saw the USPs. After they were moved above the fold, the conversion rate rose by 11%. The information was good, but invisible.

An extreme case: a beauty shop showed 12 reviews above the fold on its product page, with the buy button area below the reviews. The scroll map showed that only 18% of visitors scrolled down to the button. 82% saw the reviews but never the buy button.

After the order was reversed (button first, then reviews), the conversion rate rose by 14%. The reviews were valuable, but not more valuable than the buy button.

Move maps: where attention goes

Move maps show mouse movements. The mouse follows the eye: where the cursor lingers, the visitor is looking. The most important use case: spotting distractions.

A cosmetics shop had an animated banner on its homepage that drew 40% of mouse movements. The homepage conversion rate: 0.8%. After the banner was removed, it rose to 1.4%. The banner was attractive, but distracting. It pulled attention away from the main CTA without converting anything itself.

Another example: a furniture shop had a “Bestsellers” block in the sidebar. The move map showed 25% of attention going to the sidebar, but the click rate on the bestsellers was below 1%. The sidebar stole attention from the main content and gave nothing back. After the sidebar was removed, the category page’s conversion rate rose by 6%.

Heatmaps in the checkout: where buyers get stuck

Checkout heatmaps are the most valuable kind, because this is where intent is highest. A customer who reaches the checkout wants to buy. Every bit of friction costs revenue.

A B2B shop found through checkout heatmaps that the “Department” field got 5x more clicks than other fields. The reason: buyers did not know what to enter.

They clicked into the field, thought, clicked out, clicked back in. The heatmap showed a pattern of frustration. After a dropdown was added (“Sales”, “Purchasing”, “Marketing”, “Other”), abandonment at that step fell by 14%.

An electronics shop analysed checkout scroll maps: 45% of buyers scrolled to the bottom of the page and then back up again. The pattern pointed to uncertainty. The cause: payment methods only appeared at the bottom of the page.

Buyers scrolled down to check whether PayPal was available, scrolled back up to correct their address, then scrolled down again. Once payment methods were shown directly below the basket summary, checkout time fell by 22% and the conversion rate rose by 3%, a small but significant gain.

Mobile heatmaps: a completely different story

Mobile heatmaps are not “smaller desktop heatmaps”. They show completely different behaviour. Mobile users scroll more, tap less, and their thumbs cover parts of the screen.

A furniture shop analysed its mobile heatmaps: the main CTA sat in the top third of the screen, outside the thumb zone. 60% of mobile visitors scrolled without seeing the CTA. After it was moved into the lower thumb zone, mobile conversion rose by 12%.

Another difference: mobile users tap rather than click. A tap on a non-interactive element is often an attempt to zoom or scroll, not a mistake. Click maps on mobile have to be read differently from those on desktop.

The heatmap-to-test workflow: from insight to revenue

Heatmaps alone do not make money. They have to be part of a testing workflow:

1. 1
   

   Analytics shows the problem.

   “The product page has a bounce rate of 65%.”

2. 2
   

   Heatmaps show the cause.

   “Visitors click the image, do not scroll down to the description, and leave the page.”

3. 3
   

   Formulate a hypothesis.

   “If we make the image zoomable and move the description above the fold, the bounce rate will fall.”

4. 4
   

   Run an A/B test.

   Do not roll out the change first. The heatmap gives you the hypothesis, not certainty.

5. 5
   

   Act on the result.

   The winner is rolled out. The loser is documented. A failed test is still an insight.

Worked example: +17% conversion from one heatmap finding

A fashion shop with 180,000 visitors a month had a product page bounce rate of 62%. Analytics showed the problem. The heatmaps showed the cause:

Click map: 31% of clicks landed on the main image, which could not be enlarged.

Scroll map: Only 28% of visitors scrolled down to the size chart. 72% missed it.

Move map: Mouse movement was concentrated at the top of the screen. The “Add to basket” button sat too low.

The changes: image made zoomable, size chart moved into a tab above the fold, CTA button placed higher and made bigger.

Result after 4 weeks: the bounce rate fell from 62% to 48%. Conversion rose from 1.8% to 2.1%, an uplift of +17%. At 180,000 visitors a month that is 540 extra orders, and at a €65 basket about €35,100 of additional revenue a month. The investment: one developer, 2 days of work.

Frequently asked questions about heatmaps

How long should I collect heatmap data?

At least 1,000 page views per page for meaningful results. With less traffic, heatmaps are too thin and show individual cases rather than patterns. For a homepage with 50,000 views a month, 2–3 days is enough. For a niche landing page with 500 views a month, you need 2–4 weeks.

Can I use heatmaps on mobile?

Yes, and you should. Mobile heatmaps show touch rather than click interactions and take the thumb zone into account. Mobile users behave fundamentally differently from desktop users. Separate mobile heatmaps are essential.

Are heatmaps GDPR-compliant?

Yes, as long as you do not collect personal data. Most heatmap tools anonymise data automatically. Session recordings must not store form inputs (passwords, card details). Check your tool’s GDPR settings.

How do heatmaps differ from session recordings?

Heatmaps show aggregated data across many visitors. They reveal patterns. Session recordings show individual visits. They show the why behind the patterns. Using both is ideal: heatmaps for patterns, recordings for detail.

How often should I analyse heatmaps?

After every major page change, and at least quarterly for existing pages. User behaviour changes, especially after redesigns, seasonal peaks or marketing campaigns. A heatmap from a year ago is worthless today.

Can heatmaps replace A/B tests?

No. Heatmaps find problems and generate hypotheses. A/B tests validate solutions. Heatmaps tell you: “Something is wrong here.” A/B tests tell you: “This change works better.” You need both, in exactly that order.

You can learn this step by step in the Academy track A/B-Testing Mastery ↗.