Skip to main content

A/B Test Shopify Checkout Page

Shopify’s hosted checkout (/checkouts/c/...) does not run Mida’s client-side script. You cannot use the visual editor or optimize.js on the Information, Shipping, or Payment steps the way you do on product pages or the cart drawer.

You can still work on checkout in two different ways—and the plan you’re on matters.

Quick reference

What you want

Shopify Standard

Shopify Plus

A/B test PDP, cart drawer, theme (Mida script)

Yes

Yes

Track checkout & purchases in Mida

Yes

Change UI on checkout Information / Shipping / Payment

No

Yes — custom Checkout UI extension + Mida server-side assignment

Edit checkout with theme Liquid

No — does not apply to hosted checkout

No

Takeaway: “A/B test checkout” usually means one of two things—measure checkout (all plans) or change checkout UI (Plus + developer work). Say which you need before you scope the project.

Why the old advice changed

Shopify removed checkout.liquid and third-party scripts from native checkout. That’s why an older version of this article said checkout experiments weren’t possible: the old method (paste Mida into checkout) is gone.

What’s possible now:

  • Storefront experiments — unchanged; keep using Mida on the theme.

  • Checkout tracking — Customer Events / Web Pixel (setup guide).

  • Checkout UI experiments — custom Checkout UI extension on Shopify Plus, with Mida assigning variants server-side.

Some marketing lines say “test checkout” without that split. Without Plus = track checkout and test the cart/storefront. With Plus = you can also test checkout screen UI via an extension.

Path 1 — Storefront & cart (all plans)

This matches what most merchants do today: Mida in theme.liquid, experiments on PDP, collection pages, cart drawer, cart page, etc.

  • Create a normal A/B Test in Mida.

  • Use the visual editor and/or Custom JS on variants.

  • Use a Purchase revenue goal aligned with the Shopify purchase pixel.

This does not change what appears on Shopify’s hosted checkout after the customer clicks Checkout. It can still lift conversion if your hypothesis is about product page or cart behavior.

Path 2 — Track checkout & orders (all plans)

If the goal is to attribute purchases and funnel steps to experiments (including tests that only touch the storefront), set up Mida’s Shopify pixel:

That guide covers:

  • Custom pixel under Settings → Customer events

  • Project key and region (us / eu)

  • Events such as InitiateCheckout and Purchase

  • Optional Order payment webhook for backup

Install the pixel once; use it for any experiment whose goal is completed orders.

Path 3 — A/B test native checkout UI (Shopify Plus)

Use this path when you need to change what shoppers see on /checkouts/c/...—for example copy near express wallets (Shop Pay, Apple Pay, Google Pay) on the Information step.

Shopify restricts UI extensions on Information, Shipping, and Payment to Plus stores. See Shopify’s checkout UI extension docs.

What Mida provides

  • Server-side Test in the dashboard (experiment key, variants, goals).

  • Assignment API — Node SDK (mida-node) or POST /experiment/query with project key, experiment key, and a stable distinct_id.

  • Results in the Mida dashboard when goals fire (via pixel/webhook for Purchase).

What you build (Mida does not ship this)

  • A Shopify app with a Checkout UI extension that:

    • Calls Mida to get Control, Variant 1, etc.

    • Renders different UI (banner, block, messaging) for each variant.

    • Uses Shopify-approved targets (e.g. blocks on the Information step, areas near wallets—confirm placements in Settings → Checkout → Customize).

Mida does not offer a ready-made “Mida checkout” extension. Your team or agency owns the app, deploy, and QA.

Suggested implementation flow

  1. Create a Server-side Test in Mida; copy the experiment key and set a Purchase goal.

  2. On the storefront (optional but common): in a client-side test, use variant Custom JS to set a cart attribute when someone is bucketed, and/or rely on the same distinct_id (e.g. optimize_uuid) end-to-end.

  3. In the extension: read the cart attribute and/or call getExperiment(experiment_key, distinct_id) (enable network access on the app if the extension calls Mida directly).

  4. Render treatment vs control UI in the extension.

  5. Ensure the purchase pixel is connected so conversions count.

Express wallet tests (Information step)

Many teams want to “promote” Shop Pay / Apple Pay / Google Pay on Information. Plan with two constraints:

  • Plus + extension is required for custom UI on that step.

  • Native wallet buttons are controlled by Shopify; you may be able to add surrounding copy or blocks, but moving or replacing built-in wallet UI may not be allowed. Validate the design in the checkout editor before you build the experiment.

What does not work

  • Pasting optimize.js into checkout.liquid (deprecated; not supported on extensible checkout).

  • Expecting theme Liquid (cart.liquid, sections) to change the hosted checkout page—it only affects theme-rendered pages.

  • Using cart attributes + Liquid alone to A/B test the Information step—you still need a Plus checkout extension for that UI.

  • Treating Customer Events pixel as a substitute for a UI test—it tracks events; it does not assign variants or render treatments on checkout.

Did this answer your question?