ecommerce pattern
Checkout — shipping
Step 1 of physical-goods checkout. Address + shipping method.
When to use it
First step after cart for physical goods.
- Address entered in <30s with autocomplete
- Shipping methods load instantly
Layout regions
- header
- main
- form
- summary
States
- default
- loading
- partial
- error
Example
<Container><Grid cols={2}><ShippingForm /><CartSummarySticky /></Grid></Container>The full Checkout — shipping pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.