How to Read Heatmaps on a Product Page: 7 Patterns
You opened the heatmap, saw a blob of red, and closed the tab. Here are the 7 patterns that keep showing up on product pages, what each one means, and the fix it points to.
Most heatmaps get opened exactly once.
You install the tool, wait a week, open the product page map, and see a red blob on the photo and a lot of blue everywhere else. It looks important. You have no idea what it's telling you. So you close the tab and go back to the ad account.
Here's how to read heatmaps without guessing. A heatmap is a list of questions your buyers asked with their thumbs. Warm color means a lot of people clicked or scrolled there. Cold means they didn't. You're hunting for three things: heat where nothing happens, cold where the money is, and a sudden drop on the scroll map. Each of those maps to a specific fix.
A heatmap doesn't show you what buyers like. It shows you what they were looking for, and where they gave up looking.
Below are the 7 patterns I see on product pages over and over, what each one means, and what to change. Every tool detail comes from Microsoft Clarity's own docs, checked on October 27, 2026.
What are you looking at when you open a product page heatmap?
Three maps, mostly. Each one answers a different question.
- Click map: where people clicked or tapped. Clarity's click map docs split it into all clicks, dead clicks (a click with no effect), rage clicks (rapid clicks in the same small area), error clicks, first clicks and last clicks.
- Scroll map: how far down people got. Clarity's scroll map docs show the share of visitors reaching each 5% of the page, plus an "average fold" line marking what people saw before they scrolled at all.
- Attention map: how long people stayed on each part of the page.
Clarity also has conversion maps, which show the share of sessions that ended in a purchase when someone clicked a given area. That only switches on when Clarity detects purchase events on your store.
Two rules before you read anything. Split mobile from desktop, every time. And remember each map caps at 100,000 page views, per the same docs, so a busy page needs a tight date range.
If Clarity isn't on your store yet, my Microsoft Clarity on Shopify setup guide gets it running in about ten minutes.
Which 7 heatmap patterns show up on product pages?
Here's the whole cheat sheet. Then we'll walk through each one.
| # | Pattern you see | What the buyer was asking | The fix |
|---|---|---|---|
| 1 | Hot clicks on a product photo that doesn't zoom | "Let me see it up close" | Add tap and pinch zoom, say it's there |
| 2 | Rage clicks on the size or variant picker | "Why won't this work?" | Fix the selector, show the selected state |
| 3 | Heavy clicks on star rating, shipping or returns tabs | "Can I trust this? When does it arrive?" | Move the answer up, open by default |
| 4 | Scroll map cliff halfway down | "I've seen enough" (or "I'm bored") | Put the selling argument above the cliff |
| 5 | Cold add to cart button on mobile | "Where do I buy?" | Raise it above the average fold or make it sticky |
| 6 | Long attention on price with few clicks after | "Why does it cost this much?" | Answer the price question next to the price |
| 7 | Last clicks clustered on an exit link | "I'll go check somewhere else" | Bring the answer onto the page |
Now the details. These are the ones that cost money.
Why are people clicking on things that aren't clickable?
Pattern 1: hot dead clicks on the main photo. This is the most common one, and the clearest. Buyers tap the photo because they want to see the stitching, the texture, the label. Nothing happens. Some try again. Some leave.
Baymard's research on mobile image gestures found 40% of 50 top-grossing US mobile sites fail to support gestures like pinch and double-tap on product images. And of the sites that do support zoom, only half tell shoppers it's there.
The fix: turn on tap and pinch zoom, and add a tiny "tap to zoom" hint. Then check the dead clicks map again in two weeks. The red should move.
Pattern 2: rage clicks on the variant picker. Rage clicks mean frustration, not interest. On a product page they almost always sit on a size button, a color swatch or a quantity box. Usually the selector is slow, sold-out sizes look clickable, or the selected state is so faint nobody can tell it changed.
Most founders skip the rage click map. It feels like noise. But picture the classic version: a rage cluster on a color swatch, and when you open the recordings, the price is updating silently at the bottom of the screen where nobody is looking. The buyer thinks nothing is happening. Something is. The page just doesn't say so.
Dead clicks are a missing feature. Rage clicks are a broken promise. Fix the broken promise first.
What does heat on reviews, shipping and returns tell you?
Pattern 3: heavy clicks on the trust tabs. When the star rating, the shipping tab and the returns accordion soak up clicks, buyers are telling you the page made them go hunting. They want to know: is this any good, when does it show up, and what if it doesn't fit.
That's good intent. It's also friction. Every click spent opening a tab is a click not spent on add to cart.
The fix: pull the answer out of the tab. One line under the price, like "Ships in 2 days. Free 30-day returns." Leave the full policy in the accordion for the few who want it. If the stars get clicked a lot, put two short review quotes near the top.
How do you read a scroll heatmap without fooling yourself?
Pattern 4: the cliff. On a healthy scroll heatmap the color fades slowly. A cliff is a sharp drop in a short space, say from 70% of visitors to 35% across one section. That section is where people decided they'd seen enough.
Some of that drop is normal. Nielsen Norman Group's scrolling and attention study found about 57% of page-viewing time happens above the fold, and about 74% within the first two screenfuls. People do scroll. They just spend most of their attention near the top.
So the question is what sits below the cliff. If your best argument (the comparison, the "why this costs more," the guarantee) lives under it, most buyers never meet it. Move it up. If what's below the cliff is a wall of specs, the cliff is fine and the specs can stay there.
Pattern 5: a cold add to cart button on mobile. Check the average fold line on the mobile scroll map. If the button sits below it, a chunk of buyers literally never saw it without scrolling. My take on above the fold on Shopify covers what earns that top screen, and whether a sticky add to cart button helps depends on what the rest of the page says.
What do attention maps and last clicks reveal about price?
Pattern 6: long attention on price, few clicks after. The attention map lights up on the price block. Buyers stop, stare, and then the click map shows almost nothing below it. They're doing math in their head. Why is this $89 when the one on Amazon is $34?
Here's the thing. No button color fixes that. Only an answer does. Put one or two lines right next to the price: what makes it worth it, how long it lasts, what it costs per use.
Pattern 7: last clicks on an exit link. Clarity's last clicks map shows the final click before people left the page. If those cluster on the size chart link that opens a new page, the logo, a "compare" link or a link to a blog post, the page sent them away to find an answer. Many don't come back.
Bring the answer home. Size chart in a pop-over. Comparison as a small table on the page.
Every exit link with a hot last-click spot is a question the page answered somewhere else.
Can AI read the heatmap for you?
Partly. Clarity has a "Summarize heatmaps" button. Per Microsoft's heatmap summary docs, Copilot uses generative AI to analyze across your heatmaps for one page URL, across all three devices, and writes up the patterns in plain language.
Two catches from the same page. It doesn't take in data from the area or conversion heatmaps. And Microsoft warns that generative AI models can sometimes misinterpret or generate incorrect information.
So use the summary as a first pass. It's great at "lots of dead clicks on the hero image." It can't tell you why. For that, click the hot element, hit "View recordings," and watch three. I wrote up that workflow in my guide to AI session recording analysis.
What is a fixed heatmap pattern worth in dollars?
Here's the math, on a hypothetical store. Run it on a home goods brand selling a $82 linen duvet cover set. 20,000 sessions a month on the hero page. Conversion rate 1.4%, average order value $82. That means revenue per visitor is $1.15 (1.4% x $82 = $1.148). On 20,000 sessions, that's $22,960 a month.
The heatmap shows patterns 1 and 5: dead clicks piled on a photo that won't zoom, and the add to cart button below the mobile fold. You fix both. Say conversion moves to 1.8% at the same $82. Revenue per visitor becomes $1.48 (1.8% x $82 = $1.476). On the same 20,000 sessions, that's $29,520. $6,560 more a month.
Conversion rate x average order value x sessions. 1.4% x $82 x 20,000 = $22,960. 1.8% x $82 x 20,000 = $29,520.
That's a fix-the-leaks number. Leaks are the small money. The big money is what the page says.
Real client numbers, not typical results, and not a promise of what your store will do: our Cooling Bamboo Sheets page went from a 1.0% conversion rate at a $125 average order value, which is $1.25 revenue per visitor, to 4.3% at a $254 average order value, or $10.92 per visitor. On 10,000 visitors, that's $12,500 against $109,200. The full before and after numbers are on our results page.
No zoom button did that. A page that answered the buyer's questions in the right order did. That's why I judge every change on revenue per visitor instead of conversion rate. And once you've made a change, prove it with a proper test. My ecommerce A/B testing guide shows how.
What to do next
Open your best-selling product page in Clarity today. Switch to mobile. Open the dead clicks map. Write down the hottest element that does nothing when tapped. That's pattern 1, and it's your first fix this week.
If you're still picking a tool, here's Microsoft Clarity vs Hotjar for Shopify.
Book Your Profit Audit
A heatmap tells you where buyers got stuck. A profit audit tells you what those stuck spots cost in revenue per visitor, and Ishan Soni's team at RevenueFlows AI will show you how to rebuild a high-converting product sales page in less than 15 minutes.
Or go here to check it out → revenueflows.ai
P.S. Red on a heatmap isn't applause. It's a buyer asking a question. Answer it on the page and the red turns into orders.
Frequently asked questions
How do you read a heatmap?
Read it as a list of questions buyers asked, not a picture. Warm colors mean more clicks or more people reached that spot, cold means fewer. Look for heat where nothing happens, cold where the money is, and a sharp color drop on the scroll map, then watch recordings of that spot before you change anything.
What do red and blue mean on a heatmap?
Warmer colors mean more activity. In Microsoft Clarity, colors get warmer as clicks get denser on a click map, and as more visitors reach a section on a scroll map. Blue means few people clicked or scrolled that far.
What is a dead click on a heatmap?
A dead click is a click that did nothing. Clarity defines it as a click on the page with no effect or response. On a product page, dead clicks usually pile up on product photos, star ratings and bold text that buyers expect to open something.
How much traffic do you need for a heatmap?
Clarity says there's no minimum traffic limit to generate a heatmap, but a map built on 40 visits will lie to you. I like at least a few hundred mobile page views on one product page before I trust a pattern, then I confirm it in three recordings.
Should I look at mobile and desktop heatmaps separately?
Always. Mobile buyers see a narrower screen, a different fold and a different button position, so a combined map blends two different pages into one misleading picture. Start with mobile, since that's where most Shopify traffic lands.