How to Add a Heatmap to Shopify: Clarity or Hotjar

Shopify's reports can tell you a page is losing shoppers, but not where on the page they click, how far they scroll or what they ignore. That view comes from a script running on your storefront, and where the script sits in your store decides which pages it can see, whether it waits for consent and how much personal detail it can record.

Does Shopify Have a Built-In Heatmap?

Three things in Shopify carry the name or the look of a heatmap, and none of them records a click:

• The heatmap in reports. Shopify added it as a visualization for spotting patterns such as peak sales times across hours and days, or top product and channel combinations.
• ShopifyQL heatmaps. The ShopifyQL syntax docs use them to show intensity across a grid of two dimensions, with color standing in for magnitude.
• Live View. On its globe and map views, blue dots mark recent visitor sessions and purple dots mark orders.

In Shopify adminOpen in your store

1. Analytics
2. Reports
3. Weekly sales patterns

Zoom

No Shopify page we have found describes a built-in map of real visitors' clicks or scrolling; the surfaces we read are in the box below. SimGym, an app by Shopify, does play session replays, but of AI shoppers rather than your customers. For what the built-in reports do answer, see our guide to Shopify Analytics.

Why a Custom Pixel Can't Build One

Customer events is where Shopify's pixel manager keeps tracking scripts, so it is a natural first try. Shopify's help page on pixels lists what the sandboxes can't automatically detect, and heatmap data is named outright:

The developer documentation gives the general reason: the limits cover features that rely on scraping the DOM, and a custom pixel's sandbox cannot access the top frame. Shopify also says that adding and using custom pixels is unsupported. For the wider question of what a pixel can reach, see what a custom pixel can and cannot reach.

Shopify does offer a route for apps. Its Advanced DOM Events API can be used to recreate interactions for session recording and heatmaps, but only apps that have those features can request the scope, it cannot be used on custom apps, and on checkout it is limited to Plus stores.

You may still open Customer events once, to remove an old custom pixel before you install an app that replaces it.

In Shopify adminOpen in your store

1. Settings
2. Customer events

Zoom

Which Heatmap Tool Should You Install?

Here is how the three compare where it changes your choice.

Volume is where the free plans separate. Hotjar Free captures 35 sessions a day, around 1,050 a month, and Contentsquare Free covers up to 200,000 analytics sessions a month, with Session Replay on 5% of them up to 10,000 replays, by Hotjar's own help center. Contentsquare's pricing page also says up to 200k, but its App Store listing shows the Free plan at up to 20k monthly sessions, so check the limit in your account before you rely on the larger figure.

Microsoft's answer is simpler: Clarity is a free service forever, with no sampling. Its FAQ also says Clarity records up to 100,000 sessions per project per day and limits a heat map to 100,000 page views. Clarity keeps playback data for 30 days and heatmap data for 9 months.

What the Hotjar Move Means for Your Account

Hotjar merged into the Contentsquare Group on July 1, 2025, and accounts are being moved in phases. If your account got the 30-day notice, Hotjar's move FAQ sets out what follows:

• During the 30 days, leave the code alone. Your existing tracking code collects new data in both platforms, so no new tag is needed for this period.
• Only the Account Owner can stay on Hotjar, by opting out before the deadline in the email. Without that, the account moves to Contentsquare Growth, and the switch is final.
• The price may change. Your email shows the plan, price and sampling rate that apply, including any first-year loyalty discount, and the first Contentsquare charge falls on your next renewal date. Check Contentsquare's pricing while you still have time to decide.
• History stays behind. Heatmap and recording data does not transfer. Hotjar turns read-only for 12 months, then the account and its data are permanently deleted, so export what you want to keep.
• Keep the Hotjar account. Hotjar says deleting it stops your tracking in Contentsquare, even after you've switched.
• Update your cookie manager. The FAQ says the Contentsquare tag does not automatically read or inherit your cookie banner or consent tool, and its cookies must be added by hand.

Activating Contentsquare Free runs differently. Hotjar calls it a different platform from Hotjar Free: you start with a 15-day Growth trial and then drop to Free automatically, you install a new tag, and your data does not migrate.

Two of Hotjar's own pages disagree on how long Hotjar Free lasts. The Contentsquare Free article, updated June 15, 2026, answers “Can I keep using Hotjar Free?” with yes. The move FAQ, updated in October 2026, says all Hotjar accounts are moving onto Contentsquare. We read both on November 8, 2026.

Treat your own account's notice as what governs: without one, keep working as you are, and with one, its deadline is the date that counts.

Where the Script Lives and Which Pages It Reaches

Shopify's app embeds can add code to your store without being visible to customers, and the theme layout docs say general layouts can apply to all non-checkout pages. Those two facts set most of this table.

Clarity and Contentsquare install through their apps, and existing Hotjar code goes in theme.liquid. Microsoft's install screenshots show Clarity JS as an app embed in the theme editor; we did not install the app to check.

In Shopify adminOpen in your store

1. Online Store
2. Edit theme
3. App embeds

Zoom

If you already run a container, our guide covers the storefront install for Google Tag Manager.

If the Customer events screen is unavailable to you, that is a permissions question.

Can a Heatmap Record Your Checkout?

Theme code stops before checkout, and the older slots for scripts have closed. checkout.liquid stopped working on in-checkout pages on August 13, 2024. Shopify says it and additional scripts were sunset on the Thank you and Order status pages on August 28, 2025 for Plus, and stores outside Plus had until August 26, 2026 to upgrade those pages. For the wider picture, see our checkout extensibility guide.

Hotjar states the result plainly:

Read the Plus claims carefully. Microsoft's word is “tracked”, which is not the same as a click map. Contentsquare's Shopify guide promises Heatmaps on Plus and says its tag runs in a secure sandbox. Shopify's pixel page lists clicks and mouse movement as a sandbox limit, while its Advanced DOM Events API offers them to apps granted that scope, limited on checkout to Plus. Neither vendor names that API on the pages we read, so we can't tell how these fit together.

On Plus, place a test order and look for your own checkout in the tool before you plan around it.

The Hotjar order status page is unclear too. Hotjar's platform note says it supports your storefront and order status page, while its Shopify guide has one set of steps, into theme.liquid, and calls that storefront only. Shopify's dates above closed the older script slots on that page. We read these on November 4, 2026.

Don't plan on that page until you see it in your own recordings.

Find Your Route

The comparison table compares tools. This quiz answers by the combination that decides your next move: what is installed, whether checkout matters, where visits come from, your consent setup and who can edit code.

How to Pass Consent to a Heatmap Tool

This comes before the install steps because a tool that starts recording is already collecting. It takes two questions: does the rule reach your store, and how will your tool hear the visitor's answer?

Does the Consent Rule Apply to Your Store?

Microsoft dates the change on its Consent Mode page:

A store in the US with part of its traffic from those regions. Microsoft's consent checklist names organizations that operate outside those regions but receive traffic from them, and sites using Clarity through platforms like Shopify. As we read those pages, the visits from those regions are in scope and your other visits are not; that is our reading of vendor documentation, not legal advice.

Shopify's side works by region too. Its Customer Privacy API docs say that in regions configured to require consent, non-essential purposes are not allowed by default until consent is given, while other regions default to allowing all purposes. On automated settings, Shopify configures the banner for visitors in the UK and EEA if you have active markets there; Switzerland isn't named in that sentence, so check the Regions row if you get visits from Switzerland, or from those regions without a market there. See which regions your store is set to here:

In Shopify adminOpen in your store

1. Settings
2. Customer privacy
3. Cookie banner

Zoom

What Happens to Your Data Without Consent

• Clarity places no cookies in those regions unless it receives valid consent, and the state stays denied until you update it.
• Clarity assigns a unique ID per page view, so each pageview counts as a new session and funnels spanning several steps show a full drop-off.
• Consent doesn't last forever. Clarity treats consent as valid for up to 9 months, unless the user updates it or local configuration requires sooner.
• Hotjar simply doesn't record users who have cookies disabled.
• A US store with some visits from those regions should expect, by Microsoft's wording, these patterns on those visits only, mixed in one dashboard with normal sessions from elsewhere.

What Shopify's Cookie Banner Controls

Shopify says that in markets configured to require consent, usually the EEA and the UK, web pixels run only when visitors have given the permissions the pixel asks for. A heatmap script in your theme or an app embed, rather than a pixel, isn't covered by that sentence, and Shopify's privacy settings page says what follows:

Microsoft's page on third-party platforms, updated June 30, 2026, says: “Clarity auto detects consent once Shopify cookie banner is enabled.” It covers Clarity only. It also calls Clarity's official Shopify app “currently in development”, while the App Store listing shows a launch on July 17, 2025, so Microsoft's page may not describe the app route.

This guide did not test how Shopify's banner state reaches Clarity, Hotjar or Contentsquare, so treat that link as open until the test below answers it on your own store.

Ways to Pass Consent

Whether Shopify's own banner or a consent app suits you is a wider decision, covered in native banner or consent app. Hotjar says solutions exist for blocking its cookies until a visitor consents through a consent window.

Contentsquare isn't in this table. Hotjar's FAQ for moved accounts says the Contentsquare tag does not automatically read or inherit your existing cookie banner or consent tool. This guide did not collect Contentsquare's consent steps, so follow its documentation, then run the consent test.

Custom logic for Clarity starts with Consent Mode enabled in your Clarity project settings, which Microsoft says is on by default for users from the EEA, UK and Switzerland. It then takes four moves, and this is work for someone who edits theme code:

1. Load Shopify's Customer Privacy API on the storefront with window.Shopify.loadFeatures and the consent-tracking-api feature.
2. Check the visitor's current state once, because Shopify publishes changes only when consent changes, not when a listener is added.
3. Listen for the visitorConsentCollected event for any later change.
4. Pass the answer through Clarity's consentv2 API as granted or denied for ad_Storage and analytics_Storage, immediately after the Clarity script loads and before any cookies are set.

Microsoft's pages differ on the supported tools. The Consent Mode page, updated August 14, 2025, still says Clarity currently integrates with CookieYes, with more coming soon, while the supported CMPs page lists the tools named under the table. We read both on November 4, 2026.

Use the longer list as your starting point and confirm the Clarity connection in your consent tool's own documentation.

Microsoft's Consent Management page lists Google Consent Mode as a route as well, though as of November 8, 2026 Microsoft's FAQ says that support is coming soon and Microsoft's Google Consent Mode page says it is integrated.

How to Install Each Tool

Before you install:

• Find old tags. Search theme.liquid for the tool's name and look through your pixels. Old tracking code tends to hide in the same places our GA4 guide lists.
• Note your speed. Write down today's figure so you have something to compare after installing.
• Settle consent if you get visits from the EEA, UK or Switzerland, using the section above.

How to Install Microsoft Clarity

These are Microsoft's steps for a new install.

1. Sign in to Shopify, go to the App Store, select Microsoft Clarity: AI Insights and choose Install.
2. In the pop-up window, review the data access permissions and select Install.
3. Select Go to app settings. On the new tab, make sure Clarity JS is toggled on and select Save, then close the tab.
4. Back on the installation page, the dashboard should refresh by itself; if not, select Refresh. Allow a few hours for data.

Microsoft Clarity

Zoom

If Clarity Is Already in Your Theme Code

1. After installing the app, select Connect Project. An email goes to the project admin.
2. Follow the link in that email and sign in to Clarity to connect the project.
3. Go back to the installation page. It should refresh by itself; if not, select Refresh.

Make sure the project admin can still read that email. If the project sits in a different account, Microsoft says to add a new member to it that uses the same email address as your store owner. Then check for doubled sessions using the table in the troubleshooting section.

How to Install Contentsquare

Before you begin, per Contentsquare's app and its guide:

• You must be a Shopify administrator on the account.
• Copy your Tag ID from the Integration Catalog in Contentsquare, where you search for Shopify.
• If you installed Contentsquare with a custom web pixel, remove it first to avoid duplicate data.

1. Install the app. In Contentsquare data collection, paste the Tag ID, enter an email for privacy requests and click Save.
2. In the domain table, which lists active domains from Shopify Markets, paste a Tag ID beside each domain you want to track and click Save. Unassigned domains don't send data.
3. Click Add Contentsquare to storefront and Save in the theme editor. Make sure data masking is on for checkout pages, then click Enable data collection on checkout.

Contentsquare Analytics listing in the Shopify App Store

Zoom

Skip step 3 if Contentsquare already reaches the storefront through Google Tag Manager or hard-coded tags.

Coming from your own Hotjar code to this new tag? Hotjar says the two can run on one page and recommends removing the Hotjar script from theme.liquid once you are comfortable with the new setup. That advice covers a new tag only: on the 30-day notice path, the old code is what collects, so it stays.

How to Install Hotjar in theme.liquid

Hotjar Install listing in the Shopify App Store

Zoom

Hotjar's own route is a manual paste. Its steps name your current theme, and Shopify advises making a backup copy and customizing the duplicate, so edit the copy and keep the original as your way back.

1. In Hotjar, open your Sites page, choose Install tracking code, then Add code manually and Copy.
2. In Shopify, go to Online Store. From the theme's ⋯ menu choose Duplicate, then open the same menu on the copy and choose Edit code.
3. In the Layout folder, click theme.liquid, scroll to the closing </head> tag, paste the code just before it and click Save.
4. Publish the copy when the storefront looks right, because the code only runs on the theme shoppers see.

In Shopify adminOpen in your store

1. Online Store
2. ···

Zoom

In Shopify adminOpen in your store

1. Online Store
2. Edit code

Zoom

Check Consent, Masking and Speed After You Install

None of these needs a developer.

Test Consent in Your Own Store

1. Open your store in a private window, from a location where your banner shows. For Clarity, test from the EEA, UK or Switzerland if your banner shows there, since Microsoft says Consent Mode is on by default for users from those regions. Before you answer the banner, open your browser's developer tools and list the site's cookies.
2. Decline the banner, reload the page and list the cookies again.
3. Close the window, open a new private window, accept the banner and list the cookies a third time.
4. Compare the lists. Microsoft says Clarity places no cookies in those regions without valid consent, and Hotjar's move FAQ names the _hj* and cs* families for its tools. For Clarity, Microsoft's check after declining is no entry for _clck or _clsk while Clarity is still executing, which you can see in its /collect calls.

Tool cookies in the first list or after declining mean the script isn't waiting, so go back to the routes. For the pixel side of the same check, see checking that pixels wait for consent.

What Gets Recorded and What to Mask

The defaults tell you where to start, not what your pages show. Open one recording of a customer account page, plus an order status page if your tool records it, and read them as if you were the customer.

Changes to Clarity's masking mode apply only to new recordings, so anything already captured stays as it was. On a Hotjar account moving to Contentsquare, Hotjar says your suppression settings apply automatically, with no manual recreation.

Will a Heatmap Slow Your Store?

These are the statements on record, each from the party making it:

• Shopify, on scripts in general, in its pixels help: “The more scripts you have, the slower your store will run.”
• Microsoft: its FAQ says “Visitors to your site notice no change in site speed or performance.” Its blog is more careful: “we cannot guarantee your site will not be affected in any way”, and its November 2021 post reports a test of five websites with 0 ms of total blocking time and a script of about 25 KB. That is the vendor's test, and the post doesn't mention Shopify.
• Hotjar: its article says “we cannot guarantee that your site will not be affected in any way”, and its own single example page added about 0.3 seconds to overall page completion. That is the vendor's example, not a measurement of a Shopify store.
• Contentsquare: calls its tag “lightweight and optimized for performance”, without a figure.

Go back to the figure you noted before installing and read the same report for the same pages once it has caught up. Our speed guide explains how to read the Web performance report.

How to Read Your First Heatmaps

Clarity tracks clicks and scrolls on mobile, desktop and tablet and offers five map types:

Hotjar names its types click and tap, move, scroll, engagement and rage clicks (the last two on Observe Business or Scale), and Contentsquare adds zoning on Growth and above.

Your first read takes three moves:

1. Open the click map of your busiest product page and see which elements get the most clicks.
2. Open its scroll map and see how far visitors get down the page.
3. Repeat both on phone and desktop, separately.

Microsoft says there's no minimum traffic limitation to generate a heat map. We have no sourced number for how many sessions make a map trustworthy, so we won't give one: treat a pattern as real once it holds as more traffic arrives.

Three kinds of noise to expect when you compare numbers:

• Bots. Clarity excludes detected bot traffic by default, and Shopify filters identified bot sessions from its session reports by default, each by its own method. For why the counters disagree, see why Shopify and GA4 differ.
• Conversion rates. Microsoft says Clarity calculates its Purchase Conversion rate from the data it receives from your site, so it won't always match Shopify's.
• Sessions without consent. Microsoft says each pageview counts as a new session for those visits, so Clarity's session count can run higher for that reason alone.

A map shows where shoppers go, not what to change. For the store patterns worth checking against what you see, read what the best Shopify stores share.

Why Your Heatmap Shows No Data

Your Heatmap Setup Checklist

The order matters most between steps three and four, because a tool starts collecting the moment it goes live. If the quiz kept you on Hotjar with your code already in place, skip step four and do the rest.

Other Heatmap and Replay Apps in the App Store

We started from App Store autocomplete and the first pages of the Analytics category on November 4, 2026, and re-read these six listings on November 8, 2026. More apps carry the same tags, so read this as what we found on those dates rather than everything that exists. We did not install or test any of them.

The Bottom Line

The install takes a few screens. What decides whether you can use the data is the order around it: old tags first, consent next, and your own checks at the end.

Frequently Asked Questions