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
- Sticky cart summary
States
- default
- Empty form
- loading
- Address autocomplete
- partial
- Address entered, calculating shipping
- error
- Address invalid
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.