Checkout Forms
Single-step and multi-step checkout forms with order summary layouts.
Checkout
Checkout ยท 5 variantsHow To Use This Page
Checkout Forms sits inside the Ecommerce part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 5 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Ecommerce reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Start With
Split with order summary
A 60/40 checkout split with the form on the left and a sticky summary card on the right.
With order summary sidebar
A full-height summary rail paired with a generous checkout form layout.
Single step with order summary
A wide single-step form with the order summary inlined before the final submit action.
Multi step
A three-step checkout with contact, shipping, and payment screens.
With mobile order summary overlay
A checkout form with a toggle that reveals the order summary above the form content.
Variant 1
Split with order summary
A 60/40 checkout split with the form on the left and a sticky summary card on the right.
Contact information
Use this email to send your receipt and shipping updates.
Shipping address
We currently ship across North America.
Payment
All transactions are secured and encrypted.
Order summary
Your items
Micro Backpack
Quantity 1
$70.00
Nomad Shopping Tote
Quantity 1
$60.00
Variant 2
Fast checkout
Shipping and payment
Contact information
Order updates arrive here first.
Shipping address
Choose a destination for this order.
Payment
Visa, Mastercard, and Amex accepted.
Order summary
Your items
Micro Backpack
Quantity 1
Waxed canvas, carry-all interior, zipper pouch.
$70.00
Nomad Shopping Tote
Quantity 1
Waxed canvas, carry-all interior, zipper pouch.
$60.00
Variant 3
Single step with order summary
A wide single-step form with the order summary inlined before the final submit action.
Single step
Everything in one pass
Contact information
Where should we send the receipt?
Shipping address
We deliver in 2 to 4 business days.
Payment
Enter a payment method to finish this order.
Order summary
Your items
Micro Backpack
Quantity 1
$70.00
Nomad Shopping Tote
Quantity 1
$60.00
By placing the order you agree to the store terms and return policy.
Variant 4
Multi step
A three-step checkout with contact, shipping, and payment screens.
Contact information
Start with the customer details for this order.
Variant 5
With mobile order summary overlay
A checkout form with a toggle that reveals the order summary above the form content.
Mobile overlay
Checkout with peek summary
Contact information
Order and shipping updates are sent here.
Shipping address
We'll use this for delivery and taxes.
Payment
Enter your card details to finish checkout.