Checkout & conversion11 min readUpdated October 14, 2026

One-Page Checkout vs Multi-Step: What Actually Changes

One-page vs multi-step checkout: what really differs, when each fits, how Shopify, WooCommerce and Stripe do it, and how to A/B test the two.

Nick Bonnassies, CMO at Tagada · checked against 14 sources

Article summary

TL;DR

A one-page checkout puts contact, shipping and payment on a single scrollable page, with the order summary beside them. A multi-step checkout splits them into separate pages. Neither wins by default: Baymard's research points at what each step asks of the buyer, not the page count. Pick by catalog and shipping complexity, then A/B test.

One page means fewer page loads, not fewer fields. Field count and clarity drive the experience.
Shipping rates that depend on the address are the hardest part of a one-page layout: the page has to update live.
Multi-step makes step-by-step analytics and early email capture easier. On one page, fire an event per completed section.
Shopify's one-page layout is the default, WooCommerce's Checkout block is one page, Stripe Checkout is one page.
Test both versions with the same fields and payment methods, or the test measures the cleanup, not the layout.

Want to go further? Ask

On this page

A one-page checkout puts contact, shipping and payment on a single page. A multi-step checkout spreads them over several. The debate is old, and the answer isn't a layout: it depends on how many fields you ask for, how your shipping is priced and what the buyer must see before paying. For supplement and skincare brands: checkout for supplement brands and checkout for skincare brands.

What is a one-page checkout?

Shopify gives the cleanest definition: a one-page checkout "displays all checkout steps (information, shipping, and payment) on a single scrollable page", with the order summary beside them. A three-page checkout "separates checkout into distinct pages for information, shipping, and payment."3

Both collect the same information. Shopify says it outright: the one-page layout collects the same data as the three-page one, and the same checkout analytics are available in the admin.1 What changes is how the buyer moves through it.

Fig. 1Same fields, two paths

One-page checkout

CartItems and subtotal
CheckoutContact, shipping, payment, summary beside
ConfirmationOrder placed

One page load after the cart

Multi-step checkout

InformationEmail and address
ShippingMethod and cost
PaymentCard, wallet, review

Three page loads after the cart

the fields don't change, the page loads do

Based on Shopify's description of its one-page and three-page layouts.

Between the two sits the accordion checkout: one or two pages, with sections that open one at a time. More on it below.

One-page vs multi-step checkout: what actually differs

	One-page checkout	Multi-step checkout
Page loads after the cart	One	One per step, usually three
Perceived length	Every field visible at once: short forms look short, long forms look like a wall	Each screen looks light, but the buyer doesn't see the end
Shipping rates that depend on the address	The shipping section must refresh live once the address is complete	Rates are calculated between steps, on the next page load
Error handling	Errors can pile up on one submit unless validated inline	Each step is validated before the next one
Analytics per step	Needs an event per completed section	A page view per step comes for free
Email captured before payment	Only if email is the first field and you save it as typed	Usually yes: email is step one, usable for recovery
Room for an offer before payment	Tight: an upsell competes with the form	A step can carry an offer without crowding the form
Browser Back button	Leaves the checkout unless you handle it	Returns to the previous step

Verdict

The layout changes the page loads, the error timing and what you can measure. It doesn't change the number of fields. A 25-field one-page checkout is still a 25-field checkout.

Stripe lists the same trade-off in its own comparison: one page is the fastest option because it cuts clicks and page loads, but its biggest risk is putting too much on one screen; multi-step makes drop-offs easier to locate and lets you capture an email early for recovery.8

What the research says about one-page checkout UX

The most cited source in this debate is a 2011 Baymard Institute article by Christian Holst. It doesn't crown a winner. In Baymard's checkout usability testing, buyers had relatively few problems moving between steps when a few simple guidelines were followed.9

The usability issues were primarily caused by what the customer had to do at each step.

Baymard Institute, Christian Holst, April 26, 2011

The same article explains why so many A/B tests show one page winning: they often compare a non-optimized multi-step checkout with a newly optimized one-page checkout. Holst's conclusion is that a one-page checkout won't necessarily beat a well-optimized multi-step one, but that the one-page goal makes it easier to agree on cutting fields and features.9

What Baymard measures today is the load inside the checkout, not the number of pages.11

23.48

Form elements shown by default in the average US checkout (14.88 counting only form fields)

12-14

Form elements an ideal checkout can get down to (7-8 form fields)

17%

Of US shoppers who abandoned for a reason other than browsing, share citing a too long or complicated checkout

Source for all three: Baymard Institute, cart abandonment rate statistics, updated September 22, 2025. The 17% is a share of US online shoppers who abandoned for a reason other than "just browsing", not of all shoppers.11 In that same survey, the top reason was extra costs (40%), and 12% said they couldn't see or calculate the total order cost up front. Both are fixed by showing costs early, whatever the layout.

About the conversion lifts you'll read elsewhere

Figures like "one-page converts 61% vs 56%" or "+5 to 15%" circulate on vendor blogs without a published test, sample or date behind them. We found no named primary study that supports a general one-page lift, so we don't repeat any. Your own A/B test is the only number that applies to your store.

Shipping rates: where one page gets harder

On a multi-step checkout, the address is submitted, the server calculates shipping rates, and the next page shows them. On a single page there's no next page: the shipping section has to update in place as soon as the address is complete, and the total has to follow.

Stripe's documentation shows what that takes.7

Fig. 2Live shipping rates on one page

Address completeThe form fires a change event
callsYour serverCalculates the options for that address
updatesSession updatedNew shipping options and total
returns toPage refreshesBuyer picks a method, then pays

no page load, so the server call happens mid-form

Based on Stripe Docs, Dynamically customize shipping options (embedded form). Illustrative sequence.

Hosted page: Stripe's full hosted Checkout page doesn't support dynamically customizing shipping options. You need the embedded form or Elements for that.7
Embedded form: your server recalculates rates when the address changes. The update call has a 20-second timeout, and the form shows no loading indicator while options update, so the calculation has to be fast.7
Wallets: Apple Pay and Google Pay collect the shipping address themselves and bypass that server-side update flow.7
Subscriptions: Stripe Checkout shipping rates aren't available in subscription mode.7

If your rates are flat or free, none of this matters and one page is easy. If they vary by zone, weight, carrier quote or order total, check that your platform refreshes them live before choosing a one-page layout.

Accordion checkout: the middle option

An accordion checkout keeps everything on one or two pages but opens sections one at a time. Baymard's 2023 research found that buyers perceive it as a multi-step process, and that it feels less intimidating than separate pages.10 It also found two recurring mistakes.

Collapse finished sections into summaries
Many sites showed only the section header once a step was done, so buyers had to reopen it to check what they typed. Show a summary of the entered data instead: test participants routinely scanned those summaries.
Make Back go back one section
Buyers hit the browser Back button to return to a previous section and landed in the cart. On a single-page checkout, use the History API (pushState) so Back returns to the previous section.
Keep a review moment
Accordions often drop the separate review step a multi-step checkout has. Baymard calls that review critical for buyers to verify their data.

Error handling on one page

A one-page form submitted with three mistakes shows three errors at once, often above and below the fold. A multi-step form catches them one screen at a time. The fix is the same in both cases: validate each field as the buyer leaves it, not on submit.

Buyer clicks Pay, nothing seems to happenThe error is in a section scrolled out of viewScroll to the first error and focus it
Address rejected after the card is typedValidation runs only on submitValidate the address when the field loses focus
Card declined, form reloads emptyThe page reloads instead of updatingKeep every field filled, show the decline next to the card
Shipping total changes after PayRates weren't refreshed when the address changedRecalculate before enabling the Pay button

A declined card isn't a layout problem, but on one page it looks like one: the buyer is still on the same screen with a red line. Baymard's survey puts declined cards at 10% of US shoppers who abandoned for a reason other than browsing.11 Clear decline messages are covered in our checkout optimization guide.

Can you see where buyers drop off on one page?

Yes, but you have to set it up. Stripe notes that multi-step checkouts make it easier to find where buyers leave, while a one-page layout needs form analytics or session recordings.8 In GA4, the checkout funnel is built on events, not page views, so the same events work on one page if you fire them at the right moment.12

GA4 event	What Google says it means	When to fire it on a one-page checkout
`begin_checkout`	A user has begun a checkout	When the checkout page loads
`add_shipping_info`	A user has submitted their shipping information	When the shipping section is complete and a method is selected
`add_payment_info`	A user has submitted their payment information	When payment details are submitted, before the authorization result
`purchase`	One or more items is purchased	On the confirmation, once the payment succeeds

On Shopify, the one-page layout keeps the same checkout analytics in the admin as the three-page one.1 How to turn these events into a rate per step is in our guide to checkout abandonment rate.

When to choose one page, when to choose multi-step

Your situation	Lean toward	Why
One or a few products, flat or free shipping	One page	Few fields, nothing to recalculate mid-form
Mostly returning or wallet buyers	One page	Saved details and wallets fill most of the page
Large catalog, many shipping options by zone or carrier	Multi-step or accordion	Rates depend on the address, and each choice needs room
Mostly mobile traffic	Either, tested on the phone	A long single page means scrolling; extra steps mean page loads on a slow network
High price or considered purchase	Multi-step or accordion	Buyers take time and want to check each choice before paying
You rely on email recovery	Multi-step, or email first on one page	Capturing the email before payment feeds abandoned-checkout emails
Subscription or free trial	Either, with the terms beside the payment fields	The terms must be visible before billing details are taken

Stripe's own guide draws the same line: low-cost, quick-decision purchases suit one page, high-value or highly configurable ones suit multi-step.8 Whether the buyer checks out as a guest changes the field count too: see checkout as guest.

Subscriptions: the terms go before the card field

In the US, ROSCA requires an online negative option offer to clearly and conspicuously disclose all material terms before obtaining the consumer's billing information, and to get express informed consent before charging.13 Visa's rules require the subscription terms to be shown at the moment of consent, separately from the general terms and conditions.14 On a one-page checkout the card field is visible from the start, so the price, frequency, trial end and cancellation terms must sit above or next to it, never in a collapsed section. The full rule set is in our guide to negative option billing.

One-page checkout examples: Shopify, WooCommerce, Stripe

The three platforms most DTC brands start on all ship a one-page checkout today.

Platform	One-page checkout	How to switch	Worth knowing
Shopify	Default layout. Three-page available	Settings > Checkout > Edit configuration > gear icon > Checkout layout	Customizations carry over; the one-page header differs, so a background image may need replacing; Shop Pay and other accelerated flows always use one page
WooCommerce	The Checkout block, default for stores started after 8.3 (November 2023)	Transform the block back to "Classic Shortcode" from the block toolbar	Established stores must opt in; incompatible extensions may hide checkout elements
Stripe Checkout	The full payment page (hosted or embedded) and the embedded form are single pages	Choose the UI when you build the Checkout Session	The full page includes an order summary with cross-sells, upsells and free trials; dynamic shipping rates need the embedded form or Elements

Sources: Shopify Help Center, Shopify Changelog and Shopify.dev; WooCommerce Docs; Stripe Docs.1 2 3 4 5 6

Shopify. By default, the checkout layout is one-page, and you can switch to three-page from the admin.1 Since November 16, 2023, merchants on Basic, Shopify and Advanced plans can choose between the one-page checkout, marked as the default, and the three-page checkout; Plus merchants set it in the checkout editor.2 When you switch, the editor preview doesn't update in real time: save, then open the live checkout. The one-page layout also adds new wording to the theme content editor, so check any custom translations.1

WooCommerce. The Checkout block holds two inner blocks: Checkout Fields (express checkout, delivery, shipping address, terms and conditions, actions) and Checkout Totals (order summary, coupon form, costs).5 Established stores don't move to blocks automatically; WooCommerce gives steps to opt in.4

Stripe Checkout. Stripe offers three UIs on the Checkout Sessions API: a full page, hosted by Stripe or embedded, which Stripe recommends; an embedded form on your site; and Elements for a fully custom page.6 Only the full page shows a complete order summary with cross-sells, upsells and trials.

How these layouts fit into the whole path, from cart to webhook, is covered in our checkout flow guide, and the page itself (fields, trust elements, error states) in checkout page design.

How to A/B test one-page vs multi-step checkout

Stripe's advice is to split traffic, half on each version, and compare completion rate, average order value and where buyers leave.8 Baymard's caveat tells you what to keep equal.9

Freeze everything but the layout. Same fields, same payment methods, same shipping options, same copy. Otherwise you're testing a cleanup, not a layout.
Pick one primary metric. Completed orders divided by checkouts started. Define it before launch. The formula is in checkout abandonment rate.
Track the secondary ones. Average order value, drop per section, time to complete, and the share of attempts that end in a decline: a decline looks like abandonment in analytics.
Split by device. Read mobile and desktop separately. A layout can win on one and lose on the other.
Run full weeks. Weekend and weekday buyers behave differently. Stop on a sample size you set in advance, not on the first good day.
Check the payments side. Compare authorization rates and 3D Secure completion between the two versions before you call a winner.

If a true split isn't possible on your platform, compare before and after, and correct for sales, seasonality and traffic spikes, as Stripe recommends.

On Shopify, the layout is a setting of the checkout configuration. Check that your testing tool can serve both layouts at the same time before planning a split; if it can't, use a before-and-after comparison. What A/B testing involves in general is in our A/B testing guide.

Tagada's checkout

How Tagada helps

Tagada: a checkout you can test, with upsells built in

Tagada is an ecommerce platform for direct-to-consumer brands. Its checkout supports one-click upsells, order bumps, A/B tests, Apple Pay and Google Pay. It runs standalone, with Shopify, with WooCommerce or headless. Payments route across TagadaPay and processors such as Stripe, NMI and Airwallex, with one logic and a cascade to another processor when one is down or times out, and subscriptions handle trials, billing cycles and automatic retries. Plans are on the pricing page. Tagada follows Visa and Mastercard rules and the laws that apply to payments.

Start free

Whatever you run, the layout question comes after the basics: fewer fields, costs shown early, terms visible before the card field, and a payment step that doesn't lose a buyer to a decline.

Updated on October 14, 2026

Nick Bonnassies

CMO at Tagada

CMO at Tagada. Before Tagada, Nick built direct-to-consumer brands that generated over $115M in sales, raised over $25M in crowdfunding and sold two of them. He also works as a fractional CMO on marketing operations and AI systems.

Frequently asked questions

What is a one-page checkout?

A checkout where the buyer enters contact details, shipping address and method, and payment on a single scrollable page, usually with the order summary beside the form. Shopify's definition: all checkout steps on one page. A multi-step checkout puts the same information on separate pages, typically information, shipping and payment.

Is one-page checkout better than multi-step?

Not by default. Baymard Institute found that buyers have relatively few problems moving between steps; the trouble comes from what each step asks them to do. A/B tests where one page wins often compare an unoptimized multi-step flow with a freshly optimized one-page flow. Test both with identical fields.

Does Shopify use a one-page checkout?

Yes. Shopify's help center says the checkout layout is set to one-page by default, and merchants can switch to the three-page layout. Since November 2023, Basic, Shopify and Advanced plans can choose either. Accelerated flows such as Shop Pay always use the one-page layout.

How do I switch my Shopify checkout between one page and three pages?

In the Shopify admin, go to Settings > Checkout, click Edit next to your checkout configuration, open the Settings sidebar with the gear icon, then pick One-page checkout or Three-page checkout under Checkout layout and save. The editor preview doesn't update in real time: check the live checkout after saving.

Does WooCommerce have a one-page checkout?

Yes. WooCommerce's Checkout block, the default for stores started after version 8.3 (November 2023), collects express payment, delivery, address, terms and the order totals on one page. Established stores opt in to the blocks; the block can be switched back to the classic shortcode checkout from the block toolbar.

What is an accordion checkout?

A middle option: the checkout fits on one or two pages, but sections open one at a time, like steps. Baymard's research shows buyers perceive it as a multi-step process. Collapse each completed section into a summary of what was entered, and make the browser Back button return to the previous section.

Sources

Checked October 14, 2026

Tagada

Test your checkout, then route every payment that comes out of it

Funnels, one-click upsells, subscription billing and payment routing, on one customer record.

Start free See pricing

01Create your free account
02Connect your store or build a checkout
03Launch funnels, upsells and subscriptions