NV Trends Docs

Microsoft Clarity & Heatmaps — User Guide

Microsoft Clarity & Heatmaps is a Shopify app by NV Trends that connects your storefront to Microsoft Clarity — a free analytics tool from Microsoft — so you can watch real session recordings and explore click, tap, and scroll heatmaps of your store.

Total setup time is about 2 minutes, and no theme code is edited at any point. This app is not affiliated with Microsoft.

What the app can do

Capability	What it means for you
One-step setup	Paste your Clarity Project ID and you’re live — the app validates it instantly.
Session recordings	Watch real visitor sessions in your Clarity dashboard to see where shoppers struggle.
Heatmaps	Click, tap, and scroll heatmaps reveal what buyers actually engage with.
No theme code edits	The script is injected through a theme app embed — clean install, clean removal.
Performance-safe	The Clarity script is small and loads asynchronously; it’s only injected while a valid Project ID is saved.
Instant pause	Clear the Project ID and save — the script stops rendering immediately.

Before you begin

You need a free Microsoft Clarity account and project:

Go to clarity.microsoft.com and sign in — any Microsoft, Google, or Facebook account works.
Click Add new project, enter your store name and your storefront URL (for example https://your-store.myshopify.com or your custom domain).
Open the project and go to Settings → Overview. Your Project ID is shown at the top — a short code of letters and numbers (for example abcd1234xy). Copy it.

Tip: You can also paste the entire Clarity tracking snippet into the app — it extracts the Project ID for you.

Step 1 — Install the app and start your trial

Install Microsoft Clarity & Heatmaps from the Shopify App Store.
Approve the subscription — choose the Monthly Plan ($5 every 30 days) or the Yearly Plan ($54/year — $6 off). Both include a 5-day free trial.
You can cancel anytime by uninstalling the app; billing stops automatically through Shopify.

Step 2 — Save your Project ID

Open the app from Shopify Admin → Apps.
Paste your Project ID into the Microsoft Clarity Project ID field.
Click Save. A confirmation appears when the ID is stored.

The ID is saved as an app-owned metafield inside Shopify — nothing is written to your theme files.

Validation: Project IDs are 6–30 letters and numbers, with no dashes or spaces. If your value is rejected, copy the ID from Clarity Settings → Overview — or paste the full tracking snippet and let the app extract it.

Step 3 — Enable the app embed

In the app, click Enable app embed in Theme Editor. The Theme Editor opens with the Microsoft Clarity app embed already activated for preview.
Click Save in the Theme Editor to publish it.

That’s it. The Clarity script now loads in your storefront’s <head> — but only while a valid Project ID is saved, so an empty configuration never adds any code to your store.

Step 4 — Verify it’s working

Visit your storefront and browse a few pages.
Open your project at clarity.microsoft.com — sessions usually appear within a few minutes.

To verify instantly: view your storefront’s page source and look for https://www.clarity.ms/tag/<your-project-id>.

Turning Clarity off

Temporarily — clear the Project ID field in the app and click Save. The script stops rendering immediately. Save the ID again whenever you want to resume. (You can also toggle the app embed off in the Theme Editor.)
Permanently — uninstall the app. The app embed disappears with it, and no leftover code remains in your theme.

Privacy and data

The app is built to hold as little data as possible:

Data	Where it lives	Removed when
Your Clarity Project ID	An app-owned metafield inside Shopify	You clear it, or automatically on uninstall
Shop name, domain, plan	Read at page load for display — never stored	Not stored

The app requests no Admin API access scopes — it cannot read your products, orders, or customers.
No customer (buyer) data is collected, processed, or stored by the app. Visitor recordings and heatmaps are collected by your own Microsoft Clarity project, on Microsoft’s infrastructure, under Microsoft’s privacy terms.
Clarity masks sensitive input content by default, but you remain responsible for your store’s privacy policy and any regional consent requirements (GDPR, CCPA, etc.). If you operate a consent banner, configure it to gate analytics scripts accordingly.

Pricing and billing

Plan	Price	Free trial	Includes
Monthly Plan	$5 / 30 days	5 days	One-step setup with validation, no-code script injection, support
Yearly Plan	$54 / year ($6 off)	5 days	Same features, billed once a year

Microsoft Clarity itself is a free Microsoft product with no traffic limits — the subscription covers the Shopify integration, settings management, and support.
Billing is handled by Shopify’s billing system and appears on your regular Shopify invoice.
Uninstalling the app stops billing automatically and removes the embed from your theme.

Troubleshooting checklist

Symptom	Cause	Fix
”Enter a valid Microsoft Clarity Project ID” on save	The value isn’t a Project ID — IDs are 6–30 letters/numbers, no dashes	Copy the ID from Clarity Settings → Overview, or paste the full tracking snippet
Script not on storefront after saving	App embed not enabled, or theme not saved	Re-open the Theme Editor via the app’s button and click Save
Script present but no recordings in Clarity	Wrong Project ID, or the Clarity project’s site URL doesn’t match your domain	Confirm the ID matches your project and the project URL covers your storefront domain
Recordings missing for some visitors	Browser privacy tools or consent banners blocking Clarity	Expected behavior — see the privacy section above
Store uses a custom domain	—	Nothing to change; the embed works on any domain serving your theme

Frequently asked questions

Microsoft Clarity is free — why does the app cost $5/month? Clarity itself is free, with no traffic limits. The subscription covers the Shopify integration: one-step setup with validation, safe no-code script injection via a theme app embed, and support.

Will it slow down my store? No. The Clarity script is a single, small, asynchronous script that doesn’t block page rendering — and it’s only injected at all while a valid Project ID is saved.

Does it work with my theme and custom domain? Yes. App embeds work with every Online Store 2.0 theme and on any domain that serves your theme, including custom domains.

Can I see checkout pages in recordings? Clarity records your Online Store pages where the theme embed runs. Shopify’s checkout is a separate, Shopify-hosted surface and is not covered by the theme app embed.

How do I cancel? Uninstall the app from your Shopify admin. Billing stops automatically through Shopify, and the app embed is removed from your theme with it.

Getting help

Email us at support@nvtrends.com — include your store’s .myshopify.com domain.
See the product overview and pricing for a feature summary.