Skip to main content

A/B Testing on Shopify

Use cases & considerations​

Shopify provides solutions for commerce businesses to build and manage all aspects of their online storefront, including product catalogue, inventory, site content, marketing, and user experience.

For experimenting with the more static aspects of the store experience (static landing pages, visual aspects), we recommend using Statsig Sidecar to both build your test treatments and to assign users to experiments when they land on your site — all without writing any code.

Customers looking to experiment on the more dynamic aspects of their online store (ie; your product catalogue, search capabilities) should use Shopify Headless Commerce and integrate our SDKs to unlock full control for experimenting within business logic.

Using Traditional Shopify + Sidecar for No-code testing​

The traditional Shopify service is a fully-managed platform for businesses that provides both a backend adminstration tool for managing your product catalogue & site content, and powers the storefront experience for your shoppers.

While Statsig does not have an integration in the Shopify App Store today, you can easily integrate Sidecar for running simple UX experiments on the storefront. The below steps will guide you through the process of setting up Sidecar within the traditional Shopify stack.

Install Sidecar chrome extension​

Follow this guide on installing the Sidecar Chrome extension. This simple, lightweight Chrome extension will allow non-technical users to build experiments and their treatments. You can easily indicate where the test should run based on URL, and then configure treatments such as content changes, style changes, image swaps, as well as injecting arbitrary JavaScript for more sophisticated use-cases where the visual editor tools cannot accommodate.

Add Sidecar JS to your Storefront's page source​

  • Log in to your Shopify dashboard
  • click on Online Store, then Themes
  • locate and click the elipses menu [...], find the Edit Code option

statsig product overview

  • Locate your Sidecar script tag and copy the script tag to your clipboard
  • Navigate to the theme.liquid file in your Shopfiy theme editor
  • Paste the Sidecar script tag toward the top of the page <head> as shown below.

statsig product overview

  • Save your theme.liquid file.
  • Sidecar is now installed across your entire website 🎉.

Configure event tracking​

Shopify's Custom Pixel framework is ideal for tracking customer events to Statsig. The custom pixel framework offers a wide set of events you can subscribe to, and namely, the ability to perform tracking during the checkout experience. Note that code deployed outside the scope of a custom pixel will not fire during checkout experience as documented here.

configure shopify pixel

Below is boilerplate custom pixel code that provides a function to send events back to Statsig. You should subscribe to the various events and event metadata necessary for your experimentation practices. This sample GTM pixel shows some of the common events and metadata that you can capture and track to Statsig.

/**
* Util function for tracking events back to statsig
*/
const statsigEvent = async (eventKey, eventValue = null, metadata = {}, userObject = {}) => {
  Object.assign(userObject, {
    customIDs: {stableID: localStorage.getItem('STATSIG_LOCAL_STORAGE_STABLE_ID')} // attach stableID automatically
  });
  await fetch('https://events.statsigapi.net/v1/log_event', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'statsig-api-key': 'client-STATSIG_CLIENT_KEY' },
    body: JSON.stringify({
      "events": [{"user": userObject, "eventName": eventKey, "metadata": metadata}]
    })
  });
}

analytics.subscribe("checkout_completed", event => {
  statsigEvent('checkout', null, {
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_viewed", (event) => {
  statsigEvent('product_viewed', null, {
    product_title: event.data?.productVariant?.title,
  });
});

For tracking behaviors in the main storefront experience, you can also leverage the following:

Using Shopify Headless + Statsig SDKs for deeper experimentation​

Using Shopify Headless gives you full control over customizing your storefront by decoupling the Shopify admin backend and the storefront application. This means that Shopify effectively serves as a data store, providing APIs to fetch & serve products, content, and manage the entire shopping experience using code.

Whether you're using Shopify's Hydrogen app and its frameworks or a custom headless stack, you can integrate Statsigs SDK as needed in order to assign users to experiments. Integrating Statsig in this architecture will follow a similiar pattern to our recommendation to integrating with headless CMS platforms.

Integrating data sources for experiment metrics​

Along with the measuring simple clickstream and point-of-sale behavior as outlined here, commerce businesses performing deeper experimentation often want to integrate offline data systems and measure experiments using existing metrics that the broader business uses.

Commonly, the Data Warehouse is the source of truth for user purchase data and other categories of offline data. This affords customers the ability to define more bespoke metrics using filtering, aggregations and incorporating other datasets in the warehouse for segmenting experiment results.