Home Guides Inspectlet for Shopify
Integrations

Inspectlet for Shopify: Setup, Features & Best Practices

Your Shopify store generates thousands of sessions, but Google Analytics only tells you what happened—not why. Session recording, heatmaps, and form analytics show you exactly how shoppers interact with your products, cart, and checkout so you can fix friction and increase revenue.

13 min read Updated April 2026 By Inspectlet Team
Key Takeaways
  • Install Inspectlet on Shopify in under five minutes via the Shopify app (automatic) or a manual snippet in your theme.liquid file
  • Tag sessions with customer IDs, order values, and product categories using Shopify’s Liquid template variables for powerful segmentation
  • Use conversion funnels to trace the exact path from product page → cart → checkout → confirmation and pinpoint where shoppers abandon
  • Heatmaps on product pages reveal which images, descriptions, and CTAs actually get attention—and which get ignored
  • Payment fields are automatically masked. Combine Inspectlet’s privacy controls with Shopify’s built-in consent banner for full GDPR compliance

Why Shopify Stores Need Session Recording

Shopify gives you a polished storefront, but the default analytics only scratch the surface. You can see that 68% of shoppers abandoned their cart last month, but you can’t see why. Did they hit a confusing shipping calculator? Did a discount code fail? Did the mobile checkout form cut off their address field?

Session recording fills this gap by capturing every mouse movement, scroll, click, and form interaction in a replayable video. Instead of guessing at the cause behind a drop-off metric, you watch the actual session and see the problem firsthand. For ecommerce stores specifically, the payoff is immediate: every friction point you remove translates directly into recovered revenue.

Heatmaps add another dimension. A click heatmap on your product page shows whether shoppers are clicking the size guide, reading reviews, or scrolling past your value propositions entirely. Scroll heatmaps reveal how far down the page visitors actually get—critical when your "Add to Cart" button is below the fold on mobile.

Shopify stores benefit from session recording for ecommerce more than most sites because the user journey is transactional and linear. Every visitor is either moving toward a purchase or dropping off, and the path (browse → product → cart → checkout → confirmation) creates natural funnel stages you can measure and optimize.

Two Ways to Install Inspectlet on Shopify

There are two installation paths depending on your preference: the Shopify app (fastest) or a manual code snippet (more control).

Method 1: Shopify App Install (Recommended)

The Inspectlet Shopify app handles everything automatically. When you install the app from the Shopify App Store, it provisions your Inspectlet account, injects the tracking script into your store, and sets up single sign-on so you can access your Inspectlet dashboard directly from Shopify admin.

  1. Find Inspectlet in the Shopify App Store and click Install
  2. Authorize the app permissions when prompted
  3. Inspectlet creates your account and begins recording sessions immediately
  4. Access your dashboard via the Inspectlet app in your Shopify admin sidebar, or log in at inspectlet.com—the Shopify SSO handles authentication automatically

The app install is the right choice for most merchants. The tracking script is added to every page of your store automatically, including product pages, collection pages, cart, and the portions of checkout that Shopify allows script injection on.

Method 2: Manual Snippet in theme.liquid

If you prefer manual control—or you’re managing multiple analytics scripts with a tag manager—you can add the Inspectlet tracking code directly to your theme.

  1. In Shopify admin, go to Online Store → Themes → Edit code
  2. Open the theme.liquid file (under Layout)
  3. Paste the Inspectlet snippet inside the <head> tag, before the closing </head>
<!-- Inspectlet tracking code -->
<script type="text/javascript">
(function() {
  window.__insp = window.__insp || [];
  __insp.push(['wid', YOUR_SITE_ID]);
  var ldinsp = function(){
    if(typeof window.__inspld != "undefined") return;
    window.__inspld = 1;
    var insp = document.createElement('script');
    insp.type = 'text/javascript';
    insp.async = true;
    insp.id = "inspsync";
    insp.src = ('https:' == document.location.protocol ? 'https' : 'http')
      + '://cdn.inspectlet.com/inspectlet.js?wid=YOUR_SITE_ID&r='
      + Math.floor(new Date().getTime()/3600000);
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(insp, x);
  };
  setTimeout(ldinsp, 0);
})();
</script>

Replace YOUR_SITE_ID with your actual Inspectlet site ID (found in your dashboard under Settings). The script is fully asynchronous and non-blocking—it won’t affect your store’s page load speed. It works with every Shopify theme: Dawn, Debut, custom themes, and third-party themes.

Performance Note

The tracking script loads asynchronously after the page renders, so it has zero impact on your Shopify store’s Lighthouse score or Core Web Vitals. Shopify themes use traditional page loads (not a single-page app architecture), so Inspectlet captures each page navigation automatically without any extra configuration.

Setting Up Inspectlet for Shopify

The basic install gives you session recordings and heatmaps out of the box. But the real power comes from connecting Inspectlet to your Shopify data—customer IDs, order values, product categories—so you can segment sessions by business metrics, not just page views.

Identifying Logged-In Customers

When a customer is logged into your store, you can pass their identity to Inspectlet so you can search for their specific sessions later. Add this below your Inspectlet tracking snippet in theme.liquid:

{% if customer %}
<script type="text/javascript">
  window.__insp = window.__insp || [];
  __insp.push(['identify', '{{ customer.email }}']);
</script>
{% endif %}

Now you can search for any customer’s sessions by email address in your Inspectlet dashboard. When a customer emails support saying “I couldn’t complete my order,” you can pull up their exact sessions and see what went wrong.

Session Tagging with Liquid Variables

Session tags let you attach structured data to recordings so you can filter and analyze sessions by business context. Shopify’s Liquid template engine makes this straightforward. Add these tags in theme.liquid or in specific templates where the data is available:

{% if customer %}
<script type="text/javascript">
  window.__insp = window.__insp || [];
  __insp.push(['tagSession', {
    customer_id: '{{ customer.id }}',
    customer_tags: '{{ customer.tags | join: ", " }}',
    total_spent: '{{ customer.total_spent }}',
    orders_count: '{{ customer.orders_count }}'
  }]);
</script>
{% endif %}

On product pages, you can tag which product the visitor is viewing. In your product.liquid or main-product.liquid section:

<script type="text/javascript">
  window.__insp = window.__insp || [];
  __insp.push(['tagSession', {
    product_title: {{ product.title | json }},
    product_type: {{ product.type | json }},
    product_vendor: {{ product.vendor | json }},
    product_price: '{{ product.price | money_without_currency }}'
  }]);
</script>

On the order confirmation page (thank_you.liquid or via Shopify’s Additional Scripts setting under Settings → Checkout):

{% if first_time_accessed %}
<script type="text/javascript">
  window.__insp = window.__insp || [];
  __insp.push(['tagSession', {
    order_id: '{{ order.order_number }}',
    order_total: '{{ order.total_price | money_without_currency }}',
    order_items: '{{ order.line_items.size }}',
    payment_method: {{ order.transactions[0].gateway | json }}
  }]);
</script>
{% endif %}

With these tags in place, you can filter your Inspectlet dashboard to show only sessions where the order total exceeded $100, or sessions from repeat customers, or sessions involving a specific product category. This transforms session replay from a diagnostic tool into a revenue analytics tool.

Five Shopify-Specific Workflows

Here are the highest-impact ways to use Inspectlet on a Shopify store, based on patterns we see across thousands of ecommerce sites.

1. Checkout Optimization with Form Analytics

Checkout is where the money is. A 5% improvement in checkout completion on a store doing $50,000/month in revenue means an extra $2,500/month—$30,000/year—from a single optimization.

Inspectlet’s form analytics auto-detects checkout form fields and tracks field-level metrics: how long shoppers spend on each field, which fields they leave blank, which fields they correct, and which field is active when they abandon the page entirely.

Common findings on Shopify checkout forms:

Watch the session recordings of shoppers who abandoned at each field to understand the why behind the metric. The combination of field-level data and video replay gives you the complete picture.

2. Product Page Engagement with Heatmaps

Your product pages are the most important pages on your store, and heatmaps reveal exactly how shoppers interact with them. Set up click heatmaps and scroll heatmaps on your top-traffic product pages to answer these questions:

Run heatmaps on both desktop and mobile separately. Shopify stores typically see 60–75% mobile traffic, and the mobile layout often pushes key conversion elements below the fold. What looks great on desktop might be invisible on a phone.

3. Cart Abandonment Diagnosis

Cart abandonment rates on Shopify stores typically range from 60% to 80%. The number itself isn’t actionable—what matters is understanding the specific friction points causing each abandonment.

Set up a conversion funnel in Inspectlet with these steps:

  1. Product page — /products/*
  2. Cart — /cart
  3. Checkout — /checkouts/*
  4. Order confirmation — /thank_you or /orders/*

The funnel shows you exactly what percentage of shoppers drop off at each stage. Click into any stage to watch the recordings of shoppers who abandoned at that step. After watching 15–20 abandonment sessions, clear patterns emerge: unexpected shipping costs at checkout, confusing variant selectors on the product page, a broken “Apply Discount” button, or simply a slow-loading cart page on mobile.

See Where Shoppers Drop Off

Build funnels from product to purchase and watch the sessions where shoppers abandon.

Try Free

4. JavaScript Error Detection

Shopify stores often run 5–15 third-party apps (reviews, upsells, loyalty programs, chat widgets), and these apps inject JavaScript into your storefront. When they conflict with each other or with your theme’s code, things break silently. A customer clicks “Add to Cart” and nothing happens. The checkout payment form throws an error. A popup blocks the entire page on mobile.

Inspectlet’s error logging captures every JavaScript error that occurs during a session, tied directly to the session recording. You can filter sessions by error occurrence, see the exact error message and stack trace, and watch the recording to see the user impact. This is particularly valuable after installing or updating a Shopify app—new errors often surface within hours, and you can catch them before they affect hundreds of customers.

5. Mobile Shopping Experience

Most Shopify stores see the majority of their traffic from mobile devices, but conversion rates on mobile are typically 40–60% lower than desktop. Session replay explains why.

Filter your Inspectlet sessions by device type and watch mobile-specific behaviors: pinch-to-zoom on product images (a sign the images are too small), horizontal scrolling on pages that shouldn’t scroll horizontally, tapping tiny buttons that are too close together, struggling with dropdown menus that weren’t designed for touch, and waiting for pages that load slowly on cellular connections.

Combine mobile session recordings with mobile-specific heatmaps. The layout differences between desktop and mobile Shopify themes mean that a well-optimized desktop experience can be deeply frustrating on a phone. You need to analyze them separately to optimize each properly.

A/B Testing on Shopify

Inspectlet’s A/B testing lets you test changes to your Shopify store without editing theme code. You can test variations of product page layouts, CTA button text and color, pricing display formats, product image arrangements, and collection page sorting.

What makes A/B testing especially effective with session recording is that you can watch sessions from each variant to understand why one performs better. If variant B has a 12% higher conversion rate, watching the recordings shows you the behavioral difference: maybe shoppers in variant B scrolled further, engaged with more images, or hesitated less at the CTA.

Practical tests to run on Shopify stores:

Privacy and Compliance for Shopify Stores

Ecommerce sites handle sensitive data—payment information, addresses, contact details—and Inspectlet is built to handle this safely.

Automatic payment field masking: Credit card numbers, CVV fields, and other payment inputs are automatically excluded from recordings. You never need to configure this—it works out of the box on Shopify’s checkout.

Sensitive field class: For other fields that contain personal data (email, phone, address), add the inspectlet-sensitive class to the input element or its container. In your Shopify theme templates:

<input type="email" name="contact[email]"
  class="inspectlet-sensitive"
  placeholder="Email address">

Fields with this class are masked in recordings—you see that the user typed something, but the actual characters are replaced with asterisks.

GDPR cookie consent: If your store uses Shopify’s built-in cookie consent banner (or a third-party consent management app), you can configure Inspectlet to only start recording after the visitor provides consent. Delay the Inspectlet script initialization until consent is granted:

<script type="text/javascript">
  document.addEventListener('shopify:consent:collected', function(e) {
    if (e.detail && e.detail.analytics) {
      window.__insp = window.__insp || [];
      __insp.push(['wid', YOUR_SITE_ID]);
      var ldinsp = function(){
        if(typeof window.__inspld != "undefined") return;
        window.__inspld = 1;
        var insp = document.createElement('script');
        insp.type = 'text/javascript';
        insp.async = true;
        insp.id = "inspsync";
        insp.src = 'https://cdn.inspectlet.com/inspectlet.js?wid=YOUR_SITE_ID&r='
          + Math.floor(new Date().getTime()/3600000);
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(insp, x);
      };
      setTimeout(ldinsp, 0);
    }
  });
</script>

For stores with customers in the EU, California (CCPA), or other regulated jurisdictions, this consent-gated approach keeps you compliant. See our full guide on visitor recording privacy for more details on data handling, retention, and compliance.

Data Processing

Inspectlet never captures passwords, and payment fields are excluded automatically. Session data is encrypted in transit and at rest. You control data retention periods in your Inspectlet dashboard settings.

Shopify Plus Considerations

Shopify Plus merchants get access to additional features that enhance the Inspectlet integration:

Common Shopify + Inspectlet Issues and Fixes

Recordings Not Appearing

If you’ve installed the snippet but don’t see recordings after 15–20 minutes, check these common causes:

AJAX Cart Updates Not Captured

Many Shopify themes use AJAX to update the cart without a full page reload (the “Add to Cart” button updates a slide-out cart, for example). Inspectlet detects these dynamic content changes automatically. If cart interactions aren’t appearing in recordings, make sure you’re on the latest version of the tracking script—the Shopify app install handles this automatically, but manual snippets should be updated if they were installed more than a year ago.

Limited Checkout Tracking

Standard Shopify stores (non-Plus) have restrictions on third-party scripts in the checkout. Inspectlet records everything up to the checkout page, and captures the order confirmation page (via the Additional Scripts setting). Shopify Plus merchants can inject scripts throughout the full checkout flow using checkout extensibility.

Third-Party App Conflicts

If you notice that Inspectlet recordings look incomplete or a specific page doesn’t record properly, a third-party Shopify app might be causing JavaScript errors that interfere with recording. Check the Inspectlet error log for that page. The most common culprits are older review apps, aggressive popup apps, and custom product customizer tools. Updating the conflicting app or adjusting its load order usually resolves the issue.

Frequently Asked Questions

Does Inspectlet slow down my Shopify store?

No. The tracking script loads asynchronously after your page content renders. It doesn’t block rendering, doesn’t add to your critical rendering path, and has no measurable impact on page load time or Core Web Vitals. Shopify’s own speed report will not show any degradation from Inspectlet.

Can I record checkout pages on Shopify?

On standard Shopify plans, you can record all pages up to checkout and the order confirmation page (thank-you page). Shopify restricts third-party JavaScript on checkout pages for security. Shopify Plus merchants can use checkout extensibility to run Inspectlet through the full checkout process.

Does it work with headless Shopify (Hydrogen)?

Yes. If you’re using Shopify’s Hydrogen framework or another headless frontend, install the Inspectlet snippet in your frontend application’s <head> component. Since Hydrogen is a React-based SPA, you’ll want to use virtual page views to track client-side navigation: __insp.push(['virtualPage']) on route changes.

How many sessions can I record?

This depends on your Inspectlet plan. The free plan includes 2,500 recorded sessions per month, which is sufficient for stores with moderate traffic. Higher-tier plans support tens of thousands to unlimited sessions. If your traffic exceeds your plan limits, Inspectlet automatically samples sessions to stay within your quota while maintaining representative data.

Can I use Inspectlet with Shopify POS?

Inspectlet records web sessions only—it tracks visitors on your online Shopify store. In-person transactions through Shopify POS are not recorded, as they don’t occur in a web browser.

How do I record sessions from a specific marketing campaign?

Use session tagging to capture UTM parameters. Add this to your theme.liquid:

<script type="text/javascript">
  var params = new URLSearchParams(window.location.search);
  var utm_source = params.get('utm_source');
  if (utm_source) {
    window.__insp = window.__insp || [];
    __insp.push(['tagSession', {
      utm_source: utm_source,
      utm_medium: params.get('utm_medium') || '',
      utm_campaign: params.get('utm_campaign') || ''
    }]);
  }
</script>

Then filter sessions in your Inspectlet dashboard by the UTM tags to watch how visitors from specific campaigns behave on your store.

Related Guides
Ecommerce

Session Replay for Ecommerce

The complete guide to using session replay to increase ecommerce revenue and reduce cart abandonment.
Analytics

Form Analytics Guide

Discover which form fields cause drop-offs and how to optimize every step of your checkout.
Analytics

Conversion Funnels Guide

Build funnels to trace user journeys and pinpoint exactly where visitors abandon your conversion path.
Getting Started

How to Record Website Visitors

Step-by-step guide to setting up visitor recording on any website in under five minutes.
Privacy

Visitor Recording Privacy

How to use session recording responsibly with GDPR, CCPA, and other privacy regulations.
Features

Session Replay

Watch real visitors navigate your website. See every click, scroll, and interaction as it happened.

Turn Shopify Traffic into Revenue

Watch real shoppers navigate your store. See where they hesitate, where they abandon, and exactly what to fix to increase conversions.

Get Started Free