Shopify Heatmaps: Set Up Clarity and Read Visitor Clicks
The easiest way to add heatmaps to Shopify is Microsoft’s own free app, Microsoft Clarity: AI Insights, which records sessions and builds click and scroll heatmaps for your pages. Install it, make sure it only tracks visitors who consented in your cookie banner, wait until each important page has enough sessions to show a pattern, and then read the heatmaps page by page next to Shopify’s funnel report.
App details are as the Shopify App Store listings showed them on October 23, 2026; consent rules come from the Shopify Help Center pages on customer privacy and GDPR, read the same day. We run Clarity on our own sites, loaded only after consent and named in the privacy policy.
Tools compared
| Tool on the App Store | Price | What the listing names | Rating |
|---|---|---|---|
| Microsoft Clarity: AI Insights (by Microsoft Clarity) | Free | Session replays, heatmaps, AI insights, conversion funnels, checkout analytics | 4.6 (2,418 reviews) |
| Hotjar Install (by Dualsided, an installer for Hotjar) | From $0.99/month; Hotjar’s own subscription is separate | Heatmaps; product and cart event tracking on its Pro plan | 4.3 (90) |
The official Clarity app asks for access to edit the Online Store (pages, theme, checkout page) and store analytics (web pixels), among other permissions, as its install screen shows. Read that screen before you approve it, as with any app.
Set up Clarity on Shopify with consent
- Turn on your cookie banner first. In Settings > Customer privacy, configure the banner for the regions that need it, such as the EU and UK. Heatmap and recording tools are trackers and need consent where the law requires it.
- Install Microsoft Clarity from the App Store and connect it to a Clarity project.
- Check how it respects consent. Shopify honors consent choices made in its own banner or in a consent tool integrated with its Customer Privacy API. The Clarity listing says it is “GDPR and CCPA compliant with built-in consent”; confirm in its documentation that it waits for your banner’s choice, or use a third-party installer that loads the script only after consent.
- Add it to your privacy policy, with what it records and why.
- Test. Open your store in a private window, decline cookies, and check that no recording starts. Accept, browse a few pages, and check the session appears in Clarity.
- Mask sensitive fields. Recordings should not capture what people type into forms such as addresses or emails; check the tool’s masking settings.
What to look for, page by page
- Product pages. Scroll heatmaps: how many visitors reach the description, reviews and size chart. If most never scroll past the photos, the key information has to move up. Click heatmaps: do people tap the images, the variant swatches, the size guide? Repeated taps on something that is not a link (“dead clicks”) point to an element people expect to work.
- Collection pages. Do visitors use filters, or scroll endlessly? Clicks on product cards versus quick-add buttons show how they shop.
- Cart and cart drawer. Hesitation around the checkout button, clicks on the discount field, removals. Recordings of sessions that reached the cart but not checkout are the most useful ones to watch.
- Homepage. Where the first click goes: menu, hero button or search.
- Mobile versus desktop. Look at them separately, because the layout is different on each.
Watch ten recordings of sessions that left without buying before drawing conclusions from one.
From heatmap to change
Heatmaps show where people struggle, and the Conversion rate breakdown report shows where in the funnel they drop out. Pick one finding that matches a weak step in the funnel, change one thing on that page, and compare the step over the next weeks, or, on the Grow plan or higher, with an A/B test through Shopify’s Rollouts. Other ways to find problems in your own reports are in Shopify UX mistakes, and more store guides are in the running a store hub.
Frequently asked questions
Is Microsoft Clarity free for Shopify? It is. Microsoft Clarity: AI Insights is listed as free on the Shopify App Store, with session replays, heatmaps and AI insights.
Do heatmap tools slow down a Shopify store? They add a script that loads on your pages, like any tracking tool, so check your speed in Shopify’s Web Performance reports before and after installing. Remove tracking tools you no longer read.
Can heatmaps track the Shopify checkout? Shopify’s checkout runs on Shopify’s own pages, and tracking there works through web pixels rather than theme scripts. The Clarity listing names checkout analytics and asks for web pixel access; check in its documentation what it records at checkout.