Skip to content

How do I use heatmaps to improve my shop?

A heatmap shows you every spot where shoppers click on a specific page in your store. Hot spots (red/orange) mean lots of clicks. Cool spots (blue/green) mean fewer clicks. Areas with no color get no clicks at all.

It’s like a “popularity map” of your page. You instantly see what grabs attention and what gets ignored.


  1. Open your app and go to Heatmaps
  2. Click Create Heatmap
  3. Enter the URL of the page you want to track (start with your homepage)
  4. Save it

The app takes a snapshot of your page and starts collecting click data from real shoppers. Give it a day or two to gather enough clicks for useful patterns.


Don’t create heatmaps for every page. Start with the pages that matter most:

  1. Your homepage - This is where most shoppers land first. Are they clicking what you want them to click?
  2. Your best-selling product page - Is the Add to Cart button getting clicks, or are shoppers distracted by something else?
  3. Your collection page - Are shoppers clicking on products, or are they clicking on things that aren’t links?

Three heatmaps is plenty to start. Add more once you’ve acted on what these three tell you.


1. Are Shoppers Clicking Your Most Important Button?

Section titled “1. Are Shoppers Clicking Your Most Important Button?”

Check: Look at your Add to Cart button or your main call-to-action. Is it a hot spot?

If yes: Great. Your button placement and design are working.

If no: Your button might be hard to find, too small, or not standing out from the rest of the page.

Real example: Your heatmap shows heavy clicks on product images and the navigation menu, but the “Add to Cart” button is barely warm. When you look at the page, the button is a light gray color that blends into the background.

The fix: Change the button to a bold, contrasting color. Make it larger. Test again.


2. Are Shoppers Clicking Things That Aren’t Clickable?

Section titled “2. Are Shoppers Clicking Things That Aren’t Clickable?”

Check: Look for hot spots on images, banners, or text blocks that don’t have links.

What it means: Shoppers expect those elements to do something. When nothing happens, they get frustrated.

Real example: Your homepage has a lifestyle banner image showing a model wearing your products. The heatmap shows a bright red hot spot on the banner. But the banner is just a static image with no link.

The fix: Link the banner to the relevant collection or product page. Shoppers are telling you exactly what they want to see. Let them get there.


Check: Look for areas with no color at all, especially if you’ve placed important content there.

What it means: Shoppers aren’t reaching or noticing that content.

Real example: You added a section below your product grid that says “Free Shipping on Orders Over $50.” The heatmap shows zero clicks on that section and very little activity around it.

The fix: Move the free shipping message higher on the page, or add it as a banner at the top. Put important messages where shoppers actually look.


Check: Look at your navigation menu. Which menu items get the most clicks? Which get none?

What it means: Shoppers are telling you which categories they care about and which ones they skip.

Real example: Your nav menu has 8 items. The heatmap shows heavy clicks on “New Arrivals” and “Sale” but zero clicks on “About Us” and “Blog.”

The fix: Move “New Arrivals” and “Sale” to more prominent positions. Consider removing low-click items from the main navigation to reduce clutter.


5. Desktop vs. Mobile: Are They Different?

Section titled “5. Desktop vs. Mobile: Are They Different?”

Check: Switch between the Desktop, Tablet, and Mobile views of your heatmap using the device selector.

What it means: Shoppers on phones behave differently than shoppers on computers. A button that’s easy to find on desktop might be buried on mobile.

Real example: On desktop, your Add to Cart button gets plenty of clicks. But on the mobile heatmap, shoppers are mostly clicking the product image gallery and your hamburger menu. The Add to Cart button barely registers because it’s below the fold on phone screens.

The fix: On mobile, make sure the Add to Cart button is visible without scrolling. Consider a sticky “Add to Cart” bar at the bottom of the screen.


Heatmaps need time to collect data. Check them monthly instead of daily:

  1. Review each active heatmap (10 minutes)

    • Which elements are hot? Are they the ones that matter for sales?
    • Which elements are getting clicks but aren’t linked to anything?
    • Is anything important being ignored?
  2. Compare desktop and mobile (5 minutes)

    • Does your page work differently on each device?
    • Are phone shoppers finding your buttons?
  3. Make one change based on what you found

    • Move a button, add a link, or rearrange a section
    • After making the change, reset the heatmap to start collecting fresh data
  4. Check back next month to see if click patterns improved


After you change your page layout, the old click data won’t match the new design. Reset the heatmap:

  1. Go to Heatmaps
  2. Click on the heatmap you want to reset
  3. Click Reset to clear the old data and take a fresh page snapshot
  4. Wait a few days for new click data to build up

This gives you a clean comparison: clicks before your change vs. clicks after.


Create a heatmap for your homepage and your top product page. After a few days, look for these:

What You SeeWhat to Do
Hot spots on non-clickable images or bannersAdd links to those elements. Shoppers want to click them.
Your main button (Add to Cart, Shop Now) is coldMake it bigger, bolder, or move it higher on the page
Heavy clicks on one navigation item, nothing on othersPromote the popular category and simplify your menu
No activity below a certain point on the pageShoppers aren’t scrolling that far. Move important content up.
Mobile heatmap looks completely different from desktopYour mobile layout needs separate attention. Check button placement and image sizing on phones.

  • Give each heatmap at least 3-5 days of traffic before drawing conclusions. A handful of clicks isn’t a pattern.
  • Focus on pages that drive revenue first. Your homepage, top product pages, and collection pages are where heatmap data has the biggest impact on sales.
  • Check all three device views. Desktop, tablet, and mobile shoppers click differently. A page that works on desktop might be broken on phones.
  • Reset after layout changes. Old click data on a new layout will mislead you. Always reset and collect fresh data after making page changes.
  • Don’t overthink it. If your Add to Cart button is cold and a random banner is hot, the answer is simple: make the button more visible and link the banner. You don’t need a data science degree.