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
â
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  Â
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
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
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
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
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
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
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Â
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Â
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
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 Â
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
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
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
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Â
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Â
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
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
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
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
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
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
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
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
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
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
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
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
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:
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.Â
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.Â
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.
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.
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:
â
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.Â
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.Â