An order summary is the checkout component that lists everything in an order: products, quantities, individual prices, discounts, shipping, tax, and the final total. It lets a shopper confirm exactly what they are buying and what it costs before they commit.
What does an order summary include?
| Section | Typical contents |
|---|---|
| Items | Product name, image, variant such as size or color, quantity, unit price |
| Price breakdown | Subtotal, shipping, tax, discounts, order total |
| Extra details | Estimated delivery, applied promo code, loyalty points earned |
Why does the order summary matter?
Unexpected extra costs are the most common reason shoppers abandon checkout, cited by around 48% of users in Baymard Institute research. A clear order summary defuses that by showing shipping, tax, and fees before the final step, so there is no surprise at the end. It also builds confidence through transparent pricing, and it lets shoppers catch their own mistakes, such as a wrong quantity, before they pay. Offering free shipping above a set order value is one way to soften that cost shock, and our free shipping threshold guide shows how to set a threshold that still protects your .
Where should the order summary sit?
On desktop, a sticky sidebar keeps the summary visible while the shopper fills in checkout fields. On mobile, a collapsible section at the top works best: show the total prominently and let shoppers expand it for the full breakdown. In a multi-step checkout, repeat the summary on each step so the running total is never hidden. Our checkout optimization guide covers how this fits the wider flow.
Order summary design tips
- Make the total the most prominent number, with clear typography separating each section.
- Include small product thumbnails for quick visual confirmation.
- Let shoppers edit quantities or remove items without leaving checkout.
- Keep the form itself short. Our checkout form design guide covers the field-level friction that pairs with a clear summary.
What to show at each stage
The cart page shows full product details with edit options. The checkout view is a streamlined summary focused on verification. The confirmation page becomes a complete record, including the order number and next steps.
