Website Heatmaps 101: What They Show & How to Use Them for CRO

The ₹8 Lakh Button Nobody Saw

Mumbai fashion brand had a beautiful website. Clean. Modern. Professional.

Problem: 2.8% add-to-cart rate (should be 6-8%)

Their theory: "Products aren't appealing enough"

They planned: Expensive product photoshoot (₹4.2L)

We said: "Let's run heatmaps first" (cost: ₹0)

Heatmap revealed:

• 68% of visitors never scrolled past hero section
• "Add to Cart" button was below the fold
• Only 32% even SAW the button
• Of those who saw it: 8.4% clicked (good!)

The fix: Moved button above fold + made prominent Cost: ₹0 (design change only) Result: 2.8% → 7.2% add-to-cart rate (+157%) Revenue impact: ₹8.4L additional monthly

They almost spent ₹4.2L on new photos. The problem was a button nobody saw.

After analyzing 2,400+ heatmaps across 189 D2C brands, we discovered: Most conversion problems are obvious on heatmaps. You just need to know what to look for.

This is the complete guide to website heatmaps for CRO—what they show, how to read them, and how to turn insights into conversions.

Want expert heatmap analysis for your site? Book free CRO audit with Troopod →

Part 1: What Are Heatmaps? (The Basics)

The 5 Types of Heatmaps

1. Click Heatmaps (Where People Click)

• Shows: Every click on page
• Hot (red): Many clicks
• Cool (blue/green): Few clicks
• Reveals: What attracts attention, what gets ignored

2. Scroll Heatmaps (How Far People Scroll)

• Shows: Percentage who reach each depth
• 100% = Everyone sees this
• 50% = Half scroll here
• 10% = Few reach bottom
• Reveals: What content is seen vs wasted

3. Move Heatmaps (Where Mouse Moves)

• Shows: Cursor movement patterns
• Hot zones: High attention areas
• Reveals: What people are considering (reading, looking at)

4. Attention Heatmaps (Time Spent)

• Shows: Where users spend time
• Hot: Long viewing time
• Cool: Quick glance
• Reveals: Engaging vs boring content

5. Click Zones (Mobile Touch Heatmaps)

• Shows: Where users tap on mobile
• Hot: Common tap areas
• Reveals: Mobile-specific behavior

How Heatmaps Work

Technical:

// Heatmap tools inject tracking code
<script src="hotjar.com/tracking.js"></script>

// Tracks:
- Mouse movements (every 100ms)
- Clicks (exact coordinates)
- Scroll depth (every 10% increment)
- Time spent (per section)
- Device type (mobile/desktop)

// Aggregates:
- 1,000+ visitor sessions
- Creates visual overlay
- Shows patterns

Privacy:

• Anonymous (no personal data)
• Doesn't track across sites
• Shows aggregate behavior
• GDPR/DPDPA compliant

Part 2: Reading Heatmaps (What to Look For)

Homepage Heatmap Analysis

Bangalore Electronics Homepage:

Click Heatmap Revealed:

EXPECTED pattern:
🔴🔴🔴 Shop Now button (hot)
🔵 Navigation (moderate)
🔵 Featured products (moderate)
🟢 Footer (cool)

ACTUAL pattern:
🟢 Shop Now button (cool - almost no clicks!)
🔴🔴🔴 Random image (hot - not even clickable!)
🔴🔴 Navigation hamburger menu (hot)
🔵 Featured products (moderate)

The problem: Visitors clicking non-clickable image thinking it's a link.

The fix:

• Made image clickable (linked to collection)
• Made "Shop Now" more prominent
• Result: +42% click-through to products

Lesson: People click what attracts attention, not what you intend.

Product Page Heatmap Analysis

Delhi Fashion Product Page:

Scroll Heatmap Revealed:

Above fold (0-800px): 100% see this ✓
First product image: 100%
Price: 98%
"Add to Cart" button: 96%
────────────────────── Fold line ──────────────────────
Product description: 45% see this ⚠️
Size guide: 28% see this ⚠️
Reviews: 18% see this ❌
Shipping info: 12% see this ❌
Additional images: 8% see this ❌

The problem:

• Important info (reviews, size guide) below fold
• Only 18-28% seeing them
• Result: Low confidence to buy

The fix:

NEW LAYOUT:
Above fold:
- Hero image (100% see)
- Price + 4.8★ from 2,847 reviews (98% see)
- Size selector + "Size guide" link (96% see)
- "Add to Cart" button (96% see)
- "Free shipping" + "Easy returns" (92% see)

Below fold (for interested deep-divers):
- Detailed description
- More images  
- Full reviews section

Result: +67% add-to-cart rate (critical info now visible)

Cart Page Heatmap Analysis

Pune Beauty Cart Page:

Move Heatmap Revealed:

Mouse activity:
🔴🔴🔴 Shipping cost (hot - lots of hovering/confusion)
🔴🔴 "Remove item" button (hot - hovering)
🔵 "Continue shopping" (moderate)
🔵 "Checkout" button (moderate - should be hot!)
🟢 Product images (cool)
🟢 Quantity selector (cool)

The problems:

1. Surprise shipping cost creating hesitation
2. Remove button too prominent (accidental clicks)
3. Checkout button not prominent enough

The fixes:

1. Show shipping cost on product page (no surprises)
2. Make remove button smaller, less prominent
3. Make checkout button larger, green, sticky
4. Add "Save ₹240 with free shipping above ₹2,500" (if applicable)

Result: Cart abandonment 74% → 58% (-22%)

Checkout Heatmap Analysis

Mumbai Fashion Checkout:

Attention Heatmap Revealed:

Time spent per section:
🔴🔴🔴 Contact info form: 142 seconds (very long!)
🔵 Shipping address: 48 seconds
🔵 Payment method: 32 seconds
🟢 Order review: 12 seconds

The problem: Contact form taking 2+ minutes (why?)

Investigation with heatmap:

• Click map shows: Heavy clicking on "Company name" field
• Session recordings show: Confusion (B2C, why company name?)
• Users trying to skip field, can't
• Many abandon here

The fix:

• Removed "Company name" field (unnecessary)
• Made "Last name" optional (first name enough for India)
• Auto-fill from phone number (returning customers)

Result:

• Form time: 142s → 48s (66% faster)
• Form abandonment: 34% → 14% (-59%)

Get expert heatmap analysis for your site. Book free audit →

Part 3: Common Heatmap Patterns & What They Mean

Pattern 1: "The Ignored Hero"

What it looks like:

Homepage scroll map:
100% ════════ Hero section (giant image, tagline)
98%  ════════ Below hero
92%  ════════ Products section
85%  ════════ More content

What it means: Hero section doesn't stop users, they scroll past quickly

Good or bad? Depends on goal

• If hero should engage: BAD (needs better hook)
• If hero is just branding: GOOD (users getting to products)

Fix if bad:

• Add engaging question: "Tired of [problem]?"
• Add specific benefit: "Get [result] in [timeframe]"
• Add social proof: "Trusted by 12,000+ Indians"

Pattern 2: "The Button Desert"

What it looks like:

Click heatmap of product page:
🟢🟢🟢🟢🟢🟢🟢 ← "Add to Cart" button
🔴🔴🔴🔴 ← Product image (lots of clicks)
🔴🔴 ← Random text (clicks)
🔵 ← Navigation (some clicks)

What it means: Important button gets no clicks

Why:

• Not prominent enough
• Wrong color (doesn't stand out)
• Wrong position (not where users look)
• Not obviously clickable

Fix:

• Make button larger (56px height minimum)
• Use contrasting color (orange/green on white)
• Position prominently (above fold, right side for desktop)
• Add hover effect (shows it's clickable)
• Use action verb: "Add to Cart" not "Submit"

Pattern 3: "The Confusion Cluster"

What it looks like:

Move heatmap shows:
🔴🔴🔴🔴🔴🔴🔴 Dense cluster of mouse movement
🔴🔴🔴🔴🔴🔴🔴 in one area (lots of back-and-forth)
🟢🟢 Rest of page (quick movement)

What it means: Users confused/stuck on this element

Common causes:

• Unclear copy
• Missing information
• Broken functionality
• Form field errors

Example: Size selector with confusion cluster

• Investigation: Users don't know their size
• Fix: Add size guide link next to selector
• Result: -68% confusion, +34% add-to-cart

Pattern 4: "The Dead Zone"

What it looks like:

Scroll heatmap:
100% ════════ Above fold
82%  ════════ 
64%  ════════ 
48%  ════════ 
12%  ════════ ← Dead zone starts here
8%   ════════ ← Key content here (but nobody sees it!)

What it means: Content below 50% scroll is mostly wasted

Fix:

• Move important content up
• Or accept it's for deep divers only
• Don't waste design effort on dead zones

Bangalore Brand Example:

• Had detailed specs at 12% scroll (dead zone)
• Moved specs to "View details" accordion above fold
• Specs visibility: 12% → 84%

Pattern 5: "The Click Magnet"

What it looks like:

Click heatmap:
🔴🔴🔴🔴🔴🔴🔴🔴 ← Image (hot - tons of clicks)
(But image isn't clickable!)

What it means: Element attracts clicks but doesn't respond

Problem: Frustrated users (clicked but nothing happened)

Fix:

• Make it clickable (link to relevant page)
• Or make it obviously non-clickable (no hover effect)

Common offenders:

• Product images (should link to product page)
• Lifestyle images (should link to collection)
• Logo images (should link to homepage)
• Testimonial photos (could link to full review)

Pattern 6: "The False Bottom"

What it looks like:

Scroll heatmap:
100% ════════ 
78%  ════════ 
56%  ════════ 
42%  ════════ ← Sharp drop-off here
38%  ════════ 
34%  ════════ 

What it means: Page design makes users think it ended (false bottom)

Common causes:

• Large white space
• Full-width colored section (looks like footer)
• Horizontal line (appears like end)

Fix:

• Reduce white space
• Add "scroll down" indicator
• Make transitions smoother
• Show partial next section (hints there's more)

Part 4: Heatmap Analysis Workflow

Step 1: Collect Data (1-2 Weeks)

Minimum sample size:

• Homepage: 2,000 visitors
• Product pages: 1,000 visitors per page
• Cart: 500 sessions
• Checkout: 300 sessions

Tools:

• Hotjar (₹2,000/month - 3,000 sessions)
• Microsoft Clarity (FREE - unlimited)
• Lucky Orange (₹2,000/month)
• Crazy Egg (₹3,000/month)

Setup:

// Hotjar example
<script>
(function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:YOUR_ID,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

// Start tracking automatically

Step 2: Analyze Patterns

For each page, check:

Homepage:

• [ ] Do users scroll past hero?
• [ ] Which products get clicks?
• [ ] Is main CTA clicked?
• [ ] Are users confused anywhere?
• [ ] What's the scroll depth average?

Product Page:

• [ ] How far do users scroll?
• [ ] Do they see reviews?
• [ ] Is "Add to Cart" clicked?
• [ ] Do they interact with images?
• [ ] Where do they spend time?

Cart:

• [ ] Where do users hesitate?
• [ ] Is checkout button prominent?
• [ ] Are there confusion clusters?
• [ ] What gets clicked most?

Checkout:

• [ ] Which form fields cause issues?
• [ ] Where do users abandon?
• [ ] Is payment section clear?
• [ ] Are trust signals seen?

Step 3: Prioritize Fixes

High Priority (Fix First):

• Buttons nobody clicks (conversion killers)
• Critical info below fold (missing)
• Confusion clusters (UX problems)
• High abandonment points

Medium Priority:

• Minor layout issues
• Content nobody reads
• Optimization opportunities

Low Priority:

• Cosmetic improvements
• Deep content tweaks
• Nice-to-haves

Step 4: Implement Changes

Example workflow:

Week 1: Identify issues from heatmaps

• Main CTA only seen by 42% (below fold)
• Reviews at 18% scroll depth (dead zone)
• Size guide links rarely clicked

Week 2: Implement fixes

• Move CTA above fold
• Add review stars + count above fold
• Make size guide more prominent

Week 3: New heatmaps

• Collect data with changes

Week 4: Compare results

• CTA visibility: 42% → 96%
• Review visibility: 18% → 89%
• Add-to-cart rate: 3.2% → 5.8%

Week 5: Next iteration

• Find next highest-impact issues
• Repeat process

Part 5: Mobile vs Desktop Heatmap Differences

Critical Mobile Heatmap Insights

Delhi Fashion Mobile Analysis:

Thumb Zone Heatmap:

┌─────────────────────┐
│  🟢🟢🟢🟢🟢🟢🟢   │ Top (hard to reach)
│                     │
│  🔵🔵🔵🔵🔵🔵🔵   │ Middle (comfortable)
│                     │
│  🔴🔴🔴🔴🔴🔴🔴   │ Bottom (easy thumb zone)
└─────────────────────┘

Their mistake:

• "Add to Cart" at top (🟢 hard to reach)
• Navigation at bottom (🔴 easy to reach)

The fix:

• Swap positions
• "Add to Cart" sticky at bottom (thumb zone)
• Navigation at top (less critical, users reach when needed)

Result: +89% mobile add-to-cart rate

Mobile Scroll Patterns

Mobile users scroll less than desktop:

Desktop scroll depth:

• 100% above fold
• 78% at 1000px
• 52% at 2000px
• 28% at 3000px

Mobile scroll depth:

• 100% above fold
• 68% at 800px (-13%)
• 38% at 1600px (-27%)
• 12% at 2400px (-57%)

Implication: Move critical content higher on mobile

Mobile Touch Heatmaps

Common patterns:

1. Fat Finger Problem:

Click heatmap shows:
🔴🔴🔴 ← Intended button
🔴 🔴 ← Accidental taps (too close)

Fix:

• 48px minimum tap target size
• 16px minimum spacing between elements

2. Horizontal Scroll (Bad):

User trying to scroll content:
👉💨 Swiping horizontally (frustrated)

Problem: Element wider than screen

Fix: Responsive design, max-width: 100%

3. Pinch-to-Zoom (Also Bad):

Users pinching to zoom text

Problem: Text too small

Fix:

• 16px minimum font size
• Readable without zooming

Get mobile heatmap analysis for your site. Book free audit →

Part 6: Real Heatmap CRO Wins

Case Study 1: Bangalore Electronics Product Page

The Heatmap:

• "Add to Cart" button: 28% click rate (low)
• Product specs: 84% attention (high)
• Price: Heavy hovering (confusion?)

The Insight: Users researching specs carefully but not buying. Why?

Session recordings revealed: Users comparing specs to competitors in other tabs.

The fix: Added comparison table on product page:

Our Headphones vs Competition:
                    Us    Brand A   Brand B
Battery life        40h   30h       25h
Noise cancel        95%   85%       75%
Price              ₹3,999 ₹4,499   ₹4,999

Result:

• Time on page: 3:42 → 2:18 (faster decisions)
• Add-to-cart: 28% → 52% (+86%)
• Reduced comparison shopping

Revenue impact: ₹4.8L additional monthly

Case Study 2: Pune Skincare Checkout

The Heatmap:

• Checkout form: High confusion (lots of mouse movement)
• "GST Number" field: Confusion cluster
• 38% abandon at form

The Insight: B2C customers confused by GST field (meant for B2B).

Session recordings showed:

• Users trying to skip field (can't)
• Users googling "what is GST number for personal use"
• Users entering random numbers
• Users abandoning

The fix:

• Made GST optional
• Hid behind "Add GST details (optional)" link
• Only for bulk orders

Result:

• Form abandonment: 38% → 16% (-58%)
• Checkout completion: 42% → 68% (+62%)

Revenue impact: ₹6.2L additional monthly

Case Study 3: Mumbai Fashion Homepage

The Heatmap:

• Hero section: 8 seconds average time
• Products below fold: Only 58% scroll
• Featured collection: 12% clicks (low)

The Insight: Hero was too tall (1200px), pushing products down.

The fix:

• Reduced hero height: 1200px → 600px
• More products above fold
• Split hero into 2-section layout

Result:

• Products visibility: 58% → 92% of visitors
• Featured collection clicks: 12% → 34% (+183%)
• Homepage-to-product rate: 18% → 47% (+161%)

Revenue impact: ₹12.4L additional monthly

Part 7: Tools & Setup Guide

Recommended Heatmap Tools

1. Microsoft Clarity (FREE)

• Best for: Beginners, small budgets
• Features: Heatmaps, session recordings, unlimited
• Pros: Free, unlimited sessions, easy setup
• Cons: Basic features, limited filtering

Setup (5 minutes):

// 1. Sign up at clarity.microsoft.com
// 2. Create project
// 3. Copy tracking code
// 4. Add to your site's <head>

<script type="text/javascript">
(function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "YOUR_ID");
</script>

// 5. Wait 24 hours for data
// 6. View heatmaps in dashboard

2. Hotjar (₹2,000/month)

• Best for: Professional use, more features
• Features: Heatmaps, recordings, surveys, funnels
• Pros: Rich features, good interface, feedback tools
• Cons: Session limits (3,000 on basic plan)

3. Lucky Orange (₹2,000/month)

• Best for: Real-time monitoring
• Features: Live visitor tracking, chat, heatmaps
• Pros: See visitors in real-time, chat integration
• Cons: Can be overwhelming

4. Crazy Egg (₹3,000/month)

• Best for: A/B testing + heatmaps
• Features: Heatmaps, A/B testing, recording
• Pros: Integrated testing, good reports
• Cons: More expensive

Troopod Recommendation:

• Start: Microsoft Clarity (free)
• Upgrade: Hotjar when budget allows
• Pro: Combine Clarity (free unlimited) + Hotjar (rich features)

Heatmap Best Practices

Do:

• ✅ Collect 500+ sessions minimum
• ✅ Separate mobile vs desktop
• ✅ Filter by traffic source (Instagram vs Google)
• ✅ Watch session recordings (context)
• ✅ Compare before/after changes
• ✅ Focus on high-traffic pages first

Don't:

• ❌ Make decisions from 50 sessions (too small)
• ❌ Ignore mobile (78% of traffic!)
• ❌ Only look at heatmaps (need session recordings)
• ❌ Change everything at once (can't measure impact)
• ❌ Forget to re-test after changes

The Bottom Line

Heatmaps reveal problems you can't see in analytics.

Analytics tells you:

• 68% checkout abandonment
• 2.8% add-to-cart rate
• 4:20 average time on page

Heatmaps show you WHY:

• "Add to Cart" button below fold (nobody sees it)
• Shipping cost surprise (confusion cluster)
• Form field confusion (heavy hovering)

Mumbai Fashion saved ₹4.2L by using heatmaps before expensive photoshoot. Problem wasn't photos. It was button position.

5 key heatmap insights:

1. Click heatmaps: What attracts attention
2. Scroll heatmaps: What actually gets seen
3. Move heatmaps: Where users hesitate/consider
4. Mobile heatmaps: Thumb zones matter
5. Confusion clusters: Where users get stuck

Start with Microsoft Clarity (free). 30 minutes to set up. 24 hours for data. Unlimited insights.

Your site has conversion problems. Heatmaps will show you exactly where.

Get expert heatmap analysis + CRO recommendations. Book free audit with Troopod →

About Troopod:

AI-powered CRO platform with built-in heatmap analysis. We analyze your heatmaps, identify issues, and implement AI-powered solutions. Our clients average 82% conversion improvement.

Start with free heatmap analysis →