Session Replay for Shopify Stores

To add Shopify session replay with AnyReplay, paste one script tag into your theme's layout/theme.liquid file, inside the <head>. From then on AnyReplay records your storefront, from the home page through collections, product pages and the cart, up to the point a visitor enters Shopify's checkout.

Why record sessions on your Shopify store

Store analytics tell you how many visitors reached the cart and how many left. Shopify session recording shows what happened in between: the variant picker someone tapped four times, the size guide that never opened on a phone, the discount field that confused a returning customer. Watching a handful of sessions from the pages that lose people is often the quickest way to find out why. Why users abandon checkout and form abandonment cover what to look for.

How to add session replay to Shopify

<script>
(function (w, d) {
  w.anyreplay = w.anyreplay || function () {
    (w.anyreplay.q = w.anyreplay.q || []).push(arguments);
  };
  var s = d.createElement('script');
  s.async = 1;
  s.src = 'https://cdn.anyreplay.com/v1/ar.min.js?k=YOUR_PROJECT_KEY';
  d.head.appendChild(s);
})(window, document);

anyreplay('init', {
  projectKey: 'YOUR_PROJECT_KEY',
  ingestUrl: 'https://in.anyreplay.com',
  // Stop recording after this many sessions in a calendar month.
  // maxSessionsPerMonth: 10000,
  // Form fields are masked: what visitors type replays as asterisks.
  // Passwords, one-time codes and card fields are masked either way.
  // Uncomment the first line to record what visitors type, or the
  // second to hide rich-text editors too.
  // maskAllInputs: false,
  // maskAllTyping: true
});
</script>

1. Duplicate your theme

   In the Shopify admin, open Online Store → Themes and make a copy of your live theme first, so you can go back if anything goes wrong.

2. Open the theme code

   From the live theme's menu choose Edit code, then open layout/theme.liquid under Layout.

3. Paste the snippet

   Paste the snippet just before the closing </head> tag, with YOUR_PROJECT_KEY replaced by your key, and save.

4. Load your store

   Open the storefront in a new tab and browse a few pages. The setup page in AnyReplay switches to Connected once the first events arrive.

The snippet lives in the theme, not in your store settings. If you switch themes or install a theme update that replaces theme.liquid, add it again. Shopify's admin menus change from time to time, so check their help centre if a name above has moved. The script tag guide explains every line of the snippet.

Which pages are recorded (and which are not)

AnyReplay records every page your theme renders: the home page, collections, product pages, search, the cart page, and classic customer account pages if your theme renders them. It does not record Shopify's checkout, and account pages that Shopify hosts itself rather than your theme do not run the snippet either; check a test session to see which of your pages are covered. Checkout pages do not run scripts added to theme.liquid, and Shopify's custom pixels, added under Settings → Customer events, run in a sandbox that cannot read the page itself. A DOM recorder needs the page, so a recording ends where checkout begins.

A cart drawer that slides open does not change the URL, so it is not recorded as a navigation. Mark it with a custom event and you can filter sessions by it:

anyreplay('track', 'cart_opened');

How do I keep customer data out of recordings?

Out of the box every value a shopper types, in cart notes, address fields and login forms, replays as asterisks of the same length. To see what shoppers typed, add maskAllInputs: false to the init options. Some fields are masked whatever you set — passwords and one-time codes, payment card fields, IBANs and sort codes, any value of 13 to 19 digits that passes the card-number check, and a half-typed card number past its sixth digit. Email and telephone fields are not among them: they are ordinary fields, masked by default and recorded once you opt out. Text that Liquid prints onto the page is not an input, though. On account and order pages, add class="ar-mask" to the element that outputs a name, email or address, or ar-block to remove an element from the recording entirely. Masking happens in the visitor's browser before anything is sent. See masking.

<p class="ar-mask">{{ customer.first_name }} {{ customer.last_name }}</p>
<p class="ar-mask">{{ customer.email }}</p>

Consent banners on Shopify

If you need consent before recording, add requireConsent: true to the init options. Nothing is recorded or sent until anyreplay('consent', true) runs, and AnyReplay does not remember the choice, so call it on every page load for visitors who have agreed. How you hook that call up depends on your consent banner or app; check its documentation for a callback, or use Google Tag Manager's consent trigger. Consent has the patterns.

Allowed domains

If your project restricts allowed domains, AnyReplay checks each request's Origin header against that list. Add your custom domain, and also your myshopify.com domain if visitors or your team browse the store there.

How do I check it is working?

• The project's setup page switches to Connected after the first accepted event.
• In the browser's network panel, requests to in.anyreplay.com should be answered with 202.
• Add debug: true to the init options to see in the console why the recorder is not recording.
• Still nothing? Work through no sessions, and allow the AnyReplay hosts if your store sends a Content Security Policy.

Frequently asked questions