If you’re an advanced eCommerce store owner, you’ve probably already taken advantage of all the low-hanging fruit when it comes to boosting conversions and sales. But if you’re still not hitting the goals you’d like, there’s another level of store improvements that you might be missing out on: eCommerce heatmaps.

These visual representations of user behavior can provide the missing key to see inside the minds of your visitors.

Using a few tried and true strategies, you can learn what your customers are thinking, how they’re responding to your current site, and what their needs and desires are for your store.

Today, you’ll learn how to use eCommerce heatmaps to boost revenue, increase conversions, and improve your entire online shopping experience.

Let’s get started!

An introduction to heatmaps

Let’s start with some definitions.

There are a lot of different types of heatmaps, but the concept is simple. A heatmap shows interaction with varying degrees of intensity. Like a weather map, more frequent interaction is a lighter color (usually red, yellow, or white).

When used for websites, results allow website owners and developers to better understand how the customer is thinking while using the site.

Types of heatmaps

The holy grail of heatmaps is eye tracking software. This is what’s used in academic studies and helps us to understand what people are interested in, where they look, and what holds their attention.

Of course, to track actual eye movement requires specialized equipment.

For example, this awkward set of glasses is the hardware developed by Tobii, one of the industry leaders in eye tracking equipment.

Tobii Pro Glasses 2 Ticket machine

It goes without saying that we can’t apply that level of sophistication to our websites (not yet, anyways). As a result, heapmaps for eCommerce stores use the next best set of data available: customer interaction.

Instead of tracking actual eye movement, these heapmaps track areas the users see, hover, and click.

One of the simplest types of heatmaps is the scroll map. As the name suggests, scroll maps show where the reader has scrolled, with lighter colors indicating more commonly shown areas.

How a scroll map looks - eCommerce heatmaps

While they don’t provide detailed information on which areas users are likely to find interesting, scroll maps are particularly helpful to see which content blocks cause users to scroll more or less.

It’s also helpful if you tend to use one screen resolution and want to see how much of your content is visible for the average user.

Another type of heatmap is the click map. This shows where users click, with lighter colors indicating the most common links.

Click maps

This will tell you which links are most popular. It can also tell you how to find areas that are inducing rage clicks, or clicks based on frustration. We’ll discuss this in more detail in a minute.

Another type of heatmaps is known as a hover map. Hover maps show where users have moved their mouse across the screen.

hover map

The thinking behind this is that eye movement often follows cursor movement.

We should mention that this isn’t available on mobile devices since users don’t use a mouse. However, you can still make improvements in your mobile marketing strategy with the other types of heatmaps listed.

While the data for clicks is limited, you’ll be able to see more information with hovering capabilities.

Where to find heatmap software

A huge variety of eCommerce tools include a heatmap feature. Here are the most common brands and their general functions. And in case you’re wondering, all of these tools can be integrated to eCommerce platforms like LemonStand.

CrazyEgg includes different types of heatmaps and other conversion tools, such as A/B testing and a built-in editor.

HotJar includes lots of great tools for understanding your users, including heatmaps, visitor recordings, conversion funnel analysis, polls and surveys, and much more.

Sumo includes heatmaps with its other tools. Sumo is mostly known for its list-building tools, like popups and email signup boxes, but it has a basic heatmap tool as well.

Clicktale has a very robust heat map tool designed for enterprise applications. Clicktale is probably best if you’re an established company willing to invest in a program built for a platform of your size.

Mouseflow offers a heatmap tool that’s integrated into a funnel analysis program and life replay feature.

Freshmarketer is part of the Freshworks suite, which means you can get access to dozens of different tools if you choose. If you’re already using part of Freshworks, this will be the simplest integration.

VWO is a complete conversion platform with heatmap capabilities. It’s another enterprise tool used by major corporations like Target, Virgin, and eBay.

Once you’ve decided the type of software to use, integrate it with your store and start examining the data. (You’ll probably want to wait a few days to ensure you have enough data to use.)

There are two things we can do with eCommerce heatmaps—solve existing problems, and make improvements over current site performance.

How to troubleshoot with eCommerce heatmaps

To start off with, we can plug in eCommerce heatmaps to look at the current user flow.

This is where you’ll start to notice a lot of key features and really see where your users are getting lost, where you’re losing out on sales, and errors in site design that might have slipped past your attention.

That’s the beauty of eCommerce heatmaps – they show real user interaction, not what you think users will do when they get to your site.

Fix confusing user flow problems

One of the best ways to use eCommerce heatmaps is to find mistakes or confusing things in your design. These errors in in user interface (UI) or user experience (UX) provide huge insight into lower conversions on your site.

If you’re using a click map, you can find clicks on areas that aren’t links. For example, people were clicking on text that wasn’t clickable on this popup—a large “DOWNLOAD” piece of text that actually wasn’t a link.


To solve this problem, the solution is just to rework or revise this button into something more intuitive. Here was the revised version, which had a better conversion rate:

Notice that [Download] text got the ax!

You can find these areas across your site, where users click on something but aren’t getting the results they expected.

Another issue to look for are what are known as “rage clicks.” These are clicks on something when the results aren’t happening (or aren’t happening fast enough).

You can find these on “loading” buttons or other confusing UI elements. Simple wording tweaks can quickly solve these issues.

For example, this loading message “warming up our engines…” got multiple rage clicks, with users clicking again and again, thinking it wasn’t loading.

Warming up our engines

A simple wording change fixed the problem. Instead of the creative but ambiguous “warming up our engines,” the new text read “Thanks! You’ll be redirected in a sec.”

Related posts:  11 Crazy Ways to Design Your eCommerce Page on Instagram

By explaining that the page would take a while to load, they reduced rage clicks and made for a better user experience.

Take your audience into consideration

A confusing UX can be a significant problem, especially if you’re attracting an older demographic of customers.

Choose clarity over creativity if your target market is over the age of 55, as is the case with many eCommerce stores. Research has shown that twice as many older visitors failed with basic tasks on a website compared to their younger peers.

Percentage of participants that failed or abandoned

If you have a website catering to older visitors, you can also use the principles of familiarity to increase conversions.

Compare your site to similar sites and understand what could make your site more similar. A heat map can help you analyze where visitors think they’re clicking versus what you need to actually click.

Creative design has its place, but if you’re looking for increased conversions, creativity might not be a great strategy. Even amongst younger users, unfamiliar sites take 17% longer to use. Keep things simple and streamlined, and don’t create an entirely unique design.

Impact of familiarity on the time taken to accomplish the task

If you want to improve conversions, sometimes less creativity and a more generic look can actually improve the user flow and allow you to sell more.

Banner blindness

One of the more surprising effects of marketing over the long term is that people grow more and more desensitized to ads.

In fact, today, most people are more likely to ignore ads. This is obvious once you start using eCommerce heatmaps to examine your online. You’ll find that your users tend to ignore things that look like banners and ads.

If you an an ecommerce store, what does this mean?

It means that you need to avoid using anything that resembles an ad in your layout design or page. If you’re accustomed to putting “related products” in sidebars that resembles standard banner ads, you might want to experiment with a different strategy.

When users see an ad or something that looks like an ad, they often revert to what’s known as “hot potato” scanning. This is what it’s called when a user looks at something and moves away without returning to the same area again.

But maybe you’ve already fixed these problems. What can you do to improve the current conversions you’re seeing on your site?

Improvements to test with heapmaps

There is no magic secret to successful eCommerce businesses. The strategy that works is continual improvement, testing, and gradual changes that lead to better results in your store.

Novices fix problems, but advanced owners know that constant improvement is key to growing your eCommerce business.

Here are some of the key areas where you can start to test to stand out with your online store using eCommerce heatmaps.

Improve sales by making things stand out with contrast

Research from Caltech has shown that you can encourage customers to focus on what you’re doing better by using contrasting color.

This is particularly true when customers are in a rush. In other words, you can look at your eCommerce heatmaps for areas where customers seem to be dropping off and experiment by using different colors to emphasize a popular product or the next call to action.

Improve user flow

If you’re not maximizing your above-the-fold content—that is, content that a user can see on your site without scrolling—you’re missing out big time.

Fully 80% of attention goes here, so it’s the best area for you to focus on when improving user interaction.

Graph showing attention spread above the fold

This is a great place to see with your scroll map. Look at what users see most often, and move your most valuable products to this area.

On product pages, you’ll of course need to include an “add to cart” button above the fold. But it’s just as important to include other key elements of the checkout process.

You might also include calls to action to get email addresses. These are important so you can send out personalized email campaigns later on to increase conversions and growth.

Maximize each user viewpoint, and you’ll start to see big gains in your eCommerce revenues and conversions.

Move content to the upper-left corner

Research has shown that most people read in an F-shape. That is, they typically read the most at the top, then gradually less throughout the page, starting on the left-hand side with each line.

To that end, you need to make sure you’re focusing your efforts on this area. It’s called the Golden Triangle, based on a 2005 study of Google’s search results , which has been proven to be just as relevant today, and eye tracking.

This heatmap image shows that the vast majority of people see what’s in the Golden Triangle first, so if you’re not maximizing this, you’re really missing out.

Use product photos of real people

eCommerce heatmaps are excellent for split testing different attention-grabbing techniques.

One strategy that’s been shown to work again and again is using pictures of people. Research has shown that we like images of other people.

Gaze plot of user viewing page listing a company's staff (FreshBooks.com)

If you don’t already have product photography with people (particularly showing faces), consider a split test with this type of image. You can also use gaze to direct clicks and focus—a model looking to the left of the screen is more likely to draw attention there.

Improve features users appreciate

Once you see your eCommerce heatmaps, you’ll be able to understand which features on your pages are most attractive to users. With this information, you can start expanding your pages to increase user engagement and draw in more active users to what you have to offer.

A great example of this comes from Bros Leather Supply. Based on their heatmap, it was clear that users preferred their product images.

With this being the case, they added more product photos to increase user engagement, as clear in the updated heat map image.

Homepage of Bros Leather Supply

You might also find that photo size meets the needs of users.

If people are looking for larger photos, this can also be a change with dramatic effects. This larger image attracted multiple eye fixations on eye tracking heatmaps, meaning it’s providing value to viewers.

Gaze plot of user viewing an enlarged product photo from an e-commerce site

These heapmaps can help provide insight into what the user is thinking and how he or she would like to interact with your store.

Tying it all together

It you’re growing an eCommerce store, you know that even tiny changes can pay huge dividends when it comes to conversions, sales, and profits.

eCommerce heatmaps are an advanced strategy that will help you improve your online shopping experience, engage users, and increase purchases. Heatmaps show where you can make improvements and boost conversions.

Which eCommerce heatmap strategy will you test first? Share your plans in the comments below!