5 ways to use Hotjar to increase Shopify store conversions

April 3, 2019 by Artūras Zakrevskis

Shopify is a leading e-commerce platform, boasting over 800,000 stores worldwide. Opening a Shopify store may be simple enough, but consistently driving conversions and sales is a trickier task.

There’s no magic way to make your website better, but we do know of something that can set you on the right path: getting to know your users.

After reading this article, you’ll know exactly how to start using Hotjar’s user behavior and feedback analytics tools (think heat maps, session recordings, and surveys) to give your users what they need and increase conversions and sales for your Shopify-powered website.

 

Add Hotjar to your Shopify store…

...and start improving the experience for your customers, today.

Free forever. Get started!
hotjar-shopify

Table of Contents

What is Hotjar for Shopify?

Hotjar is an all-in-one tool for Shopify store owners to understand their users and improve conversion rate. Popular products for Shopify users include heat mapping, surveys, and session recordings.

You can get Hotjar's suite of user behavior and feedback analytics tools on your Shopify store by adding a short bit of code to your theme (instructions at the end of this article).

Using Hotjar alongside traditional analytics

We know Hotjar is the perfect companion to traditional analytics tools, but don’t just take our word for it. Here’s what the team behind Shopify store Muci Buci have to say about us:

 

muci-buci-review-shopify-hotjar

 

You’re always going to need traditional analytics to collect useful metrics like page views and bounce rate, but with Hotjar you’ll get additional detail and insights from a) seeing how users click and interact with your e-commerce store, and b) the feedback you can collect from them.

Why measure user activity on your Shopify site

When you design your Shopify store and write product copy, you do so to help users find the products they need and reach the checkout without friction. But there’s no way to know if your e-commerce site works as well as it could without seeing things from your users’ perspective and getting feedback from them.

And that’s why you need to collect this kind of insight: so you learn how to optimize the design of your pages to improve UX and increase conversions.

5 easy ways to use Hotjar to increase conversions on your Shopify store

There’s really no cap on the creative ways you can use feedback and user behavior analytics to get more sales for your Shopify site, but we’ve compiled a list of 5 easy ways you can get started based on insights we’ve gained from talking to Hotjar users (you see: user feedback works for us, too!).

1. Identify your high-exit pages

funnel-example-hotjar-shopify

An example conversion funnel showing pages with high user drop-off

An e-commerce sales funnel (also known as a conversion funnel) is a series of steps that lead a user through your website from new visitor to confirmed customer. Shopify conversion tracking and funnel analysis will help you identify ‘holes’ so you can plug them and send more traffic down the funnel.

E-commerce Shopify funnels will look something like this:

homepage > category page > product page > cart > thank you page

You can tailor Hotjar funnels to any series of pages: start from your most important page (the one that brings in the most business) and work backward to identify the main pages that get users there.

The first step towards increasing your conversion rate and sales is to find the page with the most drop-offs, because if you fix these pages you can funnel more users to your high-converting pages.

2. Find the best (and worst) elements on important pages

shopify-hotjar-heatmap

Instead of guessing which design elements help or hinder your users, set up a Shopify heatmap tool and find out.

A heatmap (or heat map) is an aggregated visual record of all the mouse activity on your website (including scrolling/tapping on mobile).

Heat maps will show you exactly where users scroll to, what they click on, and how they move the mouse around the page, so you can easily identify which elements are getting the most attention and what information is ignored.

Improvements made after reviewing heat map data can be as easy as moving a CTA (call-to-action) to a different spot. For example, trampoline e-commerce retailer Trampoline Plezier increased CTR (click-through rate) by 11% after identifying the opportunity to move a CTA thanks to scroll and click data from Hotjar Heatmaps.

 

See it in action: here’s a real heat map that’s measuring user interaction on our heatmap guide. Toggle between the ‘Click’, ‘Move’, and ‘Scroll’ maps to view different data.

3. See how your website visitors interact with key pages

Recordings-example-shopify-hotjar

A real session recording in Hotjar

While heat maps aggregate data for all your users, you can get a deeper understanding of individual user behavior by analyzing session recordings.

Recordings (also called session or user replays) recreate a users’ browsing experience across multiple pages.

You can use recordings to examine the pages users visit before converting. Look for patterns: are converting users spending time reading product descriptions? How many product photos do converting customers view before making a purchase? On the flip side, you can also take a deep dive into how users browse your Shopify store before leaving with an abandoned cart. Once you’ve identified customer trends, you’ll know what to emphasize, remove, or test in your next design change to help more users follow the same behavior.

 

See it in action: here’s a real session recording showing a user browsing multiple pages on Hotjar.com

4. Set up a post-purchase survey

shopify-hotjar-survey-example

 

Adding a quick questionnaire straight after customers have purchased from your Shopify store is a simple, non-intrusive way to get useful feedback to help boost your e-commerce sales.

While the shopping experience is still very fresh in your customer’s mind (ideally on the thank you page), ask 3 simple questions:

  1. How would you rate your overall experience?
  2. What did you love about the experience? or What can we do to improve the experience? (depending on the response to question 1)
  3. What almost stopped you from completing your purchase?

We think the last question is crucial and will alert you to potential website issues and general objections (e.g., “I was worried the shirt would not fit”) so you can address those fears for everybody else.

 

Read more: you can also use post-purchase surveys to measure NPS (Net Promoter Score®). Here’s how e-commerce jeweler Taylor & Hart used NPS to stay customer-focused and grow revenue.

5. Spot bugs and issues

Whether it’s security updates, adding new products, or editing shipping terms, your Shopify store is always going to be changing. And changes can lead to unknown bugs and issues.

Fixing bugs might not be as glamorous as looking for CRO (conversion rate optimization) ideas, but it’s going to help you build a more successful Shopify store that doesn’t leave users frustrated.

For example, outdoor retail experts Ecommerce Warriors used Hotjar Recordings on a client’s site to spot a simple-to-fix issue:

“On product pages with size options, it wasn’t obvious that a size needed to be selected in order to proceed with the purchase. So, the shopper kept trying to click ‘add to bag’ with nothing happening. You’ll see by the red dots, in this recording it took someone over 3 click attempts before figuring out the size-selection process.”

 

jeff-bronson

 

 

Jeff Bronson

hotjar-issue2-ecommerce_opt

 

Let your users show you how well your Shopify store is designed; if you can see them struggling to figure out how to proceed, you know it’s time to re-design the page to remove friction.

Hotjar for Shopify FAQs

Can I use Hotjar on a Shopify checkout page?

Most Shopify plans don't allow 3rd party javascript on their checkout, which means Hotjar can't track checkout pages. Instead, we recommend using Hotjar on your order confirmation page so you can still collect data beyond the cart stage.

If you have Shopify Plus (the enterprise platform), you can contact your Shopify Merchant Manager to get Hotjar added to your checkout pages. 

How does Hotjar comply with GDPR and privacy regulations?

masked-elements-shopify-hotjar

 

Because you run an e-commerce business, your customers will definitely be entering personal details including names, addresses, and credit card numbers. Hotjar suppresses all keystroke data by default, replacing text with asterisks.

Additionally, Hotjar provides compliance controls that allow you to use Hotjar in a GDPR-compliant manner. Read more about how Hotjar is designed and built with privacy in mind.

Will Hotjar slow down my Shopify website?

Hotjar’s tracking script is designed to avoid slowing down your Shopify store as it is loaded asynchronously, served through a Content Delivery Network (CDN) and uses browser caching.

Read this article for more information: Will Hotjar slow down my site?

 

How to install Hotjar on your Shopify store

The best way to install Hotjar on Shopify is to follow the tutorial below to manually add the tracking code to your Shopify theme.

To get started, you’ll need to sign up for Hotjar, add your Shopify store domain to your dashboard and copy your unique tracking code snippet.

1. From your Shopify dashboard, click “Online Store”, then “Themes”

add-hotjar-shopify

2. Select the “Actions” drop-down menu, then click “Edit code”

shopify-install-hotjar

3. Under “Layout”, click “theme.liquid”

shopify-hotjar-install

4. Scroll to the closing </head> tag and paste your unique tracking code above it

shopify-hotjar-installing

 

Depending on your Shopify theme, your closing header tag might be {/head}, [/header], </head> or something similar.

Click “Save” and you’re ready to start using any (or all!) of Hotjar’s tools on your Shopify Storefront. You can also use Hotjar on post-checkout pages by following steps 8 to 12 in this Hotjar for Shopify guide.

 

Add Hotjar to your Shopify store…

...and start improving the experience for your customers, today.

Free forever. Get started!
hotjar-shopify

Join 10,000+ marketers and designers who receive our blog posts in their inbox

Artūras Zakrevskis

A passionate software engineer responsible for all the things related to front-end development in Hotjar.

comments powered by Disqus
Back to top