Shopify Checkout One-Page vs Three-Page: What the Data Actually Says After a Year in Production

Shopify quietly flipped one-page checkout to the default for most Plus merchants through 2024 and 2025, and by 2026 it's what almost every new store ships with. But the three-page layout is still there, still supported, and — depending on your catalogue, market, and payment mix — sometimes still the better commercial choice. We've run both across a dozen stores over the last year. Here's what actually happened.

The change in one paragraph

One-page checkout collapses contact, shipping, and payment into a single scrollable view. Three-page checkout keeps the original stepped flow: information → shipping → payment. Both run on Checkout Extensibility, both accept the same UI extensions, and both are configured from the same checkout editor. The switch is a toggle. That's it — no code change required to flip between them.

What's not the same: how buyers move through them, how your extensions render, and how much room you have to inject anything custom without hurting conversion.

What we saw in production

Across the stores we manage or advise, the pattern was messier than the marketing suggests. One-page did not universally win. Here's a rough grouping of what we observed, framed as directional ranges rather than precise lifts — every store's baseline is different, and we're not going to pretend otherwise.

Where one-page clearly helped

• Single-SKU DTC stores (supplements, cosmetics, a hero product with variants). Fewer decisions, high repeat-buyer share, Shop Pay dominance. Checkout completion rate moved up in the low single digits.
• Mobile-heavy stores in developed markets where Apple Pay / Google Pay / Shop Pay account for the majority of transactions. The express wallet flow already skipped most steps; one-page just cleaned up the fallback for the rest.
• Stores with short shipping option lists (one or two rates, no complex logic).

Where three-page held its own or won

• Cross-border stores with duties/taxes calculated after address entry. On one page, the total visibly jumps when the address is completed, and we saw abandonment spike right at that moment.
• B2B and high-AOV stores where buyers want to review shipping choices before committing to payment details. The step separation gave a psychological "you can still back out" signal.
• Emerging market stores with COD (cash on delivery), especially in MENA and parts of Southeast Asia. Splitting the flow let us insert a COD-specific confirmation step that reduced fake orders noticeably.
• Stores with heavy checkout customisation — multiple UI extensions, custom fields, gift messages, delivery date pickers. On one page, the checkout became a wall.

The honest takeaway: one-page is a better default, not a better checkout. If your store is a default store, migrate. If it isn't, test.

The engineering realities nobody talks about

The checkout editor makes this look like a UI switch. Underneath, there are a few things that will bite you.

Extension placement changes meaning

UI extensions are placed against named targets like purchase.checkout.block.render or purchase.checkout.shipping-option-list.render-after. Those targets exist in both layouts, but their visual weight is completely different. An upsell block that sits nicely between shipping and payment on three-page becomes a scroll-blocker on one-page.

We've had to rewrite extension logic to conditionally render based on layout — which Shopify doesn't expose directly, so you end up inferring it from the presence of certain targets or feature flags.

// Example: gating a post-purchase-adjacent upsell so it doesn't
// dominate a one-page checkout above the payment section.
import {
  reactExtension,
  useSettings,
  useTarget,
  BlockStack,
  Banner,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <UpsellBlock />
);

function UpsellBlock() {
  const { layout_mode } = useSettings();
  // 'compact' = we treat as one-page, hide heavy blocks
  if (layout_mode === 'compact') return null;

  return (
    <BlockStack>
      <Banner title="Add a gift wrap for $4" />
    </BlockStack>
  );
}

The layout_mode here is a merchant-controlled setting we add to the extension config. Shopify doesn't natively tell you which layout is active, so this is the cleanest workaround we've landed on.

Analytics events fire differently

The checkout_started, checkout_shipping_info_submitted, and checkout_contact_info_submitted events all still fire on one-page, but they fire in rapid succession — sometimes within the same second — because the buyer completes multiple sections without a page transition. Any funnel analysis that assumed meaningful time gaps between steps will break silently.

If you're piping events into GA4, Segment, or a warehouse, re-baseline your funnels after switching. Step-conversion rates will look like they collapsed even if actual completion is up.

Field validation runs sooner and louder

One-page validates aggressively as the buyer scrolls. If you have a custom field (VAT number, delivery instructions, tax ID) added via a UI extension, its error state now sits in the buyer's face the whole time instead of appearing on a step transition. We had to rewrite validation messages to be softer and more instructive.

A decision framework that actually works

Instead of A/B testing blindly for six weeks, we've been using this to shortcut the decision:

1. What percentage of your revenue goes through express wallets (Shop Pay, Apple Pay, Google Pay, PayPal Express)?

   • Above 50% → one-page is almost always fine, the manual flow is a minority path.
   • Below 30% → the manual flow matters a lot, test carefully.

2. Do you calculate taxes/duties post-address?

   • Yes → three-page hides the total jump behind a step transition, which is psychologically kinder.

3. How many checkout UI extensions do you run?

   • Zero to two → one-page is clean.
   • Three or more → audit them before switching; one-page can feel cluttered fast.

4. What's your AOV?

   • Under $50 → speed matters more than reassurance, lean one-page.
   • Over $200 → reassurance matters more than speed, three-page is defensible.

5. Do you offer COD or bank transfer?

   • Yes → three-page lets you separate payment-method choice from confirmation, which reduces order fraud in markets where COD is abused.

If you get three or more answers pointing to three-page, don't switch just because it's the new default.

How to test it without wrecking your baseline

Shopify doesn't natively support 50/50 splitting between one-page and three-page. So don't try to hack a client-side split — you'll corrupt your analytics and your buyers' cache.

What we do instead:

• Sequential test. Run three-page for two full weeks (including a weekend and a payday), then switch to one-page for the same period. Compare like-for-like traffic sources.
• Freeze other variables. No new apps, no shipping rate changes, no ad creative changes during the test window.
• Segment the analysis. Look at completion rate by device, by traffic source, by payment method. The aggregate number often hides the truth.
• Watch the first-time buyer cohort separately. Returning buyers on Shop Pay barely notice the change. First-time buyers do.

Two weeks each is the minimum. Anything shorter and weekday/weekend noise will dominate the signal.

The Checkout Extensibility angle

One underrated benefit of the current setup: because both layouts run on the same extensibility platform, the switch is genuinely reversible. That wasn't true in the checkout.liquid era, where reverting meant restoring a template from git and praying nothing had drifted.

If you haven't migrated off checkout.liquid yet, this is your reminder that Shopify's deprecation timeline is real, and the one-page vs three-page discussion is downstream of that migration. Get onto Checkout Extensibility first. Everything else is easier once you're there. We've written more about that transition in our e-commerce services and in earlier posts on the blog.

Where we'd start

If you're on Plus and haven't looked at your checkout layout in six months, do this in order:

1. Pull the last 90 days of checkout funnel data and segment by device and payment method.
2. Answer the five questions in the framework above.
3. If the answer is ambiguous, run the two-week sequential test — don't guess.
4. Audit every checkout UI extension you have; kill anything with under 1% engagement.
5. Only then flip the toggle, and give it a full billing cycle before drawing conclusions.

The default isn't the answer. The data from your own store is.