Ecommerce Cart UX: How to Design a Better Shopping Cart

A good shopping cart confirms what was added, makes every item easy to review and change, and shows the full cost before checkout. Give each line item its image, name, chosen options, price, quantity stepper and line total, with remove (plus undo) and save-for-later actions. Summarize subtotal, discounts, estimated delivery, taxes where relevant and the total. Keep the promo field collapsed, show only a few relevant cross-sells, explain stock or price changes on the affected line, design the empty state, keep the checkout button prominent on mobile and let shoppers move to checkout without forced sign-up.

The cart has several jobs: confirm the right products and options were chosen, let shoppers change their mind, show what the order will really cost, and move them smoothly into checkout. For many shoppers it's also a holding area for comparing or saving items for later. The diagram above shows the path from add-to-cart through the cart to checkout, with saving for later as an alternative.

This guide covers cart design on any platform. For Shopify-specific cart tactics such as drawers, free-shipping thresholds and upsell apps, see Shopify cart optimization.

The moment after “Add to cart” needs clear feedback. The button should show progress and then success, the cart count should update, and a confirmation should say what was added, including size and colour, with options to continue shopping or go to the cart.

Each line should show a product image, name linked back to the product page, selected options (size, colour, personalization), unit price, quantity and line total. Add relevant status: low stock, backorder or estimated delivery date. Shoppers use the cart to double-check their choices, so the options must be visible, not hidden behind a “details” link.

Use a stepper with minus and plus buttons around an editable number, sized for touch. Update line totals and the order summary immediately, with a brief loading state if it takes a moment. Respect stock and purchase limits with a message on the line rather than a silent cap. Label the buttons for assistive technology (“Increase quantity of Trail runner, size 9”) and announce updated totals.

Shoppers often realize they want a different size or colour at the cart stage. Let them change options directly on the line where the platform allows, rather than forcing them to remove the item, return to the product page and add it again.

Removing an item should be easy and reversible: remove immediately and offer undo, rather than a confirmation dialog for every removal. “Save for later” moves an item out of the order without losing it, which is useful for shoppers deciding between options or waiting for payday. Keep saved items visible below the cart and let guests use it too, not only signed-in customers.

Cost surprises are the biggest checkout problem. In Baymard Institute's survey of US online shoppers who abandoned during checkout, excluding those who were just browsing, 40% said extra costs such as shipping, tax and fees were too high, and 12% said they couldn't see or calculate the total order cost up front.

Show an estimated delivery cost in the cart, using the shopper's location or a quick postcode or country input, along with expected delivery dates. Show taxes where they're known; in markets where prices include VAT, say so, and where tax is calculated later, say when. If you use a free-delivery threshold, state it honestly and show how far the cart is from it.

A prominent empty “Promo code” field tells shoppers without a code that others are paying less, and some leave to search for one. Collapse it behind a link such as “Add a discount code”. When a code is applied, show the discount as its own line in the summary; when it fails, explain why (expired, minimum spend not met, not valid for these items) and keep the code in the field for editing.

If you offer gift wrap, gift messages or gift receipts, present them in the cart or early in checkout with their cost, and show the message preview. Make it clear whether prices will be hidden from the recipient. Keep gift options optional and out of the way for everyone else.

A few complementary items (batteries for the device, care products for the jacket) can be genuinely helpful. Keep them below the items and summary, avoid alternatives that reopen the decision the shopper just made, and never push the checkout button or total below the fold with recommendations. See product recommendations for how to choose them.

Carts change while shoppers are away: items sell out, prices change, promotions end, delivery restrictions apply. Explain each change on the affected line in plain language, such as “Only 1 left in size 9, we've updated your quantity”, and never silently remove items. Keep the rest of the cart intact, and if an item can't be bought, offer alternatives or save-for-later.

An empty cart is a dead end unless you design it. Say the cart is empty, offer routes back into shopping such as main categories, recently viewed items or saved items, and for signed-out shoppers, a prompt to sign in to see a cart saved on another device.

Shoppers often add items on one visit or device and buy on another. Keep carts for returning guests on the same device, sync carts for signed-in customers across devices, and merge a guest cart with a saved cart when someone signs in, rather than discarding either.

On mobile, keep line items compact but tappable, show the total and a checkout button in a sticky footer, and put express payment options where they're visible without crowding the main button. Make quantity controls and remove actions large enough to hit reliably. See mobile ecommerce UX.

Make the checkout button the most prominent action, and repeat it above the items on long carts. Offer express payment options for shoppers who want them, don't force account creation before checkout, and keep the order summary visible and editable during checkout so shoppers don't feel they must go back to the cart to change something. The next step is covered in ecommerce checkout UX.

Announce cart updates, such as items added, quantities changed and items removed, as status messages (WCAG 4.1.3). Give every control an accessible name that includes the product, manage focus sensibly after an item is removed, and make sure a cart drawer traps focus while open and returns it when closed.

The cart is where shoppers confirm their choices and discover the real cost. Make items easy to review and change, show costs early and honestly, handle changes gracefully, keep recommendations modest, design the empty and mobile states, and hand off to checkout without obstacles.

For related guides, see wishlist UX.