Conversion Optimization

Top 25 Cart Page Designs (Examples) For 2024

Is your eCommerce business facing high abandonment rates? Take a look at 25 cart page designs that you can copy to get more sales in 2024!

Top 25 Cart Page Designs (Examples) For 2024

Just a heads up, this post covers:

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 🙂

25 Shopping Cart Page Design Examples That We Love

1) Solo Stove - Put convenience first

cart page design: Convenience first

‍

What you'll love:

  • Once a customer adds a certain product, Solo Stove automatically adds complementary products in this cart design
  • For products that will be delivered sooner, display the expected shipping time—Solo Stove shows the text in a different color for easier reading
  • It shows the supplementary accidental protection right under the product—details of the accidental plan open up into a pop-up, keeping the customer on the cart page

2) Smyths - Give alternate delivery options   

cart page: Alternate delivery options

What you'll 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 these sub-headings 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

shopping cart template: Nudge customers to act

What you'll love:

  • The cart page has some classic features along with differentiated information structure—easy to edit, customers can add, delete or save the products for later
  • The orange free shipping progress bar right above the price summary—the best shopping cart design templates feature this as a conversion nudge for customers

4) ASOS - Enable guest checkout

add to cart page design: Offer guest checkout

What you'll love:

  • Show clear color contrast between the cart area and the header and footer—it catches the eye and helps customers read the text
  • The pricing area has subtle triggers to make customers hit the checkout button. On the shopping cart UI, it only shows card applicability.  While it’s essential to be transparent about extra costs, ASOS puts it in the next step right with discount codes
  • ASOS also offers multiple checkout account options and guest checkout as well

5) John Paul Mitchell - Experiment with product samples 

cart template: Offer product samples

What you'll love:

  • JPM adds important info right on top of their cart page.—their eCommerce shopping cart design includes all the right nudges on delivery details & free shipping
  • JPM’s shopping cart example offers 3 free samples with every order—they let customers pick these samples

6) Dell - Summarize product descriptions 

cart page template: Summarize product description

What you'll love:

  • Dell keeps customers on the cart page with dropdowns summarizing product specifications and star ratings—makes for excellent shopping cart UI
  • The cart design offers an additional layer of authenticity with trust badges in the price summary area
  • The customer service plug-in on Dell’s cart page example reflects the brand’s personality and 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

cart design: Use popups instead of subpages

What you'll love:

  • When clicked, a pop-up opens to show the different supported charities—Natori stays true to its brand beliefs by adding the option in this cart page example
  • Natori brings in a social media plug-in on their shopping cart design with product recommendations—on clicking, it opens a pop-up that shows the different products, where shoppers can buy directly
  • Natori also offers gift options for eligible products—this triggers a pop-up showing different gifting options and a message in their eCommerce cart design

8) Crate & Barrel - Be clear about shipping info

add to cart page: Be explicit about shipping info

What you'll love:

While there are many shopping cart design templates out there, how Crate & Barrel offers shipping information in 4 ways caught our attention:

  • On the top of the cart summary, the message prompts customers to check the tag in the cart that says ‘Ships free’
  • On the right side of the shopping cart UI, customers can see the ‘ships free’ tag beside the product. All the highlighted text like the standard shipping, arrival, ships free, and ships directly from the vendor are clickable. Once clicked, pop-ups display more information  
  • To the left of the cart design, in the price summary, Crate & Barrel displays costs upfront. If the pin code is added, it calculates the tax and displays it
  • The eCommerce cart design also offers a return policy, international shipping, and different pick-up options. When clicked, pop-ups elaborate on the information without pushing customers to subpages

9) My Topicals - Let your brand personality shine 

shopping cart design: Show your brand personality

What you'll love:

  • This eCommerce shopping cart design reflects the brand’s personality through color combos for CTAs. Moreover, Topicals uses unique fonts for different sections making them easy to read
  • The brand has invested in creating cart design elements that stand apart from other cosmetics brand—this contributes to better UX and also establishes brand recall

10) Zooplus - Show global capabilities 

add to cart template: Optimize for international shopping

What you'll love:

  • Zooplus offers customers the ability to edit country and pin code options to estimate shipping information and cost in their eCommerce cart design

If you offer international shipping, make sure your cart design reflects—your cart page should automatically reflect the details and currency changes.

In countries where English isn't spoken much, keep the cart page copy simple so it’s easy to translate through tools.  

11) Sephora - Try thematic product recommendations

shopping cart example: Thematic product recommendations

What you'll love:

  • Apart from samples, the cart page shows two different types of product recommendations. The first type is thematic, ‘shop under 16$’ compels customers to explore Sephora’s flagship products, the second is personalized based on the customer’s search and browsing history
  • Sephora also offers a way to change the shipping method on the cart page itself—from a pop-up, customers can choose between standard, same-day delivery, and in-store pickup

12) Revelry - Show the bag count  

shopping cart page design examples that we love

What you'll love:

  • Right on top of the cart page, Revelry shows the number of items in the bag so customers can verify before checkout
  • Customers can also edit shipping information to calculate the costs within the context of the eCommerce cart design 

13) Urban Outfitters - Give a clear stock alert

ecommerce cart page design: Show clear stock alert

What you'll love:

  • The cart page shows all the necessary details including a low stock alert to create a sense of urgency
  • Moreover, on the product page, when a product is added to cart, it shows a cart dropdown preview for 5 seconds

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

shopping cart page design: Show a cart preview

What you'll love:

  • Everlane has some great nudges on its cart preview—we love copy like the ‘before you go’ and ‘psst! get it now before it sells out’      
  • It also offers product reccos in the small layout with a swipe effect, a win for mobile shoppers

15) Louis Vuitton - Add zoom-in features

add to cart page template: Zoom-in for images

What you'll love:

  • When you click on the zoom-in icon on the image, the product images pop up on the full screen so customers can zoom in and see the intricate details
  • The cart design also offers helpful details like a shop by this date to get delivery in time for Mother’s Day—a gifting prompt below bookends the nudge
  • LV also displays additional information on the left side panel below the price summary—these clickable sections show detailed info through pop-ups

16) Crazy Cups - Balance creativity & info 

best cart page design: Creativity with info

What you'll love:

  • True to its brand, Crazy Cups sets itself apart with cheery, colorful and contrasted brand colors
  • This eCommerce shopping cart design clearly shows the order details and even lets customers edit the subscription order through a pop-up—on the left-hand side, customers can also include details to calculate shipping costs

17) Disney - Show clear messaging to increase AOV 

shopping cart page design examples that we love

What you'll love:

  • The cart page features a banner above the fold that shows information about their loyalty program and cross-selling a limited edition product—a clear CTA lets customers add the product right here on the cart page itself

18) Garmentory - Try different page layouts

add to cart design: Try different page layouts

What you'll love:

  • This cart example has the "saved for later" tab right beside the shopping bag tab—this helps customers to view their wish list in one click instead of being directed to a completely different page

19) Dollar Shave Club - Break down all the costs

cart page examples: Breakdown costs

What you'll love:

  • In your cart design, break down all costs (shipping, handling, tax) and show customers exactly what they’re spending and on what services
  • DSC's shopping cart is easily editable and can be customized if the customer wants to remove a product and increase or decrease the quantity

20) Terra Origin - Bring in solid visuals

shopping cart page: Use strong visuals

What you'll love:

  • We love how the categories menu is visible along the cart page and is easily accessible for customers who would still like to take a second look
  • The trust badge ‘Satisfaction Guaranteed’ makes customers feel at ease as they progress into the last leg of their journey: checkout
  • Focus on good contrast and a clear visual hierarchy in this cart deisgn: customers are encouraged to move ahead with the bright green ‘Checkout’ and ‘Update Cart’ options while ‘Continue Shopping’ subtly exists

21) Flo Living - Help them checkout with confidence

ecommerce cart design: Use social proof to encourage checkout confidence

What you'll love:

  • A prominent cart page design in the health and wellness space—we love how Flo Living does this with a ‘checkout with confidence’ section and clear customer testimonials on the cart page
  • You can also use your cart page to upsell similar products that will bring value to your customers—in the nutraceutical industry, customers actively seek information on products that'll make their current supplements more effective

22) Warby Parker - Highlight what’s important

cart examples: Highlight areas of importance

What you'll love:

  • Warby Parker's shopping cart UX design is sleek, minimal, and highlights the most important elements (savings and shipping info etc.)
  • Alternative financing helps bridge the gap by breaking the total cost down into monthly installments

23) Quip - Maintain a striking brand aesthetic

shopping cart design ideas: Brand aesthetics

What you'll love:

  • The best shopping cart design templates use visuals well—the one by Quip builds familiarity in the minds of customers and drives better recall
  • Use a sidebar cart page, this gives customers the flexibility to keep browsing through products while having the cart page at easy access whenever they’re ready to checkout
  • The upsell nudge on the top of the cart design is also stellar. It’s very neatly done, is contained in 15% of the total page layout, gets the message across

24) MeUndies - Utilize valuable real-estate efficiently

cart design ideas: Make optimum use of real estate

What you'll love:

  • The quick add to cart page dropdown is accessible and gives the customers the flexibility to keep browsing as they’d like
  • The nudge for customers to become a Member—MeUndies is known for their stellar loyalty program and it’s interesting to see them reserve a spot for it even on such valuable real estate

25) BURTON - Keep things simple

product cart design: Keep it simple

What you'll love:

  • The BURTON cart template has one goal: to get customers to checkout, possibly with a larger cart value. Everything is geared toward making that happen: the 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 Elements for Higher Conversions

1. Order Summary — Show customers what they want to see 

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

For a captivating order summary, here’re a few pointers you can benefit from:

a) Sell using images 

Your shopping cart design template must have an order summary with a compelling product image to maintain purchase appeal. 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 its order summary.

Strong visual in order summary cart page design

b) Increase checkouts with transparent pricing 

Hidden shipping costs are the major reason for high cart abandonment rates. 28% of customers will abandon their carts if they see unexpected shipping costs. 

Be transparent about the pricing on the cart page instead of revealing it on the checkout page. 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 which is calculated at checkout.

Transparent pricing in order summary

c) Make it easy for customers to edit 

As is the norm with most eCommerce cart design examples, there's an edit option so customers can edit without having to go back. 

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. 

Pro Tip — Include a checklist of all the additional items that come with the product. It could either be what the pricing covers or if split payments are accepted. This serves as an additional perk and adds value to the order. 

2. Be at the customer’s service: Provide customer support details for a better customer experience 

The expectations for customer experience are rapidly increasing. Surprisingly, 54% of customers say their expectations with customer support have doubled this year.  

The cart page is crucial in the purchase decision process. Including customer support details can stop customers from abandoning their carts owing to queries and hesitations.

Known for the reassurance it provides, proactive customer support makes customers feel that brands care about them. 

Here’re two tips to help you out — 

a) Make it easy to spot

Unless your customer support is easy to find, customers are not going to reach out. Insert the customer support details below the checkout button on your cart page. 

Add an anchor to the customer support page details so that it acts as a nudge compelling customers to take action. 

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

‍

Customer support details in cart page

b) Introduce chat for convenience 

81% of customers prefer live chat support for the convenience it offers. Perhaps, it could be due to customers not having to leave the screen and incur additional costs to contact a store. 

A simple chat bubble towards the left side of the screen will nudge customers to click. It doesn’t cause friction thereby making for a great user experience. 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. Security badges to address risk aversion 

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

With these measures you will be able to make a site secure by adding the following to your eCommerce shopping cart design— 

a) Add an SSL certificate to foolproof your website 

For an eCommerce website, HTTP or any random server isn’t going to cut it. 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

b) Authorize transactions from legitimate payment gateways 

You will be receiving tons of debit card and credit card payments on your site. To see to it that customers feel secure, process transactions only from secure and trustworthy 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 of a secure payment gateway. 

Trust badge on cart page example

4. Upselling - Nudge more sales with quick add-ons  

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

The right shopping cart design ideas will help you help customers add more items without requiring them to leave the page. 

Implement these hacks to successfully upsell — 

a) Increase AOV with subtle upsell 

The product recommendations on your cart page must be personalized. It should supplement or complement the product in the cart. 

Include it as a ribbon and not as a pop-up disturbing the shopping experience. 

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

Example for product recommendations on cart page design

b) Empty slow-selling stocks with cross-sell nudge 

Got a lot of slow-moving inventory?  

Display them on the cart page to enable product discovery. By featuring related items, you can cross-sell products that have an added utility value. 

One way to do this is to offer smart product bundles at a discounted price. Take a look at how Terra Origin cross-sells its products on its cart page. 

‍

Cross-sell product recommendations on cart page

c) Convert cart abandoners with a downsell nudge 

If your products are on the higher side, make sure there’s something for everyone. This could be a pre-owned or of slightly lesser quality. 

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. Include CTAs as navigational cues  

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. 

Here’s how you can use CTAs as navigational cues in your eCommerce cart design: 

a) Use *verbs* to lead 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.  

As is the case, users are not able to go to the checkout page after continuing their shopping. 

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

b) Increasing AOV by framing CTAs differently 

We get that you’re eager to get your customers to convert, but you need to pause. You can rename the Back button to ‘Keep shopping’ so users can keep looking and buy something they like. 

High Sierra uses a Continue Shopping CTA to compel users to look for more items. 

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. The primary goal is conversions and that needs to be fulfilled. 

6. FOMO - Drive results with persuasion triggers 

The human mind is more emotionally driven when it comes to shopping. Customers are subject to cognitive biases. The main reason why persuasion techniques drive customers to complete purchases immediately. 

Here are 2 triggers you can use to increase conversions through your cart design— 

a) Reduce checkout time with timers 

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. 

Cart timer message to drive urgency

This instills a sense of urgency for customers to quickly browse and make purchases making checkout faster. 

b) Drive checkout with scarcity triggers 

While limited-time cart reservation and scarcity triggers may sound the same, there's a difference. 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 carts. 

This combines low stock alerts with high demand to compel customers to make faster checkouts. 

‍

Scarcity trigger in cart page design example

Pro Tip — Stop restricting yourself to scarcity triggers. Relying solely on it means customers will stop falling for it. Find other ways to increase the urgency 

7. Payments: Design faster payment options 

Not seeing the preferred choice of payment on the checkout is the biggest upset for customers. Offer different payment options so they don’t buy from a competitor. 

a) Offer more payments for quick checkouts 

Nearly 7% of customers abandon their carts because their preferred payment method wasn’t offered. Customers have a favorite payment method for the convenience and trust it offers. Paypal and Google are the popular payment methods out there that have a high user rate. 

Adidas offers six payment methods on its checkout page. 

Multiple payment options for faster checkout

Visa, Maestro, and American Express are popular payment methods. Familiarity is one of the effective forms of social proof that drives conversions. 

b) Offer multiple shipping options 

Provide customers with an option to ship to a different address instead of the billing address.  Customers will have to go to and forth to their account to update their details causing frustration. 

Offering multiple options improves user experience and makes customers make recurring purchases. 

Flo Living offers multiple shipping options making checkout easier and faster. 

Multiple shipping options on cart page design for faster checkout

8. Provide alternative financing: Offer Buy Now, Pay Later options 

Offering BNPL payment methods on your cart page reduces the financial burden of buying a product. 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 on its cart page to enable faster checkout. 

BNPL payment options on cart page design example

Pro Tip —  Offer two to three BNPL options so customers have ample options to choose from 

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 👉 👉

50 Things you need to Learn from Amazon.com’s UX

DownloadGET A PRODUCT PAGE AUDIT