Conversion Optimization

Top 29 Cart Page Designs For 2025 (Examples)

November 29, 2024
written by humans
Top 29 Cart Page Designs For 2025 (Examples)

The average cart abandonment rate across all industries is around 69.57%. 

eCommerce businesses must keep trying new things to decrease these cart page drop-offs.      

The first step: designing carts better 🙂

Just a heads up, this post also covers:

8 Critical Cart Page Challenges to Avoid 

29 Shopping Cart Page Design Examples That We Love

Here are the 29 best cart design templates to consider for your own eCommerce store:

1) Solo Stove – Put convenience first

Solo Stove shopping cart design example

‍

What we love:

  • Once a customer adds a certain product, Solo Stove automatically adds complementary products
  • For products that will be delivered sooner, display the expected shipping time
  • The cart page template introduces accidental protection right under the product—details open up in a pop-up

Key takeaway: Make your basket page act like an in-store employee by offering expert advice and services (like providing delivery dates, extra info about product sizes, free samples, etc.).

2) Smyths – Give alternate delivery options    

Smyths eCommerce shopping cart design

What we love:

As part of their shopping cart design ideas, Smyths offers multiple shipping and delivery options. However, the details are not crowded in one place:

  • They can read more details about the shipping and delivery above the footer
  • Delivery information is summed up in *three points* right under the header and is clickable
  • Customers can make an informed decision and choose either home delivery or in-store pick-up

Key takeaway: Design your cart page with intelligent font formatting and lots of whitespace, to aid scanning.

3) Di Bruno Bros – Add some *action* to the cart design

Di Bruno shopping cart design example

What we love:

  • The add-to-basket page has some classic features—easy to edit: add/ delete/ save products for later
  • The orange free shipping progress bar right above the price summary acts as a conversion nudge in this eCommerce cart design

Key takeaway: Offer editing options in your shopping cart UI, to improve the shopping experience.

4) ASOS - Enable guest checkout

ASOS dd to cart design template

What we love:

  • Clear color contrast between the cart design area and the header/ footer
  • The pricing area has subtle triggers to make customers hit the checkout button
  • The shopping cart UI design shows card applicability & discount codes
  • ASOS also offers multiple checkout account options and guest checkout as well

Key takeaway: Make it really easy to check in directly from the cart page – so you can create more personalized offers.

5) John Paul Mitchell – Experiment with product samples

John Paul Mitchell cart page template

What we love:

  • Important info right on top of their cart page design—includes all the right nudges on delivery details & free shipping
  • This shopping cart example offers 3 free samples with every order—they let customers pick 

Key takeaway: Offer samples on your shopping cart page, to create a really unique value proposition.

6) Dell – Summarize product descriptions

Dell shopping cart UI design

What we love:

  • Dell keeps customers on the cart page with dropdowns summarizing product specifications and star ratings—which makes for excellent shopping cart UI
  • This eCommerce shopping cart design features trust badges in the price summary area
  • The customer service plug-in on Dell’s cart page example offers multiple ways of communication
  • While adding more than 2 CTAs might overwhelm customers, Dell clearly distinguishes intent

Key takeaway: Minimize the amount of text in your cart page layout by using dropdowns, and making all non-essential text smaller.

7) Natori – Use pop-ups instead of subpages

Natori cart page design example

What we love:

  • The pop-up opens to show the different supported charities—Natori establishes brand values through this
  • The social media plug-in on their shopping cart design with product recommendations
  • Natori also offers gift options through a pop-up and a message in their eCommerce cart design

Key takeaway: Use vibrant but non-intrusive in-page pop-ups on your cart, to pull visual focus on important messages.

8) Crate & Barrel – Be clear about shipping info

Crate & Barrel cart page template

What we love:

Unlike other shopping cart design templates out there, Crate & Barrel offers shipping info in 4 ways:

  • Above the cart summary, customers are prompted  to check the tag that says ‘Ships free’
  • On the right side of the shopping cart UI, the ‘ships free’ tag is next to the product—all the highlighted text is clickable
  • To the left of the cart design, in the price summary, Crate & Barrel displays costs upfront
  • This shopping cart template offers a return policy, international shipping, and different pick-up options—pop-ups reveal more information

Key takeaway: Pull focus on important messages by using contrasting colors and intelligent iconography.

9) Topicals – Let your brand personality shine 

Topicals eCommerce shopping cart design

What we love:

No matter what cart design ideas you explore, you need to make sure yours has a distinctive appeal like Topicals’:

  • This eCommerce shopping cart design uses brand-aligned CTAs
  • Lots of whitespace that make it easy for shoppers to appreciate this shopping cart template
  • A distinct “update” button to edit the whole order

Key takeaway: Keep your cart page design to reflect your brand ideals – like Topicals does by giving off a laid-back premium vibe.

10) Zooplus – Enhance geolocation capabilities 

Zooplus shopping cart template

What we love:

  • The ability to edit country and pin code options to estimate shipping information and cost in their eCommerce cart design
  • Quantity discount shows up as a nudge to drive confidence

Key takeaway: If you offer international shipping or different taxes by areas, make sure your cart design reflects the currency/amount changes.

Pro Tip: For countries where English isn’t the primary language, keep the cart page design copy simple to make it easy to translate through tools.  

11) Sephora – Try thematic product recommendations

Sephora eCommerce cart design example

What we love:

  • This shopping cart template shows two different types of recommendations—one being ‘shop under 16$’ and another personalization-based search & browsing history
  • Offers a way to change the shipping method on the cart page itself— customers can choose from standard, same-day delivery, and in-store pickup

Key takeaway: Design your cart page to intelligently upsell as well as downsell without causing information overload.

12) Revelry – Show the bag count  

Revelry eCommerce cart design example

What we love:

  • Right on top of the cart page, Revelry shows the number of items in the bag for easy review
  • Customers can also estimate shipping information in this eCommerce cart design 

‍Key takeaway: Use the cart icon to remind shoppers of how many items left in their cart.

13) Urban Outfitters – Give a clear stock alert

Urban Outfitters cart page template

What we love:

  • This cart layout includes a low stock alert to create a sense of urgency
  • On the product page, when a product is added to cart, a cart dropdown preview appears for 5 seconds
  • A “saved for later” wishlisting nudge makes this shopping cart website design complete

Key takeaway: Include information about stock levels as well as shipping methods on your cart page.

We recommend you to read: eCommerce Website Design: 17 Conversion-Boosting Principles

14) Everlane – Try a cart preview instead of a cart page

Everlane cart preview design example

What we love:

  • Some great nudges on the cart preview—we especially love ‘before you go’ and ‘psst! get it now before it sells out’      
  • Offers product reccos in the small layout with a swipe effect, a win for mobile shoppers

Key takeaway: Avoid leading to a separate cart page – instead, turn your cart into a checkout page.

15) Louis Vuitton – Add zoom-in on images

Louis Vuitton cart page recommendations

What we love:

  • This shopping cart UX design enables zooming on the image for intricate details
  • Offers helpful details like a “shop by this date to get delivery in time for Mother’s Day”—the gift message is a great add-on
  • Additional info on the left side panel below the price summary—when clicked shows info through pop-ups

Key takeaway: Give space for consideration and scrutiny on the cart page – with sufficient urgency triggers.

Don't forget to read: 21 Last-Minute Mother's Day Marketing Ideas For eCommerce Stores

16) Crazy Cups – Balance creativity & info 

Crazy Cups cart UI design example

What we love:

  • Crazy Cups sets itself apart with colorful and contrasted brand colors in this cart page design
  • This eCommerce shopping cart design clearly shows the order details and even lets customers edit the subscription order through a pop-up
  •  Customers can also include details to calculate shipping costs

Key takeaway: Design your cart page well, but include the right kind of information, so shoppers don’t feel anxious.

17) Disney – Show clear messaging to increase AOV 

Disney cart page template

What we love:

  • The cart page features a banner above the fold that shows information about their loyalty program and cross-sells a limited edition product—a clear CTA lets customers add the product right here 
  • The cart UI design also offers a gift options nudge and mentions the price range

Key takeaway: Remind shoppers only about offers they can immediately apply to their carts.

You must also check out: eCommerce Product Catalog: Common Mistakes + How To Fix Them

18) Garmentory – Prioritize already wishlisted items

Garmentory shopping cart website design

What we love:

  • This cart example has the "saved for later" tab right beside the shopping bag tab—this helps customers to view their wishlist without leaving
  • Clear shipping info without having to click on microcopy, is refreshing

Key takeaway: Close the conversion path by helping shoppers pick up where they left off in their previous shopping browsing session.

You should also read: eCommerce Product Categorization: 10 Scientific Approaches

19) Dollar Shave Club – Break down cost in detail

Dollar Shave Club eCommerce cart design

What we love:

  • In this cart design, the cost breakdown happens in great detail
  • It is an easily editable eCommerce shopping cart design 
  • The highlighted free shipping nudge with the progress bar inspires buying action

Key takeaway: Give a detailed cost breakdown in the first fold, to maintain cost transparency.

You should also read: 17 Top eCommerce Mobile Site Examples (Not Your Usual Brands)

20) Terra Origin – Bring in solid visuals

Terra Origin cart design template

What we love:

  • The categories menu is visible along the cart page and is easily accessible to customers 
  • The trust badge ‘Satisfaction Guaranteed’ makes customers feel at ease to checkout
  • Focus on good contrast and a clear visual hierarchy in this cart design with multiple CTAs

Key takeaway: Design your cart page to put focus on product images, along with trust badges – this will make shoppers feel more secure.

You must also read: How To Use Visual Commerce To Improve Conversions

21) Flo Living – Help them checkout with confidence

Flow Living shopping cart design example

What we love:

  • A prominent cart page design that features ‘checkout with confidence’ section with clear customer testimonials
  • A call-out of a customer review with star ratings makes this cart page jump out
  • This eCommerce shopping cart design upsells similar products that bring value to customers, a necessity in the nutraceutical industry

Key takeaway: Reaffirm what makes your brand unique with iconography and some user-generated content in your cart template.

22) Warby Parker – Highlight key information

Warby Parker shopping cart design example

What we love:

  • Warby Parker's shopping cart UX design is sleek, minimal, and highlights savings, along with shipping info and BNPL
  • Offers a discount nudge right above the main cart summary area

Key takeaway: Never skip key product details in your cart page's product summary section.

You must also read: High-Converting Mobile Homepage Blueprint For eCommerce

23) Quip – Prioritize user experience

Qip shopping cart UX design

What we love:

  • This shopping cart design template by Quip builds better recall
  • Using a sidebar cart page design gives customers the flexibility to keep browsing through products 
  • The upsell nudge on the top of the cart design is neatly done at 15% of the total page layout

Key takeaway: Prime your shoppers for the next purchase through your shopping cart design – note how Quip brings out the benefits by showing a way lesser “next refill total” in the subtotal.

24) MeUndies – Utilize valuable real-estate efficiently

MeUndies cart preview UX design example

What we love:

  • The quick add to cart page dropdown gives the customers the flexibility to keep browsing
  • The nudge for customers to become a Member—MeUndies is known for its stellar loyalty program

Key takeaway: You don’t always have to have a full cart page – a small but effective pop-up mini cart with brilliant copy also works.

You'll love reading: How to Increase Add to Cart Rate: 26 Brilliant Ideas

25) Burton – Keep things simple

Burton add to cart template

What we love:

  • This cart template features a bright blue ‘Checkout Now’ button, clear cross-sell nudge etc.

Key takeaway: You don’t always need to include every “high-converting” element on your cart design template—include elements that will help them check out faster (like the themed product recommendations and slashed pricing all within one pop-up).

26) Harry’s – Treat the cart like a landing page

Harry's treats the cart page design differently for subscriptions

What we love:

  • Invests the shopper into the subscription by offering three short and sweet, but clear “steps”
  • Features colors in a 60:20:10 ratio, which ensures the most important elements pull focus
  • Shows benefits as well as reduces risks with visuals – note the “cancellation” and “free shipping” microcopy 

Key takeaway: Show a progress bar in your cart template if you cater to subscriptions – it helps reduce information clutter.

27) Walgreens – Feature ready-to-apply coupons

Walgreens features an auto-apply coupon functionality within their cart design

What we love:

  • Shows coupons on the notification bar as well as on the product details
  • Features a ‘feel-good’ element with multiple incentives for first-time as well as returning customers

Key takeaway: Give customers instant gratification by displaying coupons, right below the product summary.

28) Victoria’s Secret – Nudge shoppers to log in

Victoria's Secret, cart page design example

What we love:

  • Leverages the Barnum effect – makes the copy feel personalized for returning as well as new shoppers
  • Displays a list of available offers on payment modes, plus some store-wide coupons
  • Nudges users to log in to get more personalized recommendations and order history 
  • Shows country, currency, and language on the navigation menu
  • Offers an option to save for later

Key takeaway: Create the need to sign-in and reserve a product, by creating tease elements in your cart page template.

29) West Elm – Give shoppers a heads-up

West Elm's cart page warning about returns

What we love:

  • Informs shoppers to measure before ordering via a screen blocking pop-up
  • Features links to help docs, to filter out interested shoppers 
  • Shows that the custom selection is not eligible for returns

Key takeaway: Make sure shoppers know if there’s a custom return and shipping policy for a particular product on your cart page.

8 Critical Cart Page Challenges to Avoid

1. Not showing an order summary

An order summary on your cart page acts as a nudge for customers to complete the purchase without abandoning it. 

Without an order summary, customers have no way to trust you at the last stage. 

How to solve: 

Use a product image. 

If customers don’t get the ‘What you see is what you get’ feeling, they will abandon their carts. 

Warby Parker uses a captivating product image in their cart page template:

Strong visual in order summary cart page design

Break down costs. 

28% of customers will abandon their carts if they see unexpected shipping costs. 

Give a breakdown of the taxes, shipping, product price, and delivery charges(if any). 

Dollar Shave Club in their cart example comes clean with the subscription billing, shipping, and tax (calculated at checkout):

Transparent pricing in order summary

Make it easy for customers to edit. 

Provide options to edit the size, type, quantity, and variation to reduce a poor UX. 

See to it that the edit in order summary reflects the pricing changes in real-time. 

2. No customer support details

Unsurprisingly, 54% of customers say their expectations with customer support have doubled this year.  

Including customer support details can stop customers from abandoning their carts owing to queries and hesitations.

How to solve:

Make customer support microcopy / icon easily spottable. 

In their shopping cart template, Marc Jacobs mentions the customer support details below the checkout button with microcopy that's hard to miss. 

‍

Customer support details in cart page

Offer a sticky chat button. 

81% of customers prefer live chat support for the convenience it offers.

Case in point, Industrial Hardware includes a simple live chat bubble on the bottom left side of the screen which doesn’t affect the shopping experience. 

Industrial Hardware offers a sticky livechat within their cart page design

Pro Tip — Optimize your site for mobile with one-tap action. Tapping on a phone number will open the phone dialer while an email address opens the email app. 

Check out this practical guide: eCommerce Website Optimization: 28 Improvements You Can Make Today

3. No trust badges

Cyber frauds have become a menace with 18% of customers citing trust issues in sharing credit card information as the reason. 

If your eCommerce cart page design has to convert better, you’ve got to consider this. 

How to solve:

Add an SSL certificate. 

The SSL is a digital certificate that will verify your website’s identity and create an encrypted connection for your customer’s data.  You can get SSL certification from a valid authority. 

SSL certificate encryption

Authorize transactions only from legitimate payment gateways 

Add a trust badge on the cart page to ensure customers don’t withhold their decision at the last minute. 

Godiva includes a Norton trust badge as proof in their shopping cart template:

Trust badge on cart page example

4. No relevant upsells or cross-sells

In a quest to make customers purchase, don’t forget to make product recommendations and increase your AOV.

Without these, shoppers often spend a lot less time in the cart. 

How to solve:

Make the upsell subtle. 

Here’s an example of displaying product recommendations on the cart page without going hard. 

Example for product recommendations on cart page design

Feature slow sellers as cross-sell nudges. 

One way to do this in your eCommerce cart design is to offer smart product bundles at a discounted price. Take a look at how Terra Origin does this:

‍

Cross-sell product recommendations on cart page

Use a downsell nudge for cart abandoners. 

Use the price point as a difference so cart abandoners have an alternative. Crutchfield does this with an open box version and a version with a dent below 

Example for downsell nudge on cart page

Pro Tip — Ensure you: 

  • Cross-sell when have you too many items in your inventory 
  • Upsell to customers who have a high purchase intent 
  • Downsell when you have popular or expensive items in stock 

5. No navigational cues through CTAs  

Long checkout and complicated forms are the reason 17% of customers abandon their carts. In the event leading to checkout, brands have to make it easy for customers to inspire confidence. 

How to solve:

Use action words to inspire checkout. 

Ditch the plain old statements like ‘Next’ and use verbs like ‘Take me to checkout’ and ‘Keep shopping’. This creates a subconscious trigger compelling users to act.  

Bed, Bath, & Beyond uses ‘Are you ready to checkout?’ which is a nudge to drive users to take action. 

Example for using verbs in checkout messaging

Reframe some key CTAs. 

High Sierra uses a 'Continue Shopping' CTA to compel users to look for more items—instead of the traditional “go back” or just a back button:

Back to shopping CTA nudge cart page example

Pro Tip — Make sure your ‘proceed to checkout’ CTAs are bigger than ‘Continue Shopping’ CTAs so that customers are influenced to complete conversions.

Recommended reading: 24 Scientific Strategies to Increase your eCommerce Conversion Rate

6. No FOMO to create urgency

Your shopping cart design template won’t rake in the conversions if there’s no obvious urgency—shoppers will assume they can use their own sweet time to compare, consider and buy. 

How to solve:

Use the “timer” approach. 

The majority of shoppers add items to their shopping cart and forget. ASOS adds a reminder that the items in the cart will disappear after an hour. 

You can also feature a limited time offer.

Cart timer message to drive urgency

Drive checkout with scarcity triggers 

A scarcity alert mentions the items in stock. Etsy makes it even better by mentioning the number of people who have added it to their cart:

‍

Scarcity trigger in cart page design example

You'd also love to read: Why Is Your Conversion Rate Low: Possible Causes + Solutions

7. No quick ways to pay up

Not seeing the preferred choice of payment on the checkout is the biggest upset for customers. 

A connected problem is not having a faster checkout through a popular payment method. 

How to solve:

Offer more payment options. 

Nearly 7% of customers abandon their carts because their preferred payment method wasn’t offered.

Familiarity is one of the effective forms of social proof that drives conversions. 

Adidas offers six payment methods on its checkout page. 

Multiple payment options for faster checkout

Make express checkout a standard in your store. 

8. No BNPL options

45% of customers use BNPL methods to buy products they can't afford.  

BNPL payments are usually interest-free with repayment periods spanning over a six-week term. 

UnderArmour offers 4 interest-free payments on Klarna in its cart page design to enable faster checkout. 

BNPL payment options on cart page design example

Pro Tip —  Offer two to three BNPL options so that customers have ample choice within the cart page template. 

How we can help:

98% of visitors who visit an eCommerce site—drop off without buying anything.

Why: user experience issues that cause friction for visitors.

And this is the problem Convertcart solves.

We've helped 500+ eCommerce stores (in the US) improve user experience—and 2X their conversions.

How we can help you:

Our conversion experts can audit your site—identify UX issues, and suggest changes to improve conversions. 

X
Conversion rate optimization
x
x
Free Guide 👉 👉

31 Cart Recovery Subject Lines That Are Opened Every Time

DownloadGET A PRODUCT PAGE AUDIT