15 Shopping Cart Design Examples + Best Practices (2026)

A good shopping cart page does three jobs. It confirms the shopper picked the right item, it shows the full cost before checkout, and it makes the checkout button impossible to miss.

Every design choice on the page should serve one of those jobs. The 15 cart pages below do it well, grouped by the job they handle best, and each one ends with the move worth copying.

After the examples you’ll find a best-practices checklist, mobile cart tips, and the mistakes that cost stores the most checkouts.

Key takeaways

• Show shipping, tax and fees on the cart page. Surprise costs are the top reason shoppers abandon.
• Confirm size, color and quantity in each cart row so nobody leaves to double-check.
• Keep the checkout button visible at all times, ideally in a sticky order summary.
• Put trust signals and review snippets next to the checkout button, not in the footer.
• Use the cart for upsells that fit the order: a free shipping bar, a subscription option, or items that go with what’s already there.

What Every Shopping Cart Page Needs

A shopping cart page is the review step between “add to cart” and checkout. Shoppers use it to check the order, edit it, and see the total before they pay.

A complete cart page includes these parts:

• Cart rows: product image, name, variant (size, color), unit price, quantity selector and a remove link.
• Order summary: subtotal, shipping, tax or an estimate, discounts and the final total.
• Promo code field: present but collapsed, so it doesn’t send shoppers hunting for coupons.
• Checkout button: the most visible element on the page, plus express options like Shop Pay, Apple Pay or PayPal.
• Reassurance: delivery estimate, return policy and payment security near the button.
• A way back: a “continue shopping” link that doesn’t compete with checkout.

Everything else, from upsells to loyalty points, is optional. Add it only if it helps the shopper finish the order.

Also check: checkout page design examples

Cart Page vs Slide-Out Cart: Which to Use

A full cart page suits higher-priced or multi-item orders, while a slide-out cart suits quick, lower-priced purchases. Many stores use both: a slide-out that confirms the add, with a link to the full cart.

Separate cart page

A dedicated page has room for a detailed order summary, a shipping calculator, trust signals and upsells. It works best for furniture, electronics, jewelry and any order where the shopper wants to review before paying.

The cost is one more page load. If your analytics show people leaving from the cart page itself, test a slide-out.

Slide-out or mini cart

A slide-out panel confirms the add without taking the shopper off the product page. It’s faster, which suits impulse buys, apparel and stores where people add several items in one visit.

Space is the limit. There’s room for the items, a total and a checkout button, but not for a shipping calculator or long reassurance copy.

Shopping Cart Design Patterns at a Glance

Here are the 15 examples in one view, sorted by the job each pattern does.

Pattern	Example brand	What to steal
Full cost in the cart	John Lewis	Show shipping and delivery options before checkout
Repeated shipping info	Crate & Barrel	Answer the delivery question in more than one spot
Delivery dates	Living Spaces	Give a delivery window for bulky items
Country-based shipping	Zooplus	Let shoppers pick their country in the cart
Trust near the button	Brilliant Earth	Returns, shipping and security beside checkout
Review snippet in the cart	Solo Stove	A buyer quote under the cart item
Variant confirmation	ASOS	Size and color in every row, plus save for later
Free shipping bar	Urban Outfitters	Show progress toward the threshold
Cart-based recommendations	Sephora	Suggest items tied to what’s in the cart
Subscription comparison	Harry’s	One-time vs subscription price side by side
Subscription toggle	Wandering Bear Coffee	Switch to subscribe inside the cart row
Room bundles	Wayfair	Recommend items that complete a set
Sticky order summary	H&M	Keep the total and button in view while scrolling
Mobile-first layout	Gymshark	Large tap targets and a full-width button
Minimal layout	Anyday	Remove anything that competes with checkout

Cart Examples That Show the Full Cost

Surprise costs are the biggest reason shoppers walk away, so these four stores answer the “what will I pay, and when will it arrive?” question before checkout.

1. John Lewis

The British department store sells everything from sofas to socks, so its basket has to handle mixed orders. It lists each item cleanly, shows delivery options, and breaks down the price so the total holds no surprises.

What to steal: put shipping, tax and fees in the cart itself. If you can’t calculate shipping exactly, show an estimate and say when the final figure appears.

2. Crate & Barrel

Crate & Barrel repeats shipping information four ways: a ships-free tag above the summary, a tag on each product, an estimated delivery date, and a shipping calculator.

That sounds like overkill until you remember what’s being bought. Home goods are big, pricey and slow to arrive, and delivery doubts stop people cold.

What to steal: for large or expensive items, answer the delivery question in more than one place.

3. Living Spaces

Nobody buys a sofa without knowing when it will show up. Living Spaces puts delivery timelines, shipping methods and estimated dates on the cart page, so shoppers can plan before they commit.

What to steal: show a delivery window on the cart for bulky products. A date range beats “calculated at checkout” every time.

4. Zooplus

Zooplus sells pet supplies across Europe. Country and currency are set at the start of the cart, and delivery estimates update for the chosen location.

What to steal: if you ship internationally, let shoppers pick their country in the cart and show local shipping costs right away.

Cart Examples That Build Trust

The cart is where “is this safe?” and “did I pick the right one?” peak. These three stores answer both next to the checkout button, which is the core of ecommerce trust at the last step.

5. Brilliant Earth

Fine jewelry is a high-stakes purchase, and Brilliant Earth’s cart treats it that way. Free shipping and returns are spelled out, security badges sit close to the button, and the product images are detailed enough to confirm the exact piece.

What to steal: the pricier the product, the closer your trust signals should sit to checkout. Our roundup of best trust badges covers which ones to use.

6. Solo Stove

Solo Stove sells premium fire pits and pulls customer review snippets into the cart, right under the item. The last thing a shopper reads before paying is another buyer saying it was worth it.

What to steal: add a short verified review to the cart row for your best-selling products. It answers last-minute doubt better than any badge.

7. ASOS

ASOS carts often hold five or six fashion items at once.

Large images, confirmed size and color in each row, and a visible “save for later” option mean nobody has to go back to a product page to remember what they picked.

What to steal: confirm the variant in every row. “Medium / Blue” in plain text removes a surprising amount of hesitation.

Cart Examples That Raise Order Value

The cart is the best spot to grow the order, as long as the offer fits what the shopper already chose. These five stores do it without feeling pushy.

8. Urban Outfitters

Urban Outfitters turns the free shipping threshold into a progress bar. Shoppers see exactly how far they are from free delivery, which gives them a clear, small goal.

What to steal: a visual free shipping bar (“You’re $12 away”) in the cart. A bar makes the gap feel smaller than the same sentence in plain text.

9. Sephora

Sephora’s recommendations are built from the items in the basket, not a generic bestseller list. The free samples picker adds a small reward that makes finishing the order feel good.

What to steal: base cart suggestions on the cart contents. Setting spray next to foundation makes sense; a random trending lipstick doesn’t. More in our product recommendation examples.

10. Harry’s

Harry’s shows the one-time price and the subscription price side by side, with the saving already worked out. The shopper decides with the math in front of them.

What to steal: if you sell refills, present the subscription in the cart. Intent is at its highest, and the comparison does the selling.

11. Wandering Bear Coffee

Wandering Bear puts a subscribe toggle on the cart item itself, and the price updates the moment it’s switched on. No separate subscription page, no extra click.

What to steal: for consumables, let shoppers switch to subscribe inside the cart row and show the new price instantly.

12. Wayfair

Wayfair’s cart suggests items that complete a room, such as a rug or coffee table with a sofa, and it keeps assembly and delivery options one click away.

What to steal: recommend items that finish a set rather than unrelated products. A coherent bundle is easier to say yes to.

Cart Examples With Clean Layouts

Layout decides whether the checkout button gets found. These three carts keep the path forward obvious on any screen.

13. H&M

H&M uses a two-column layout with items on the left and a sticky order summary on the right. However far the shopper scrolls, the total and the checkout button stay in view.

What to steal: make the order summary sticky on desktop and pin the checkout button on mobile.

14. Gymshark

Gymshark’s cart is built for phones first. Quantity selectors and remove buttons are easy to tap, and the checkout button spans the full width of the screen.

What to steal: design the cart for a thumb, then scale up. Test on a real phone, not only a browser’s mobile preview.

15. Anyday

Anyday sells premium cookware, and its cart matches that with plenty of white space, sharp product images and one clear action. Nothing on the page pulls attention from checkout.

What to steal: audit every element on your cart and remove the ones that don’t help the shopper pay.

Shopping Cart Design Best Practices

Use this checklist to review your own cart. Each practice comes with a store that does it well.

Show the full cost early

Extra costs like shipping, tax and fees are the leading reason shoppers abandon checkout. Show them on the cart page, or at least a clear estimate, so the total never jumps at the payment step.

Confirm exactly what’s ordered

Match the detail to the cost of a mistake. DigiKey lists part numbers, package types and stock for electronic components, and Northern Tool + Equipment shows SKUs and specs for tools.

Let shoppers edit in place

Quantity, size and removal should all work from the cart. Sierra Designs links a size chart from the cart row, so unsure shoppers don’t leave to check the product page.

Reassure right before payment

A short benefit line under the product name, as Nutribullet uses, reminds shoppers why they chose it. Lululemon does the same with warm microcopy when items are added.

Make the checkout button obvious

The checkout button should be the strongest element on the page. In a minimal cart like this one, the button fills the width of the summary column, so there’s no doubt about the next step.

Cut what competes with checkout

Banners, pop-ups and promo noise pull focus. Ugmonk’s cart shows the product, the price and the path to checkout, and very little else.

Keep your brand voice

A cart that suddenly looks like a different site creates doubt. Chubbies keeps its jokes in the cart copy, Disney keeps its visuals, and Aura Bora carries its colors from product page to cart.

Show rewards on this order

Walgreens shows the loyalty points the current order will earn. It gives shoppers one more reason to finish, and it reminds members the program is worth something.

Present upgrades as plain math

MeUndies shows member vs standard prices as facts, not a sales pitch. HBO Max does the same for plan tiers, showing what the next tier adds so the upgrade explains itself.

Handle gifts in the cart

If many orders are gifts, offer wrapping, messages and delivery dates in the cart. Godiva does this directly, and Natori tucks gift and charity options into light pop-ups so the layout stays clean.

Mobile Cart Design Tips

Most store traffic now arrives on phones, and mobile carts are where small layout problems cost the most. Check yours against this list:

• Pin the checkout button. Keep it fixed at the bottom of the screen so it’s never a scroll away.
• Make tap targets big. Quantity buttons and remove links need room for a thumb, not a mouse pointer.
• Show the total at the top. Shoppers on small screens shouldn’t scroll to learn what they’ll pay.
• Offer express payment. Apple Pay, Google Pay and Shop Pay skip most of the typing.
• Collapse extras. Promo fields and recommendations can sit in expandable sections.

For the next step after the cart, see these mobile checkout optimization tips.

Cart Page Mistakes That Cost Checkouts

These patterns show up again and again in abandoned carts, and every one of them is fixable.

• Hiding costs until checkout. In Baymard’s research, 39% of shoppers abandoned over extra costs like shipping, taxes and fees.
• Forcing an account. 19% abandoned because they had to create an account. Offer guest checkout and invite sign-up after the order.
• No editing in the cart. Every trip back to a product page is a chance to leave.
• A weak checkout button. If shoppers have to hunt for it, the layout has failed.
• A cramped mobile cart. Tiny controls and a hidden button lose phone shoppers fast.

Our guide on how to reduce shopping cart abandonment covers the fixes beyond the cart page.

Also check: order review page examples

How WiserNotify Helps at the Cart Stage

Good design gets shoppers to the cart. Confidence gets them through it. WiserNotify adds social proof and urgency to cart and product pages, and it’s used by 20,000+ brands and connects with 250+ platforms, including Shopify, WooCommerce and BigCommerce.

Recent sales notifications

Small pop-ups show real recent orders, with a first name, city and product pulled from your store data. A shopper reviewing their cart sees that others just bought the same thing.

Live visitor counter

Show how many people are viewing a product right now. You can set a minimum so the counter only appears when the number is worth showing.

Countdown timers and offers

Use a timer for a real deadline, such as a flash sale or a limited stock offer. These countdown timer examples show how to keep urgency honest.

Announcement bar

An announcement bar keeps the free shipping threshold or return policy in view while shoppers review their cart, so they don’t leave to look it up.

Review notifications

Review pop-ups show happy buyers at the moment doubt peaks. You can filter by product and minimum star rating.

Inline social proof

Inline widgets sit inside the page layout instead of floating over it, for things like order counts, star ratings or low-stock alerts beside the cart item.

Analytics

Track views, clicks and conversions for each notification, then keep the messages that move shoppers to checkout.

Pricing

Plans are priced by monthly visitors, and every plan starts with a 7-day free trial.

Wrap Up

A cart page doesn’t need to be clever. It needs to confirm the choice, show the real total, and make the next step obvious.

Pick two or three patterns from this list that fit your products, test them against your current cart, and keep what moves more shoppers to checkout.