Shopify Heatmap and Session Recording Setup Guide — Hotjar and Microsoft Clarity

Numbers tell you where users drop off. Heatmaps and session recordings tell you why. If you have GA4 showing that 60% of visitors leave your product page without adding to cart, that data alone does not tell you whether they are confused by your size guide, distracted by your navigation, or hitting a bug on mobile. Watching real users navigate your store answers these questions in minutes.

This guide walks through the complete setup of both Microsoft Clarity (free, recommended starting point) and Hotjar (freemium, stronger survey tools) on Shopify, and more importantly, how to extract actionable insights once data is flowing.

Microsoft Clarity vs Hotjar — Which to Use?

Both tools record user sessions and generate heatmaps, but they have different strengths. Microsoft Clarity is completely free with no session caps, making it the obvious starting point for any Shopify store. Hotjar’s free plan caps at 35 sessions per day, which is often not enough to spot patterns on higher-traffic stores, and the paid plans add surveys, feedback widgets, and integrations that Clarity lacks.

The practical recommendation: install Clarity first for unlimited recording data, add Hotjar if you need on-site surveys or feedback polls. There is no reason not to run both simultaneously — they do not conflict and each has complementary strengths.

Setting Up Microsoft Clarity on Shopify

Step 1 — Create a Clarity Account

Go to clarity.microsoft.com and sign in with a Microsoft account. Click “Add new project”, enter your store name, and input your Shopify store URL. Select “Shopify” as the platform type — Clarity has a native integration that makes installation simpler.

Step 2 — Install via Shopify App Store (Recommended)

The easiest installation path is through the Microsoft Clarity app in the Shopify App Store. Install the app, connect it to your Clarity project using your project ID, and it will automatically inject the tracking code into every page — including checkout, which is notoriously difficult to tag manually. This method also handles theme updates without breaking your tracking.

Step 3 — Manual Installation (Backup Method)

If you prefer manual installation, copy your Clarity tracking code from the setup screen. In Shopify Admin, navigate to Online Store → Themes → Edit Code. Open the theme.liquid file and paste the Clarity script immediately before the closing </head> tag. Save and verify by visiting your store and checking the browser console for the Clarity beacon firing.

Step 4 — Verify Checkout Tracking

Shopify’s checkout pages are hosted on a separate domain (checkout.shopify.com or your custom checkout domain). To enable Clarity recording on checkout, go to Shopify Admin → Settings → Checkout → Additional scripts. Paste the Clarity tracking code here. This is separate from the theme.liquid placement and both are required for full-funnel visibility.

Step 5 — Configure Privacy Settings

Clarity automatically masks sensitive form fields (credit card numbers, passwords) by default. Review the masking settings to ensure PII (personally identifiable information) like email addresses and phone numbers are also masked. Navigate to Settings → Masking in your Clarity project. For GDPR compliance, ensure your cookie consent banner fires before Clarity loads — the app integration handles this automatically if you use a Shopify-native consent solution.

Setting Up Hotjar on Shopify

Step 1 — Create a Hotjar Account

Go to hotjar.com and create an account. Choose “Website” as the project type and enter your Shopify store URL. Select your industry and team size — these affect which onboarding prompts you see but do not restrict functionality.

Step 2 — Install the Tracking Code

Hotjar does not have a native Shopify app, so installation is via code. Copy your Hotjar site ID from the setup screen. In Shopify Admin, go to Online Store → Themes → Edit Code → theme.liquid. Paste the Hotjar script before the closing </head> tag. For checkout tracking, also add it to the Additional Scripts section in Settings → Checkout.

Step 3 — Set Up Your First Heatmap

In Hotjar, go to Heatmaps → Create Heatmap. Enter the URL of your most important product page (your best-seller). Set the device to “All devices” initially — you can segment by mobile and desktop later. Set the page view target to 1,000 (adjust based on your traffic). Hotjar will now start accumulating click, scroll, and move data on that page.

Step 4 — Configure Session Recording Filters

Hotjar’s session recordings have filters that save enormous time during analysis. Set up saved filters for: sessions that include add-to-cart events, sessions that reached checkout but did not purchase, and sessions with rage clicks. These three filters will consistently surface your highest-value conversion insights.

What to Look For in Heatmaps

Raw heatmap data is only valuable if you know how to interpret it. Here are the key patterns to identify:

Click Heatmaps

• Clicks on non-clickable elements: If users are clicking on text, images, or icons that do not link anywhere, they expect that element to be interactive. This is a missed navigation or CTA opportunity.
• Low CTA click rate: If your “Add to Cart” button shows relatively few clicks compared to the traffic, the button may be below the fold, poorly visible, or users are leaving before reaching it.
• Navigation abandonment: Heavy clicks on your logo (back to homepage) or navigation menu on a product page indicates users are not finding what they need and are resetting.

Scroll Heatmaps

• The fold line: What percentage of visitors scroll past your first screen? If it is below 50%, your above-the-fold content is not compelling enough to encourage exploration.
• Content drop-off: Where does scrolling stop? Elements placed below the natural scroll depth receive almost no attention. Move high-priority content (reviews, trust badges, key product features) above this threshold.
• Mobile vs desktop disparity: Mobile users scroll differently than desktop users. Always compare scroll maps by device — they are often dramatically different and require separate optimisation strategies.

What to Look For in Session Recordings

Session recordings are time-intensive to watch but incredibly high-value. Develop a watching discipline: watch in 2x speed, pause on moments of hesitation or confusion, and take notes immediately. After 30 recordings on the same page, patterns become obvious.

• Rage clicks: Rapid repeated clicks on an element indicate extreme frustration, usually a broken link, slow-loading image, or an element that looks interactive but is not.
• U-turn behaviour: Users who progress toward checkout, then scroll back up to re-read product information, are experiencing doubt. They need more reassurance — size guidance, clearer return policy, more reviews.
• Form abandonment: Watch where users stop filling out forms. A checkout field with high drop-off is either confusing or triggering privacy concerns.
• Mobile tap accuracy: On mobile recordings, watch whether users tap their intended targets or frequently miss and tap adjacent elements. This reveals tap target size problems.

Turning Observations into CRO Hypotheses

After two weeks of data collection, you should have a list of 10–20 observations. Each observation should generate a hypothesis. Prioritise hypotheses by the volume of users affected and the severity of the friction observed.

A common mistake is acting directly on recordings without forming a hypothesis first. If you see five recordings where users seem confused by your size guide, the hypothesis is: “Adding an inline size guide with a visual reference chart above the add-to-cart button will increase add-to-cart rate because users currently leave to find sizing information elsewhere.” This framing ensures you are solving the specific problem, not just making a change that feels right.

For help interpreting your heatmap and recording data and building a testing roadmap, see our Shopify CRO services or review case studies from stores we have worked with. Getting the analysis right is the foundation of everything that follows.