Checkout step patterns
The step indicator is the shopper's map through checkout. The three patterns differ on whether checkout is one page or many, and whether progress is visualised loud or quiet. Pick wrong and shoppers either feel rushed or lost, both kill conversion.
Linear numbered stepper
A horizontal row of numbered steps across the top of the page, each labelled and showing its state (done, active, upcoming). Each step is its own page. The shopper always knows where they are and how much is left.
> what's good
- +Progress is unambiguous, shoppers see the whole path.
- +Each step is a single focused task, lower cognitive load per page.
- +Easy to re-enter at the right step if shoppers bounce away and return.
> what's risky
- ·More page loads, slower on poor connections, more chances for drop-off.
- ·Linear flow forces shoppers to commit to earlier choices before seeing later ones.
- ·Steppers add UI overhead at the top of every page, costing real estate on mobile.
Single-page accordion
The whole checkout on one page. Completed sections collapse to a summary line with edit, the active section is open, future sections are locked. Shopify's default and the most-replicated checkout pattern in the world.
> what's good
- +No page transitions, the fastest possible perceived speed.
- +Edit-in-place reduces back-button anxiety, shoppers feel in control.
- +Order summary stays visible throughout, supports last-minute reconsideration.
> what's risky
- ·Long pages on mobile, scroll fatigue plus collapsing sections can disorient.
- ·Locked future sections frustrate shoppers who want to scan ahead.
- ·Validation errors require careful inline messaging or shoppers won't know what's blocking.
Minimal progress bar
A thin progress bar at the top, current step name in small text, then the form for the current step only. Each step is a page, but the indicator is whisper-quiet. Common with conversion-optimised DTC brands.
> what's good
- +Visual minimalism keeps focus on the form, not the chrome.
- +Brand-consistent, the checkout looks like the rest of the site.
- +Easy to A/B test individual steps without redesigning the indicator.
> what's risky
- ·Shoppers without map-reading instincts get lost, especially on long flows.
- ·Without explicit step labels, the perceived length of checkout becomes mysterious.
- ·On bad connections the bar can desync, leaving shoppers unsure if anything happened.