Skip to main content

Shopify Plus A/B testing in checkout with Kameleoon

This article explains how to run compliant A/B tests inside the Shopify Plus checkout using Kameleoon web experiments, Shopify cart attributes, and Checkout UI Extensions.

Step 1: Assign a variation via a Kameleoon web experiment​

On your cart page, use Kameleoon to assign a variation (for example, Variation A or Variation B) and persist the assignment in a cart attribute such as kameleoon-checkout-variant. This assignment ensures that the checkout can react to the variation.

Use the following JavaScript code to assign the variation and update the cart attributes:

const experimentId = 12345;
Kameleoon.API.Experiments.trigger(experimentId);
const experiment = Kameleoon.API.Experiments.getById(experimentId);
const variationName = experiment?.associatedVariation?.name;

if (variationName) {
    fetch('/cart/update.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ attributes: { 'kameleoon-checkout-variant': variationName } }),
    });
}

Step 2: Use a Shopify Checkout UI Extension​

Inside your Shopify Plus Checkout UI Extension, use the React API to read the kameleoon-checkout-variant attribute. You can then render a conditional component, such as a banner, only for specific variations.

const attributes = useAttributes();
const variant = attributes['kameleoon-checkout-variant'];

if (variant === 'Variation B') {
  return <Banner title="You unlocked free express shipping!" />;
}

Track conversions on the thank-you page​

To track conversions for users in the experiment on the order confirmation page, see the guide on Shopify checkout conversions.

Summary​

  • Assign a variation on the cart page using a Kameleoon web experiment.
  • Update the Shopify cart attributes to persist the assigned variation.
  • Use a Shopify Checkout UI Extension to read the variation and render dynamic content.
  • Track conversions on the thank-you page by following the conversions guide.

This configuration complies with Shopify Plus policies and enables valid experimentation throughout the checkout flow.