Top 25 Cart Page Designs (Examples) For 2024

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 

25 Shopping Cart Page Design Examples That We Love

Here are 25 eCommerce cart design templates for you to consider for your own eCommerce store:

1) Solo Stove - Put convenience first

‍

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 the accidental protection right under the product—details open up into a pop-up

2) Smyths - Give alternate delivery options   

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 are clickable

• Customers can make an informed decision and choose either home delivery or in-store pick-up

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

What we love:

• The cart 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

4) ASOS - Enable guest checkout

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

5) John Paul Mitchell - Experiment with product samples 

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 

6) Dell - Summarize product descriptions 

What we love:

• Dell keeps customers on the cart page with dropdowns summarizing product specifications and star ratings—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

7) Natori - Use pop-ups instead of subpages

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

8) Crate & Barrel - Be clear about shipping info

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

9) Topicals - Let your brand personality shine 

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

10) Zooplus - Enhance geolocation capabilities 

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

If you offer international shipping, make sure your cart design reflects the currency 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

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

12) Revelry - Show the bag count  

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 

13) Urban Outfitters - Give a clear stock alert

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

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

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

15) Louis Vuitton - Add zoom-in on images

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

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

16) Crazy Cups - Balance creativity & info 

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

17) Disney - Show clear messaging to increase AOV 

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

18) Garmentory - Prioritize already wishlisted items

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

19) Dollar Shave Club - Break down cost in detail

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

20) Terra Origin - Bring in solid visuals

What we love:

• The categories menu is visible along the cart page and is easily accessible for 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

21) Flo Living - Help them checkout with confidence

What we love:

• A prominent cart page design that features ‘checkout with confidence’ section 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

22) Warby Parker - Highlight key information

What we love:

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

23) Quip - Prioritize user experience

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

24) MeUndies - Utilize valuable real-estate efficiently

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 their stellar loyalty program

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

25) Burton - Keep things simple

What we love:

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

You don’t always need to include every “high-converting” element on your cart design template—include the elements that will help them check out faster.

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:

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):

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. 

‍

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. 

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. 

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. 

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:

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. 

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:

‍

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 

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. 

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:

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

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.

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:

‍

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 have 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. 

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. 

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.