Learn / Guides / Ecommerce guide
How to use ecommerce heatmaps to increase conversions and improve UX
You spend time and money bringing visitors to your ecommerce store. But once they’re there, how do you drive conversions and create a shopping experience they will love coming back to? Enter: heatmaps—the quick, visual way to see what attracts attention and what visitors ignore, so you can drive revenue by improving the customer experience.
In this guide, we take you through seven easy ways to use heatmaps to improve the ecommerce metrics that matter to your business, with examples from real websites you can learn from.
We show you how to use ecommerce heatmap tools to:
Set up an ecommerce heatmap today 🔥
Sign up for a free Hotjar trial and see how users move, click, and scroll through your ecommerce store.
What is an ecommerce heatmap?
An ecommerce heatmap is an aggregated graphical representation of how website visitors interact with any page on your online store. You’ll see where users click, scroll, and move their mouse across a page—areas that get the most attention appear as the hottest (or reddest) parts.
Real Hotjar click, scroll, and move maps on ecommerce websites, collected by UX/UI agency Turum-Burum
There are three main types of heatmap you can set up on your ecommerce website:
Click maps, that show where people click (or tap on mobile)
Scroll maps, that show how far visitors scroll down the page
Move maps (desktop only), that show all mouse movement across a page, even when nothing is being clicked
If you’re using Hotjar, all heatmap types are captured automatically across your whole website, so you can toggle between them with a single click:
Why use heatmaps on your ecommerce store?
Ecommerce heatmaps give you a simple, visual overview of where you’re capturing (and losing) customer attention. They complement traditional analytics tools, like Google Analytics (GA), because:
Bonus: you’ll also get fresh ideas for A/B tests and optimizations. See which page elements could be added or removed to improve conversions and customer experience.
7 easy ways to use heatmaps to grow your ecommerce store
Not sure exactly how to use heatmaps to optimize your ecommerce store? Here are seven ideas to get you started, with examples from real stores to show you what we mean.
💡Pro tip: copy the methodology, not the end result—what works for one store may not work for yours.
1. Make sure important CTAs get clicked
Most pages on your ecommerce store have a main call to action (CTA): a button, graphic, or link you want people to click next. Heatmaps show you the number of clicks each element gets, so you can see if your CTAs are getting missed and what may be distracting visitors.
For example, Dutch trampoline store Trampoline Plezier used Hotjar Heatmaps on the company’s blog posts. A scroll map instantly revealed that only 46% of readers got to the bottom of the page and saw the product page CTA.
A click map also showed that above-the-fold clicks were spread across the text (see the ‘before’ image below). To fix the issue, Hans van Leersum, the store’s founder, added a CTA button at the top of each blog post. The new click map showed visitors were now clicking the button (see the ‘after’ image below).
This small change resulted in an increase in clickthrough rate from 22% to over 33%: that's a 50% increase in clicks thanks to heatmap insight.
Clicks recorded using Hotjar Heatmaps before and after the Dutch trampoline store Trampoline Plezier moved a CTA, resulting in a 50% increase in clicks
2. Optimize for mobile conversions
Mobile ecommerce (purchases made by customers on smartphones or tablets) represents over 30% of all ecommerce spending in the US, and over 70% globally. If visitors to your website can’t navigate your store on smaller screens, you’re likely missing a sizable chunk of revenue.
💡Pro tip: check your traffic sources to see the percentage of mobile traffic that reaches your store. If you use GA4, go to User > Tech > Tech details to see a breakdown of traffic by device type.
Once you’ve determined just how important mobile users are to your store, view mobile heatmaps on your most important pages to see how visitors tap and scroll.
If you’re using Hotjar, mobile heatmaps are collected automatically alongside desktop and tablet heatmaps whenever someone visits a web page. Click the mobile icon to view mobile heatmaps, and toggle between tap maps (showing finger taps on any page) and scroll maps as needed.
Analyze a mobile heatmap the same way you would a desktop one: look at what’s getting tapped (and isn’t), and investigate why.
For example, ecommerce conversion rate optimization (CRO) agency The Good used heatmaps on Swiss Gear, a luggage ecommerce store, and saw that mobile users preferred to tap the menu to navigate between pages.
Since the mobile menu was complex, and it was easy for users to select the wrong item by mistake, the team ran split tests to find a better solution. The result was a simpler, menu-driven homepage, which decreased mobile bounce rate by 8% and increased time on site by 84%.
In another example, digital agency Epiphany used heatmaps on bed retailer Time4sleep’s website. Scroll maps showed the team that category pages were, in fact, not helping mobile visitors find what they needed because most kept scrolling all the way down the page (note the gradual change in color in the ‘before’ scroll map below).
The team added a new filtering system at the top of the page so people could quickly find what they needed without having to scroll down—and this relatively small change, coupled with other optimizations, helped the team increase mobile conversion rate by 63%.
3. Spot and fix (annoying) bugs and usability issues
Every time a visitor to your store comes across a bug or issue, like a broken link or a pop-up that won’t close, they’re one step closer to navigating away and giving their business to one of your competitors.
A quick way to find areas of frustration that need fixing is to filter heatmaps by rage clicks, which happen when users click or tap repeatedly on the same spot.
You’ll find exactly which elements people find confusing (like a non-linked asset they expect to take them somewhere), and, if you’re using Hotjar, you can follow up by viewing session recordings to see what individual visitors did before and after rage clicking.
You can also manually spot bugs by looking at heatmaps. For example, UX/UI agency Turum-burum used heatmaps on the website of Ukrainian fashion retailer Intertop. A click map on category pages showed that many customers were clicking ‘show all’, indicating that they couldn’t find what they needed.
That gave the team an idea for an A/B test: adding a filter to help visitors find the right products quicker. Coupled with insights from Hotjar Recordings, this tweak helped the team increase ecommerce conversion rate by over 55%.
💡Pro tip: combine your heatmaps with ecommerce recordings to view individual user browsing sessions across your entire website. You’ll get more context behind why visitors click and scroll on certain elements and what they do next.
4. See where visitors scroll to and what they’re missing
Scroll maps used by Emily Veras on natural vanilla store Lavanila to diagnose and improve scroll depth
Scroll maps show the percentage of visitors that reached each part of your page. If you spot a sharp color change, like in the ‘before’ image above, there might be a page design issue making people exit because they think they’ve reached the end of the page (known as a ‘false bottom’).
However, a short average scroll depth could also mean visitors have successfully found (and clicked!) your main CTA: long scroll depth ≠ good UX, so analyze each web page based on whether it works as intended, not according to any ‘best practices’ you think you need to follow!
5. Design better product pages
Product pages can make or break the success of an ecommerce site: customers need enough information to make an informed purchase, but not too much to become confused, overwhelmed, or distracted.
Use move maps (also known as hover maps) to see how desktop visitors read your product pages: do they hover the cursor over the product description (indicating they read it)? Look at click maps, too, to see if visitors are expanding accordions to read more, or clicking through to view product images.
A product page move map used on a natural vanilla store Lavanila shows that many visitors read the description and ingredients
If you’re using Hotjar Heatmaps, you can add filters to segment data by User Attribute or custom JavaScript Events, including those triggered by GA. For example, try generating a product page click map just for customers who made a purchase, and you’ll see which parts of your product page helped people convert.
If you use the same layout for all your product pages, you can even view a combined heatmap to see overall product page activity—a great way to save time reviewing individual heatmaps, and ideal if you have low traffic to each product page.
6. Reduce cart abandonment
Cart abandonment, which happens when people bounce away from the website after adding items to their shopping cart, is the final hurdle stopping your visitors from converting into customers. Heatmaps help you reduce cart abandonment—and therefore increase sales—by giving you clues about what’s stopping people from continuing.
A Hotjar Heatmap Mel Reyes used on the shopping cart of custom label store Lightning Labels
Look at a click map on your shopping cart and checkout pages to see where people click: are they distracted by menu icons or banners? Are they clicking to add coupon codes?
💡Pro tip: if you’re using Hotjar Heatmaps, filter by Google Analytics Event and look at where visitors who didn’t purchase clicked on your shopping cart or checkout pages. It’ll be easier to spot what’s holding people back if you filter out successful conversions.
7. Learn why winning A/B test variations perform better
Studying heatmaps on your ecommerce store will reveal loads of bugs to fix and spark several conversion optimization ideas, but don’t stop there: heatmaps also help you analyze the results of your A/B tests.
If you’re using Hotjar Heatmaps, integrate them with A/B testing tools like Google Optimize or Optimizely and filter heatmaps by test variation. You’ll see why the winning variation succeeded, helping you showcase results, iterate and make further improvements in your next test.
Hotjar gives us the reasonable, user-backed foundations for our experiment hypotheses, and lets us demonstrate how effective we’ve been through our redesigns at producing KPI improvements.
Get more from heatmaps by combining them with qualitative insights
As you can see from the examples above, ecommerce heatmaps give you a shareable, big-picture overview of what’s happening on your store’s website, helping you spot issues and get ideas for optimizations. But they have limitations, too: quantitative data can hide individual user experiences, and you still have to make inferences about what users might be thinking as they browse.
To get even deeper insights about user behavior, you need to combine heatmaps with other tools like session recordings and ecommerce surveys—which is something all Hotjar customers can do in one place! By bringing together quantitative data from analytics and heatmaps with qualitative user recordings and voice-of-the-customer feedback, you can know exactly what’s happening on your ecommerce website and make data-backed, iterative improvements to sustainably grow conversions and revenue.
Turn up the heat on your ecommerce site 🔥
Start using Hotjar Heatmaps today to see what visitors are really doing on your site. Then, prioritize improvements that help you sell more.
