Order Summaries
Order confirmation pages with progress tracking and detailed breakdowns.
Account
Account ยท 4 variantsHow To Use This Page
Order Summaries sits inside the Ecommerce part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 4 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
Simple with full details
A complete confirmation page with hero copy, purchased items, addresses, and totals.
With progress bars
A tracked order state with horizontal progress steps and order item detail below.
With large images and progress bars
Large product imagery paired with the same tracked progress experience.
With split image
A split confirmation layout with large imagery on the left and details on the right.
Variant 1
Simple with full details
A complete confirmation page with hero copy, purchased items, addresses, and totals.
Order #BE210FB
Thank you!
Your order was placed on July 6, 2021 and is scheduled to arrive on July 12, 2021.
Micro Backpack
Delivered to your home address with tracking included.
$70.00
Nomad Shopping Tote
Delivered to your home address with tracking included.
$60.00
Shipping address
Ava Mitchell
123 Market Street
San Francisco, CA 94105
United States
Billing info
Visa ending in 4242
Receipt sent to ava@example.com
Update channel: Email
Total
$152.80
Variant 2
With progress bars
A tracked order state with horizontal progress steps and order item detail below.
Tracking view
Order progress
Move through the delivery stages to preview the component states.
Step 1
Order placed
Step 2
Processing
Step 3
Shipped
Step 4
Delivered
Micro Backpack
Tracking label created and carrier confirmed.
$70.00
Nomad Shopping Tote
Tracking label created and carrier confirmed.
$60.00
Variant 3
With large images and progress bars
Large product imagery paired with the same tracked progress experience.
Visual order detail
Shipment timeline
Step 1
Order placed
Step 2
Processing
Step 3
Shipped
Step 4
Delivered
Micro Backpack
$70.00
Expected arrival remains July 12, 2021.
Nomad Shopping Tote
$60.00
Expected arrival remains July 12, 2021.
Variant 4
With split image
A split confirmation layout with large imagery on the left and details on the right.
Order #BE210FB
Thank you for your order.
We received your order on July 6, 2021. The carrier expects delivery by July 12, 2021.
Micro Backpack
Premium carry goods with tracking enabled.
$70.00
Nomad Shopping Tote
Premium carry goods with tracking enabled.
$60.00
Shipment heading to San Francisco, California
You'll receive delivery updates by email.
Total
$152.80