Multi Step Checkout

About this block

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.

When to use

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

• Cart

After

• Review and place order as the final step this flow leads to

What you can display

One strong use is the three stage guest flow shown mid journey. Other stagings:

• With delivery step. Shipping speed as its own stage for split warehouses.
• B2B version. PO number and approver email as a stage.
• Personalization stage. Engraving confirmation before payment.

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.