Shopping Cart Page Design
The cart page is the last calm moment before checkout. It should confirm what the shopper is buying, make changes effortless and show the real total with no surprises.
By Mohamed Farhan · Updated Oct 19, 2026
Linen Shirt
Sand / M
$68.00
Qty 1
You're $12 away from free delivery
Inside the example
The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px) and spacing p-5 (20px), gap-4 (16px), mt-1 (4px), mt-5 (20px), space-y-1.5 (6px), pt-4 (16px), mt-3 (12px), mt-4 (16px), constrained by max-w-md. Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.
Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.
Anatomy
- 1.Line items
- Image, name, variant, price and quantity for each product.
- 2.Quantity controls
- Simple stepper or select, plus a remove link.
- 3.Order summary
- Subtotal, shipping estimate, taxes and total.
- 4.Promo code
- Collapsed by default so it does not distract.
- 5.Checkout button
- The most prominent element on the page.
- 6.Reassurance
- Returns policy, delivery estimate and payment options.
Common variations
- Full cart page, a dedicated page for reviewing items before checkout. Best for larger orders and considered purchases.
- Cart drawer, a side panel that slides in after adding an item, letting shoppers continue browsing.
- Mini cart dropdown from the header icon for quick review.
- One-page checkout cart, where the cart summary sits beside the checkout form.
States to design
- Empty cart: a friendly message with links to popular products or recently viewed items.
- Item added: confirmation with the option to view the cart or continue shopping.
- Quantity updated: totals recalculated instantly with a clear indication.
- Out of stock or price changed: an inline warning on the affected item.
- Promo applied or invalid: clear success or error messages next to the promo field.
A walkthrough
A shopper adds a linen shirt and a pair of trousers to his cart and opens the cart page. Each item shows a photo, size, color and price, and he notices the shirt is size M when he wanted L. He changes it in a dropdown right there instead of going back to the product page.
The summary on the right shows subtotal, shipping and an estimated total, plus a note that he is twelve dollars away from free delivery. He decides to add socks from a small recommendations row below. On his phone later, the same cart shows a sticky bar at the bottom with the total and a full-width checkout button, so the next step is always visible.
How different products use it
Fashion stores let shoppers change size and color directly in the cart and show delivery and return information prominently, because fit is the main concern.
Grocery and food delivery carts handle many line items, substitutions and minimum order values, so quantity controls and running totals are central.
Electronics and high-value items emphasize warranty, financing options and delivery dates, and often include protection plan upsells.
Visual design guidelines
On desktop, a two-column layout works well: items on the left (about two thirds of the width) and a sticky order summary on the right. Product thumbnails of 64 to 96px are recognizable without dominating. Prices align to the right with tabular numbers. The checkout button should be full width within the summary and the most prominent element on the page.
Best practices
Do
- Show shipping costs or a free-shipping threshold before checkout.
- Let users change size and color without leaving the cart.
- Keep the checkout button visible on mobile.
- Save the cart for returning visitors.
Don't
- Do not reveal extra fees only at the last step.
- Do not make the promo field the most prominent element.
- Do not remove items without an undo option.
On mobile
On mobile, keep the checkout button visible with a sticky bottom bar that shows the total. Use large quantity controls, show product images at a recognizable size, and collapse the promo field and extra information so the path to checkout stays short.
Common mistakes
- Surprise costs for shipping and taxes revealed only at the final step.
- Forcing account creation before checkout.
- Tiny remove buttons that are hard to hit and easy to tap by accident without undo.
- Distracting upsells that push the checkout button below the fold.
Edge cases to plan for
- Items that go out of stock while in the cart need a clear notice and alternatives.
- Prices that change between adding and checkout must be flagged, not silently updated.
- Very long carts need a compact view and a way to remove everything.
- International shoppers need currency, duties and delivery estimates.
Accessibility checklist
- Give quantity controls clear labels including the product name.
- Announce total updates with a polite live region.
- Make the remove action a real button, not an icon without a name.
Implementation notes
Persist the cart for logged-out users with local storage or a server-side session, and merge it on login. Recalculate totals on the server, not only on the client. Announce total changes to screen readers with a polite live region, and make sure quantity controls have labels that include the product name.
In your design system
A cart is built from reusable commerce components: line item, quantity stepper, price, order summary, promo field and empty state. Keep prices in a dedicated component with tabular numbers and consistent currency formatting, and share the order summary between the cart, drawer and checkout so totals always look and behave the same.
How to measure whether it works
Measure cart-to-checkout conversion, cart abandonment rate, and how often promo codes fail. Watch session recordings for hesitation around shipping costs, and A/B test free-shipping thresholds and the placement of the checkout button.
Pre-launch checklist
Microcopy you can use
A step-by-step design process
- Design the line item first: image, name, variant, price, quantity, remove.
- Design the summary with every cost the shopper will pay.
- Design the empty state and out-of-stock warnings.
- Decide drawer, page or both for adding to cart.
- Design the mobile sticky bar with total and checkout.
- Test with real orders, including discounts and international shipping.
Usability test tasks
Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:
- Change the size of an item without leaving the cart.
- Find out how much shipping costs.
- Apply a discount code.
- Remove an item and then undo.
Key terms
- Cart abandonment: When shoppers add items but leave before buying.
- Free-shipping threshold: The order value at which shipping becomes free.
- Cart drawer: A side panel that shows the cart without leaving the page.
- Guest checkout: Buying without creating an account.
Writing the copy
Use clear, reassuring language: 'Free returns within 30 days', 'Arrives Thursday', 'Secure checkout'. Avoid pressure tactics like fake countdown timers. For the main button, 'Checkout' or 'Continue to checkout' is clearer than 'Proceed' or 'Next'.
Prompts to generate variations
If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:
- Design a fashion store cart page with editable size and color, free-shipping progress and an order summary.
- Create a slide-in cart drawer that appears after adding a product, with a checkout button and recommendations.
- Design a grocery cart with substitutions, minimum order value and running totals.
Related patterns
The cart leads into checkout, so design it together with the checkout page and product page. Empty carts follow the same principles as empty states.
Generate this pattern for your product
Inspo AI designs the full pattern with every state, grounded in how real products solve it, and exports React + Tailwind.
Sources and further reading
- WAI-ARIA Authoring Practices Guide · Accessible keyboard and screen reader patterns for UI components.
- WCAG 2.1: Non-text Contrast · Contrast requirements for buttons, borders and icons.
- WCAG 2.1: Use of Color · Why color should never be the only way information is shown.
- Nielsen Norman Group articles · Usability research on interface patterns.
More UI patterns
Questions people ask
What should a shopping cart page include?
Line items with images and variants, quantity controls, a clear order summary with shipping and taxes, and a prominent checkout button.
Should the cart be a page or a drawer?
A side drawer is faster for quick adds; a full cart page is better for reviewing larger orders. Many stores use both.
How do I reduce cart abandonment?
Show all costs early, offer guest checkout, keep the cart saved and add reassurance like returns and delivery dates.
Should the cart page show recommendations?
A small row of relevant recommendations can increase order value, but keep it below the summary so it does not distract from checking out.
How long should a cart be saved?
Many stores keep carts for weeks for logged-in users and use cookies or local storage for guests.
↘ Building Inspo AI | AI-Powered Design Research & Builder Platform | Design Engineer.