Top 25 Cart Page Designs (Examples) In 2023

Just a heads up, this post covers:

• 25 Shopping Cart Page Design Examples That We Love
• 8 Critical Cart Page Elements for Higher Conversions

The virtual shopping cart sees more rejection than any other eCommerce webpage. 

Even Sarah McLachlan in the new Bolt ad calls attention to the shopping cart, complete with maudlin music and images of cute teddy bears left to fend for themselves in old-school metal shopping carts. :D  

While the parody made us chuckle, the issues with shopping cart pages are very very real. 

Due to the pandemic, the eCommerce market has grown exponentially and now, the market is fiercely competitive.  

The consumer decision cycle is getting longer

It’s true. 

The standard consumer decision process is no longer applicable. 

Because not all shoppers follow the same journey. 

Today, customers might come across your online store through different channels. But after adding products to the cart, customers second-guess and abandon the cart. 

Some customers might even delay their decision by days, weeks, and even months.         

Shopping cart page designs are ever-evolving

Research shows the average cart abandonment rate across all industries is around 69.57%. 

More drop-offs mean more revenue loss.

That’s why eCommerce business owners need to keep trying new things to decrease those cart page drop-offs.      

25 Shopping Cart Page Design Examples That We Love

1) Solo Stove - Put convenience first

‍

What you'll love:

• Once a customer adds a certain product to the cart, Solo Stove automatically adds complementary products to the cart.  

• For products that will be delivered sooner, display the expected shipping time. Solo Stove does it right by showing the text in a different color so that it’s easier to read. 

• It shows the supplementary product like the accidental protection right under the applicable product. When clicked, details of the accidental plans open up into a pop-up, keeping the customer on the cart page.    

2) Smyths - Give alternate delivery options   

What you'll love:

Smyths offers multiple shipping and delivery options on their cart page. However, the details are not crowded in one place. 

• They can read more details about the shipping and delivery before the footer. 

• Delivery information is summed up in three points right under the header. And these sub-headlines are clickable. When clicked, a pop-up opens, and customers can read the information without leaving the cart page.  

• Lastly, 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 page

What you'll love:

• The cart page has some classic features. What sets it apart from the rest is the information structure. The cart is easy to edit, customers can add, delete or save the products for later.

• The highlight of this cart page is the orange progress bar right above the price summary so that customers know how close they are to availing free shipping.

4) ASOS - Enable 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 to read the text and prompts without too much effort.  

• The pricing area has subtle triggers to make customers hit the checkout button. On the cart page, 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 

What you'll love:

• JPM adds important info right on top of the cart page. Their cart page includes all the right nudges to get free shipping and other shipping details.

• While having more is always a good option, you shouldn’t paralyze customers with too many choices. JPM’s cart page offers 3 free samples with every order. And we love how they let customers choose the samples instead of forcing unnecessary products. This is a smart tactic to not overwhelm customers and offer them long-term benefits. 

6) Dell - Summarize product descriptions 

What you'll love:

• Dell strives to keep customers on the cart page with dropdowns summarizing product specifications and star ratings. This helps customers to check product details without hitting the back button. 

• The cart page offers an additional layer of authenticity with trust badges in the price summary area. If your average order value is higher than most online stores, make sure to offer as many verified credentials and payment gateways as possible for a smoother checkout process.

• The customer service plug-in on Dell’s cart page reflects the brand’s personality and offers multiple ways of communication.     

• While adding more than 2 CTAs might overwhelm customers, Dell clearly distinguishes intent. The brand understands that customers need time to think over their purchases and accordingly offers to save the cart with a log-in.

7) Natori - Use pop-ups instead of subpages

What you'll love:

• When clicked, a pop-up opens to show the different supported charities. While this type of messaging is not new, most online stores add it during checkout either as a checkmark option. So it seems like an afterthought. Natori stays true to its brand beliefs by adding the option on the cart page. 

• While adding a social media plug-in on the cart page, Natori combines it with product recommendations. When you click, it opens a pop-up that shows the different products used in the image. Customers can click on the different products and shop for them in a different tab. 

• Natori also offers gift options for eligible products. This triggers a pop-up showing different gifting options and a message.   

8) Crate & Barrel - Be clear about shipping info

What you'll love:

The cart page by Crate & Barrel offers shipping information in 4 ways:

• 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 cart page, 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.   

• On the left side in the price summary, Crate & Barrel displays costs upfront. If the pin code is added, it calculates the tax and displays that as well. This ensures transparency.

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

What you'll love:

• The cart page reflects the brand’s personality through color combos for CTAs and the main cart area. Moreover, Topicals uses unique fonts for different sections and instead of looking busy, they have managed to position the sections so that it’s easy to read.

• The brand has invested in creating cart page elements that stand apart from any other cosmetics brand. This contributes to better UX and also establishes brand recall, just because it’s different.      

10) Zooplus - Show global capabilities 

What you'll love:

• Zooplus offers customers to edit country and pin code options to estimate shipping information and cost. If you offer international shipping, make sure your cart page reflects it. If customers choose a particular country for delivery, the 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

What you'll love:

As a beauty products retailer, Sephora stocks different brands and labels. It’s often the IT store that introduces new brands/labels or sponsors brands from other countries to new markets. Furthermore, beauty products are always a hit and miss.

• 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. Below, it shows product recs 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  

What you'll love:

• Right on top of the 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 right there on the cart page. 

13) Urban Outfitters - Give a 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

What you'll love:

• Everlane has some great nudges on its cart preview. We love copies like the ‘before you go’ and ‘psst! get it now before it sells out’.      

• It also offers product recs in the small layout with a swipe effect, a win for mobile shoppers.   

15) Louis Vuitton - Add zoom-in features

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

What you'll love:

• True to its brand, Crazy Cups sets itself apart with cheery and colorful brand colors. While the main part of the cart page is simple text against a white background, the other elements on the page create an appealing contrast.    

• Even though it’s whimsical, Crazy Cups doesn’t miss out on the details. It 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 

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 to cart right there without opening another tab. 

18) Garmentory - Try different page layouts

What you'll love:

• The cart page 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 - Breakdown all the costs

What you'll love:

• Break down all costs (shipping, handling, tax) and show customers exactly what they’re spending and on what services. This ensures price transparency and is aligned with the free shipping nudge. If customers can see that they’ll save money on shipping by spending more on the products, they will do that.

• 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

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. Customers are encouraged to move ahead with the bright green ‘Checkout’ and ‘Update Cart’ options while ‘Continue Shopping’ is available but draws almost no attention.

21) Flo Living - Help them checkout with confidence

What you'll love:

• Especially prominent in the health and wellness space, it’s essential to ease your customers’ concerns as they choose to trust your products with their ailments. 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 about making supplements more effective and that often includes using other products.

22) Warby Parker - Highlight what’s important

What you'll love:

• Warby Parker stands for the lifestyle, their products are just a reflection of it. This holds true even with their cart page: it’s sleek, minimal, and highlights what’s most important.

• Alternative financing is a goldmine for brands (and customers) seeking luxury products. A large part of customers who purchase luxury products often can’t afford it directly; alternative financing helps bridge the gap by breaking the total cost down into monthly installments.

23) Quip - Maintain a striking brand aesthetic

What you'll love:

• Maintains visuals. Whether it’s social media posts, landing pages, emailers, or shopping cart template, have a set brand guideline and follow it through. This helps build familiarity in the minds of customers and drive better recall for the products.

• 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 page is also stellar. It’s very neatly done, is contained in ~ 15% of the total page layout, and gets the message across. Works well in accordance with the previous point.

24) MeUndies - Utilize valuable real-estate efficiently

What you'll love:

• The quick dropdown add to cart page design. It’s easily accessible, doesn’t take too much effort, 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

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.

• Don’t overdo it. You don’t always need to include every “high-converting” element on your cart page template. Instead, cater to what your customers truly care about. 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 cart page 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.

b) Increase checkouts with transparent pricing 

Hidden shippen 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 comes clean with the subscription billing, shipping, and tax which is calculated at the checkout.

c) Make it easy for customers to edit 

As is the norm with most cart designs, most pages have an edit option so customers can edit the order there instead of going back to the product page. 

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. 

Marc Jacobs mentions the customer support details below the checkout button with a copy that is hard to miss. 

‍

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 in no time — 

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. 

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. 

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 cart page is a vital element in making customers add more items to their cart 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. 

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. 

‍

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 

Pro Tip — Ensure you: 

• Cross-sell when have you too many items in your inventory 
• Upsell to customers who have a high purchase intent 
• Down sell 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: 

a) Use *verb* 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. 

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. 

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 — 

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. 

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. 

‍

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. 

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. 

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. 

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.