How to Analyze Heatmaps for Ecommerce (and What to Fix)

Types of heatmaps

A heatmap lays the behavior of many visitors over a screenshot of one page. Colors go from cool (little activity) to hot (a lot). The main types:

Two terms you'll see often:

• The fold: the bottom edge of the first screen, before scrolling. It's different on every device.
• Segment: a group of visitors, such as "mobile", "new visitors" or "visitors who ordered".

How many sessions you need before a heatmap means anything

A heatmap is a sample. With few visits, random noise looks like a pattern.

A quick way to see it: if an element gets 10% of clicks, the real share could be higher or lower by chance. The usual 95% margin of error for a share p measured on n page views is about 1.96 × √(p × (1 − p) / n):

So:

• Under ~200 page views per device: look only for big, obvious things (a button nobody clicks, a broken element with rage clicks).
• Several hundred page views: you can compare elements with each other.
• 1,000+: you can compare segments (new vs returning, buyers vs non-buyers).

Group similar pages. Your product pages share one template. One heatmap for "all product pages" collects far more data than one heatmap per product. Most tools let you group pages by URL pattern.

Use a fixed period and note changes. If the page changed during the period, the heatmap mixes two versions. Pick a period after the last change.

Reading a homepage heatmap

The homepage's job is to send visitors to the right place: a category, a product, a search, a promotion.

Look at:

1. Navigation vs content clicks. If most clicks go to the menu and search, visitors know what they want and the hero banner is decoration. Not bad, but don't spend weeks on the banner.
2. Hero banner clicks. A large banner with few clicks is expensive space. Check whether it's clickable at all (dead clicks on banners are common).
3. Scroll depth on mobile. Where does half of the mobile traffic stop? Content below that point is seen by fewer than half.
4. Search. A heavily used search box on mobile is a hint that navigation is hard. Check what people search for in your analytics.
5. Rage and dead clicks on images, logos and promo tiles.

Typical findings and fixes:

• Dead clicks on a non-clickable promo image → make it clickable.
• Mobile visitors stop scrolling before your category tiles → move the tiles up.
• Lots of clicks on "Sale" in the menu → give sale a more visible spot, and check whether full-price categories are hard to find.

Category pages

Category pages (also called collection or listing pages) help visitors narrow down and pick a product.

Look at:

1. Filter and sort usage. Which filters get clicked? Ignored filters take space; missing filters show up as searches and rage clicks.
2. Clicks per product position. Do people click mostly the first row? Then sorting and the first products matter a lot.
3. Clicks on product images vs titles vs "quick add". Make the most clicked target as large as possible.
4. Dead clicks on color swatches or badges. People expect them to do something.
5. Scroll depth vs "load more" / pagination. If few reach the bottom, product order matters more than pagination design.

Mobile vs desktop: filters on mobile are usually behind a button. If the "Filter" button gets few taps but people scroll endlessly, the button may be hard to find.

Product pages

Product pages are where most shops win or lose. Group all product pages of one template together.

Look at:

1. Add-to-cart button. Is it seen without scrolling on mobile? Does the scroll map show visitors reaching it? How many click it?
2. Variant selectors (size, color). Rage clicks here usually mean a bug or a confusing state (sold-out sizes that look selectable).
3. Image gallery. Many clicks on the main image mean visitors want to see more. Check whether zoom and swipe work.
4. Information tabs. Delivery, returns, size chart, materials. Heavy use = people need that info before buying. Consider showing it without a click.
5. Reviews. Clicks on the star rating at the top (people want to jump to reviews). Does it work?
6. Attention map: which blocks do people read? A long description nobody pauses on can be shortened.

Typical findings and fixes:

• Many clicks on the "Delivery" tab → show the delivery time near the add-to-cart button.
• Rage clicks on a size that's sold out → make sold-out sizes look disabled and offer "notify me".
• On mobile, half of visitors never scroll to the reviews → add a short review summary near the top.

Cart

The cart is where visitors check the total, apply discounts and decide to continue.

Look at:

1. Discount code field. Lots of clicks on an empty coupon field can send people away to search for codes. Some shops make it less prominent; test before you hide it.
2. Shipping cost information. Clicks on "Shipping calculated at checkout" mean people want to know now.
3. Quantity and remove buttons. Rage clicks here usually mean a slow or broken update.
4. "Continue shopping" vs "Checkout". If "Continue shopping" gets as many clicks as checkout, check whether people are looking for something (free-shipping threshold?).

A note on privacy. The cart and especially the checkout contain personal and payment data. Many tools, including Varly, don't track cart and checkout pages by default for that reason (recording privacy). If you want cart heatmaps, decide consciously, mask everything personal, and never record the checkout itself. More in GDPR and CRO: heatmaps, recordings and A/B testing.

Segment or you'll be fooled

The overall heatmap averages very different visitors. The same page can work for one group and fail for another. The segments that matter most in ecommerce:

Compare where the hot spots are, not how dark they are. Most tools color each heatmap relative to its own busiest spot. A "red" area in a small segment can have fewer clicks than an "orange" area in a large one.

Linking clicks to revenue

A heatmap shows what gets clicked. It doesn't show whether those clicks lead to sales. The size chart might get few clicks, but visitors who use it might buy twice as often. A banner might get many clicks and lead people away from buying.

Revenue per click connects the two: for each element, compare visitors who clicked it with visitors who didn't. Ask:

• Do clickers convert better or worse than non-clickers?
• How much revenue do clicking sessions bring per click?
• Is the difference big enough to be more than chance?

In Varly this is the Click to revenue report: for each element it compares the conversion rate of clickers and non-clickers, shows revenue per click and how likely it is that the difference is real (click to revenue). Other tools have similar reports under different names; some need an analytics export.

Correlation, not cause. Visitors who click "Add to wishlist" may buy more because they were already keen, not because of the wishlist. A strong link is a test idea, not proof.

From heatmap to recording to survey

Heatmaps answer where. To act, you usually need how and why.

1. Heatmap: find the spot. "Rage clicks on the size selector on mobile product pages."
2. Recordings: see what happens. Filter recordings to mobile, product page, rage clicks. Watch 5–10. "The selector needs two taps on iOS; the first tap only closes the keyboard." See how to analyze session recordings.
3. Survey: ask why, if behavior doesn't explain it. "Is anything unclear about this product?" on product pages. See 80 on-site survey questions.
4. Decide: fix or test. Bugs and obvious problems: fix. Uncertain improvements: test, if your traffic allows it.

5 common misreadings

1. "Nobody clicks it, so remove it"

Some elements work without clicks: a trust badge, a delivery promise, a price. A low click count isn't the same as low value. Check revenue per click, or test removing it.

2. "Lots of clicks = good"

Many clicks on a non-link (an image, a label) mean people expect something that doesn't happen. Many clicks on "Size chart" can mean the size info on the page isn't enough. Clicks show interest or confusion.

3. "The fold is a line"

Every device has a different fold. A desktop heatmap's fold says nothing about phones. And people do scroll: the question is how many, and how far.

4. Reading a mixed heatmap

Desktop and mobile in one heatmap, or a period that includes a redesign. The result describes a page that never existed. Split by device and pick a clean period.

5. Comparing colors between heatmaps

Colors are relative per heatmap. Compare positions and click shares, not shades of red.

Bonus: dynamic content (sliders, pop-ups, personalized blocks, sticky headers) can make clicks land on the "wrong" spot of the screenshot. If a heatmap looks odd, check whether the screenshot matches what visitors saw.

A worked example: from heatmap to fix

A hypothetical example to show the process. The shop and numbers are made up.

A shop selling running shoes gets about 30,000 product page views a month, 70% on mobile. Its question: why do mobile visitors add to cart less often than desktop visitors?

1. Set up the heatmap. All product pages grouped as one page type, mobile only, last 30 days. That's about 21,000 page views, plenty for element-level comparisons.

2. Read the click map. Three things stand out:

• The size selector gets 31% of all taps, with a rage-click rate far above the rest of the page.
• The "Size guide" link gets 4% of taps.
• The add-to-cart button gets 9% of taps.

3. Read the scroll map. Half of mobile visitors stop scrolling before the reviews. The delivery information sits just below the reviews.

4. Segment. Compare Placed an order with No order. Buyers tap the size guide noticeably more often than non-buyers. In the revenue-per-click view, visitors who open the size guide convert at about twice the rate of those who don't. (That's a correlation: buyers may simply be more careful.)

5. Watch recordings. Filter: mobile, product page, rage clicks on the size selector. Eight recordings show the same thing: on some phones, the first tap on a size closes the keyboard of the search field instead of selecting the size; visitors tap again, sometimes three or four times, and some give up.

6. Decide.

7. Check after the fix. Compare the rage-click rate on the size selector for 30 days before and after (most tools have a "previous period" comparison). If it drops sharply, the fix worked.

Notice what the heatmap did and didn't do: it pointed to the size selector, but only the recordings explained the bug, and only a test can show whether moving the size guide changes sales.

Heatmaps during an A/B test

Heatmaps are also useful inside a test:

• Check that people use the change. If you added a delivery promise and nobody scrolls to it, a "no difference" result says little about delivery promises.
• Explain a result. A variant that wins on add-to-cart but shows more rage clicks elsewhere may have a hidden problem.
• Compare versions side by side. Filter each heatmap to one version of the test. Compare where the hot spots move, not how dark they are.
• Don't stop a test early because a heatmap looks better. The test's own statistics decide; the heatmap explains.

Checklist per page type

Homepage

• Split mobile and desktop
• Share of clicks on navigation and search vs content
• Hero banner: clickable? clicked?
• Mobile scroll depth: where does 50% stop?
• Rage and dead clicks on images and tiles

Category pages

• Grouped as one page type
• Filter and sort usage; ignored filters
• Clicks by product position (first row vs rest)
• Dead clicks on swatches and badges
• Mobile: is the filter button found?

Product pages

• Grouped as one page type
• Add-to-cart visible and reached on mobile
• Rage clicks on variant selectors
• Info tabs: which get opened? (delivery, returns, size)
• Reviews: reached? star rating clickable?
• Revenue per click for key elements

Cart (if you track it)

• Coupon field clicks
• Shipping cost questions
• Rage clicks on quantity/remove
• Continue shopping vs checkout
• Personal data masked; checkout itself not recorded

Tools

Most heatmap tools cover click, scroll and some form of attention map. Differences that matter for shops: segments (especially buyers vs non-buyers), linking clicks to revenue, privacy defaults and price. Microsoft Clarity is free; Contentsquare (which now sells Hotjar) has a free plan with limits. Our comparisons:

• Hotjar alternatives for ecommerce
• Microsoft Clarity vs Hotjar
• Microsoft Clarity alternatives for EU shops

In the EU, heatmaps need consent first; see GDPR and CRO.

FAQ

How long should I collect heatmap data? Until you have several hundred page views per device for the page type, and at least one full week (weekdays and weekends differ). For a busy shop that's days; for a small one, a month.

Are move (hover) maps useful? Less than click and scroll maps. Mouse position is only a rough proxy for where people look, and phones have no mouse.

What's a good scroll depth? There's no universal number. What matters is whether the content that drives sales is seen by most visitors. Compare scroll depth with where your key elements are.

Should I heatmap every page? No. Start with the page types that carry the most traffic and revenue: product pages, category pages, homepage.

Heatmaps or A/B tests? Both, in that order. Heatmaps help you find what to change; A/B tests tell you whether the change worked. With low traffic, heatmaps and recordings often lead straight to fixes without a test. See A/B testing for ecommerce.

---

Varly combines heatmaps, recordings, click to revenue, surveys and A/B tests in one script. It's in private beta: join the waitlist.

Related: Ecommerce conversion rate optimization guide · How to analyze session recordings · 80 on-site survey questions · Hotjar alternatives