Multi Step Checkout
The three stage flow mid journey with editable recaps and a stepper without color dependence.
The three stage flow mid journey with editable recaps and a stepper without color dependence.
Search blocks by description or jump to a page.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Multi Step Checkout renders the three step flow mid journey, contact done and shown as an editable recap row, shipping active, payment ahead, with a stepper whose states are visually distinct without color dependence. The footer defuses the two multi step fears by name, one step left, the total stays the same the whole way.
Steps are one array driving the stepper, the recap row pattern repeats per completed step.
Reach for this block on higher consideration purchases where breaking the form into stages reads as care rather than friction, furniture, custom goods, B2B orders. Fast movers should take the one page checkout instead.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the three stage guest flow shown mid journey. Other stagings:
Tip: the editable recap row is what makes multi step tolerable, never make a buyer restart a stage to fix a typo they can see.