How to Integrate Hotjar with Your Shopify Store

When optimizing your Shopify store for higher conversions, understanding how visitors interact with your pages is key.

Hotjar helps you visualize user behavior through heatmaps, scroll tracking, and session recordings, so you can make informed design and content decisions.

About Hotjar

Hotjar is a popular behavior analytics and feedback tool that helps Shopify merchants understand how visitors interact with their stores.

It provides heatmaps, scroll tracking, session recordings, and feedback widgets, allowing you to identify pain points and improve the customer journey.

Hotjar enables you to:

• Visualize where users click or spend the most time on your landing pages.
• Detect design or layout issues that may affect conversions.
• Optimize elements like CTAs, banners, and product sections based on real user data.

Before You Start

Before getting started, make sure you have:

• A Hotjar account (with your tracking code ready).
• Access to your Shopify Admin.
• A published Shopify store (not a development or sandbox version).

How to Add Hotjar Tracking Code to Your Shopify?

Follow these steps to connect Hotjar to your Shopify store:

Step 1: Log in to your Hotjar account.

Step 2: From the left sidebar, go to Get set up, then click Copy code.

Step 3: In your Shopify Admin, navigate to Online Store > Themes, click on the three-dot icon, and select Edit Code from the dropdown.

Step 4: Open your theme.liquid file.

Step 5: Paste the Hotjar tracking code just before the closing </head> tag.

Once done, click Save.

How to Add Hotjar Tracking Code to GemPages?

If you’ve already added the Hotjar code to your Shopify theme, the tracking will also apply automatically to all GemPages-built pages published under the same domain.

If you want to track visitor behavior on specific GemPages-built pages, you can add your Hotjar script using the Custom Code Element.

Here’s how to do it:

Step 1: From the GemPages Dashboard, go to Pages and click on the target page to open it in the editor.

Step 2: In the GemPages Editor, use the search bar the locate the Custom Code element. Then, drag and drop the element onto your page.

Step 3: In the left sidebar, click on the Code under the Custom code section to open the code panel.

Step 4: Under the HTML/CSS tab, paste your Hotjar tracking code.

Once done, click Save and hit Publish to republish your page with the updates.

Verify Your Integration with Hotjar

To confirm that Hotjar is working correctly:

Step 1: Go to your Hotjar Dashboard to check the site status.

Step 2: You should see a green “Tracking active” indicator once your store receives traffic.

If the status shows “Not tracking,” review the points below:

• The store is still in a Shopify Sandbox environment: Hotjar does not track previews or development stores.
• The tracking script is not placed correctly: Make sure it’s added before </head> in your theme or within the Custom Code Element in GemPages.
• Your page hasn’t received any real visitor traffic yet.
• Browser caching: Clear cache or check again in Incognito mode.

For more details, refer to Hotjar’s documentation: How to install Hotjar on your Shopify site.

FAQs about Hotjar Integration

1. Can I use Hotjar in Shopify’s sandbox or preview mode?

No. Hotjar does not support Shopify Sandbox environments, including preview or development stores. You must have a live and publicly accessible store for tracking to work properly.

2. Does Hotjar automatically track GemPages pages?

If the Hotjar tracking code is added to your Shopify theme’s theme.liquid, it will also load on GemPages-built pages published under the same domain.

However, if your page uses a custom domain, subdomain, or independent publishing setup, you should manually add the code using GemPages’ Custom Code Element to ensure accurate tracking.

3. What if Hotjar doesn’t detect my site?

Ensure that:

• Your store is live (not sandbox).
• The script is placed before the closing </head> tag.
• You’ve cleared your cache or tested in Incognito mode.

If the issue persists, refer to Hotjar’s Shopify setup guide.

4. What’s the difference between Hotjar and Microsoft Clarity?

• Hotjar offers more advanced feedback tools (surveys, rage click tracking) and detailed insights for paid plans.
• Microsoft Clarity is completely free, with unlimited heatmaps and session recordings.

Refer to this article for more details about integrating Microsoft Clarity with Shopify.