How to Install Microsoft Clarity on Shopify: Step-by-Step Guide

Understanding how users interact with your online store is crucial for driving sales. Today, we are discussing Microsoft Clarity, a completely free analytics tool that provides heatmaps and session recordings.

Clarity gives you a "fly-on-the-wall" view of user behavior, helping you identify pain points, improve user experience (UX), and optimize conversion rates. In this guide, I will walk you through integrating Clarity into a Shopify site and give you a tour of the dashboard's powerful features.

Why Use Microsoft Clarity?

Before we dive into the code, here is why you should consider adding this tool to your stack:

• Heat Maps: Visualize where users click and scroll.
• Session Recordings: Watch actual user journeys to see where they get stuck.
• Optimization: Use data to fix dead links, rage clicks, and layout issues.
• Cost: It is 100% free.

Step 1: Set Up Your Clarity Account

1. Navigate to clarity.microsoft.com.
2. Click Get Started and sign in using your preferred email provider.
3. Once signed in, click Add New Project.
4. Fill in the required details:
   • Name: Your store name.
   • URL: Your Shopify domain.
   • Industry: Select 'Retail' or your specific niche.
5. Click Add New Project.

Step 2: Generate the Tracking Code

After creating the project, Clarity will prompt you to choose an installation method.

1. Select Install on a third-party platform.
2. Choose Shopify from the list.
3. Copy the tracking code provided on the screen.

Step 3: Install Code in Shopify Theme

To get the tracking working, we need to inject the code into your theme's head section.

1. Log in to your Shopify Admin.
2. Go to Online Store > Themes.
3. Click the three dots next to your active theme and select Edit code.
4. In the file directory, look under the Layout folder and open theme.liquid.
5. Click inside the code editor and press CTRL+F (or CMD+F on Mac) to search for /head.
6. Paste your Microsoft Clarity tracking code directly before the closing </head> tag.
7. Save the file.

Step 4: Checkout & Order Status Page (Optional)

Note: This step depends on your specific Shopify plan and checkout configuration.

If you want heatmaps and recordings for your Checkout and Order Status pages, you must add the script there as well. However, this currently requires you to deprecate the new Shopify checkout system to access the checkout.liquid file.

Warning: Deprecating your checkout is a significant change. Proceed only if capturing checkout data is critical for your analysis.

1. Go to Settings > Checkout.
2. Scroll down to the Checkout Style or configurations area.
3. If available, select Revert to enable script access (this reverts to checkout.liquid).
4. Once reverted, you can paste the script into the checkout.liquid file or the "Additional Scripts" box depending on your version.
5. Save your changes.

If you are on Shopify Plus or using the new Checkout Extensibility, you may need to wait for the official app integration update.

Step 5: Analyzing the Data

Once installed, wait approximately 1 to 2 hours for data to populate. To view your data, navigate to your project dashboard at clarity.microsoft.com/projects.

key Insights Dashboard

Clarity provides immediate "Info at a Glance," including:

• Scroll depth
• Pages per session
• Rage Clicks: Users rapidly clicking in frustration.
• Dead Clicks: Users clicking elements that appear interactive but aren't.
• Quick Backs: Users immediately leaving a page.

Utilizing Custom Filters

To get granular data, use the Filters button. You can segment data by:

• Performance: Filter by sessions with low performance.
• User Actions: Filter by users who added items to the cart or reached specific pages.

Pro Tip: AI-Powered Summaries

A standout feature in Microsoft Clarity is the integration of Artificial Intelligence. Instead of manually watching hundreds of recordings, you can use AI to summarize user behavior.

1. Filter for a specific issue (e.g., Dead Clicks).
2. Click Summarize Recordings.
3. Select Top 10 Recordings.

The AI will analyze the sessions and provide a text explanation of what is happening and why users are experiencing pain points. This drastically reduces the time required to perform a UX audit on your store.

---

By integrating Microsoft Clarity, you stop guessing why customers aren't converting and start making data-driven decisions. If you found this guide helpful, be sure to test it on your store and check your heatmaps regularly.