Conversion and checkout · UX/UI pattern guide

Shopping cart and order summary

A shopping cart is a persistent collection of chosen items or configuration decisions that users can review and edit before committing.

Browse all patterns Scope this pattern

At a glance

What the pattern is designed to accomplish

Persistent cart, quantity controls, subtotals, saved choices, and review step.

Shopping cart and order summary interface pattern illustration

Planning price

€1,300

A starting budget anchor before discovery and technical scoping.

Typical effort

5-8 days

The implementation range depends on states, data, and integrations.

Pattern family

Conversion and checkout

Use the family to find adjacent patterns that support the same journey.

Use cases

When this pattern is a strong fit

Use the pattern when it removes a real decision or interaction burden, not simply because users recognize its visual form.

Best suited to

Purchases containing multiple items, quantities, or options
Service builders and configurators where scope accumulates over time
Flows where users need a review checkpoint before submission

Anatomy

The essential parts of shopping cart and order summary

The visual treatment can change, but these responsibilities need to remain clear.

Part 1

Persistent items with names, variants, quantities, and prices

Define this part explicitly in the design and test it with realistic content and states.

Part 2

Immediate editing, removal, saving, and recovery controls

Define this part explicitly in the design and test it with realistic content and states.

Part 3

Transparent subtotal, fees, discounts, and next-step expectations

Define this part explicitly in the design and test it with realistic content and states.

Part 4

A clear path to checkout plus a path back to browsing

Define this part explicitly in the design and test it with realistic content and states.

Implementation

Design and delivery guidance

The pattern works when interaction rules, content, data, and edge cases support the same user goal.

Recommended approach

Persist the cart across sessions when practical and explain expiration.
Recalculate totals immediately after edits.
Keep unavailable or changed items visible with a clear recovery choice.

Common failure modes

Revealing mandatory fees only after checkout begins
Removing items silently when inventory or authentication changes
Using a cart when a direct single-action commitment would be clearer

Accessibility

Inclusive design requirements

Accessibility is part of the pattern's behavior and content model, not a visual pass added after implementation.

Minimum considerations

Announce quantity, removal, and total changes.
Use labeled controls rather than making tiny icons the only edit mechanism.
Keep error messages next to the affected item and include a recovery action.

History

How shopping cart and order summary emerged and who popularized it

Interface patterns usually evolve through several technologies and products. The distinction below avoids assigning a single inventor where the evidence points to gradual adoption.

Origins

How the pattern came about

The digital cart borrowed its metaphor from physical self-service shopping carts and mail-order forms. Early online stores needed a temporary server-side collection before browser cookies and persistent accounts became dependable.

Popular adoption

Who helped make it mainstream

Major 1990s ecommerce sites, especially Amazon, made the cart icon and review page universal web conventions. Mature cart and checkout research from organizations such as Baymard later standardized expectations around persistence, editing, and transparent totals.