Design System/Ecommerce/Order Summaries

Order Summaries

Order confirmation pages with progress tracking and detailed breakdowns.

Account

Account ยท 4 variants

How 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.

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.

Arriving soon
Micro Backpack

Micro Backpack

Delivered to your home address with tracking included.

$70.00

Nomad Shopping Tote

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

Subtotal$130.00
Shipping$12.00
Tax$10.80

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

3

Step 3

Shipped

4

Step 4

Delivered

Micro Backpack

Micro Backpack

Tracking label created and carrier confirmed.

$70.00

Nomad Shopping Tote

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

Shipped

Step 1

Order placed

Step 2

Processing

3

Step 3

Shipped

4

Step 4

Delivered

Micro Backpack

Micro Backpack

$70.00

Expected arrival remains July 12, 2021.

Nomad Shopping Tote

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 confirmed

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

Micro Backpack

Premium carry goods with tracking enabled.

$70.00

Nomad Shopping Tote

Nomad Shopping Tote

Premium carry goods with tracking enabled.

$60.00

Shipment heading to San Francisco, California

You'll receive delivery updates by email.

Subtotal$130.00
Shipping$12.00
Tax$10.80

Total

$152.80