eCommerce Shopping Cart UX Design Tips
Every year, 4 trillion dollars are lost in eCommerce sales due to cart abandonment.
That’s a punch to the gut for eCommerce businesses. Buyers who’ve clicked the add-to-cart button are usually ready to buy. They’ve looked at a product. Loved it. Decided they want it.
And yet, for some reason or another, they balk at the shopping cart. They abandon it and never proceed to check out and pay.
What does this mean for you? It means that hidden opportunities are hiding on your cart page. Optimize them and you’ll see conversion increases very quickly.
So that’s what we’re going to talk about today. Let’s take out that sting caused by all the lost revenue from a low-converting shopping cart page. Let’s look at eCommerce shopping cart UX designs that optimize user experience..
I’ll walk you through:
- the purpose of a cart page
- what to include in a cart page design
- some eCommerce shopping cart UX optimization tips
What is the purpose of an online shopping cart page?
The shopping cart page is for customers to see all the products they’ve added to cart. It includes an itemized product list and its cost and is the customers’ last stop before they check out and pay.
Think of the cart page as that moment just before you go to the cashier. If you have a shopping list, this is the time you give it a final check to make sure you’ve got everything you wanted to buy. You don’t have a credit card in hand yet. But you know that if all goes as planned, your next stop is at the cashier to pay.
As you can see, the shopping cart page is a pivotal part of conversion optimization. If the cart page is not optimized for conversions, a customer –who’s very close to giving you his money, I may add– will leave out of sheer frustration.
So how should you optimize the shopping cart page for conversions?
There are many things you can do. But for now, we’ll talk about some important shopping cart UX best practices to get you started.
What should be in an eCommerce shopping cart page for optimal user experience?
Based on the hundreds of tests we’ve done at Convertica, there are some elements that a shopping cart page must include. We think of these as required elements for a smooth user experience.
These elements are:
- the option to
- add, decrease or delete an item
- an itemized list of products ordered. This list should include
- the color, size, and quantity
- a clear thumbnail image of the exact item they ordered
- a product title linked to the product page
- the cost of each item and overall total cost
- a CTA button to checkout and/or to continue shopping
- trust signals
- shipping info and other added costs
- the estimated delivery time
Here are some elements which are of lesser importance but worth testing:
- The ability to move the item to a wishlist or a save for later button
- Customer testimonials
- Upsell or downsell options
- an option to mail the items to themselves
- the ability to calculate shipping fees (especially when you deliver internationally)
eCommerce Shopping Cart Page Design Optimization
(with examples of the best shopping cart UX Designs)
1. Give clear feedback when a buyer clicks the add to cart button
Imagine a person who’s never shopped online before. He clicks the add to cart button on the product page and nothing happens. I bet he’d be asking questions like:
- Did I buy that?
- Where did it go?
- Did I click that button hard enough?”
- Is it already in the cart?
See. We need feedback when shopping online. So when a customer adds an item to the cart, he’ll need to know that he’s done the right thing. That his orders are already stored in the cart. This reduces any anxiety he may have. It also builds on his confidence and trust in your system and your business —which is exactly what you want when he already has the intention to buy.
So the first thing to shopping cart page optimization is to give clear feedback when a buyer clicks the add to cart button. Show him that he has made something happen when he clicked the button.
There are many ways you can do this. You can
- show an overlay or popover with info that the item has been added to cart
- change the cart icon. Most sites do this by adding the number of items bought. Big Bonus points if the number is in a different color. And even better if the subtotal of the items is also included.
Here are some examples of how some eCommerce sites with great user experience do this.
Let’s start with one that Amazon has recently been experimenting with. Here’s what it looks like. A small popup shows on the side of the page with images of the most recent items added to cart. It includes crisp thumbnail images that are linked to the product page, too.
Another way you can give feedback is to alter the button’s design indicating that the product has been added. Best Buy does this by changing the button’s color and text as the item is being added to cart.
Lastly, the shopping cart icon should also change. Most eCommerce stores do this by adding the number of items added to cart. Toys R Us takes this a notch better by adding the cost of the items, too.
2. Make shipping info and other added costs clear
Online shoppers have a big issue with paid shipping. It’s at the top of the list why people abandon their carts. If you charge for shipping, you have a big psychological hurdle to overcome. As this Reddit user finds out in his eCommerce experiment, customers would rather pay more for a product than pay for shipping.
Because shipping cost affects buyer behavior a lot, address it at the cart page. Free shipping is ideal but if you must charge for it, then make it clear how much it’s going to cost them. Ideally, if there’s a big difference in shipping for different destinations, allow buyers to calculate shipping within the page.
When designing the shopping cart page for UX, here are some things to take note of:
- If you offer free shipping, then make it clear on that page
- Offer the option to calculate shipping fees on the page
- If you only offer free shipping when the total purchase cost is at a specific amount, then make that clear too. Put something like, “You’re $20 dollars away from qualifying for free shipping“
- If there’s a shipping fee for each item, show the overall total
Check out how Walmart does this. Notice the message, “Want free delivery? Add $15 more”. They’re hitting two birds with one stone here. They’re overcoming the problem that people have with shipping fees and they’re also increasing average customer order value.
3. Allow customers to have control of the cart
Imagine you’re doing your weekly shopping at a grocery store. But there’s a catch. Once you’ve added things to your cart, you’re not allowed to take anything out of it. How frustrating would that be?
But that’s what you do when you don’t give customers any control of the shopping cart page. It disrupts their shopping experience and escalates their frustration level.
So yeah. This is the time when buyers should be given a lot of control. Here are shopping cart page UX designs to make this possible. Allow customers to:
- add, get rid or decrease the quantity of the number of items ordered
- change the color or size
- add items to a wishlist, save for later, or email the list of items to themselves.
- see a full page with all the items included.
- go back to the product pages of each item ordered. Do this by linking the image or the item name
- have a clear visual image of what they’ve added to cart
Crutchfield does this well. Buyers can easily remove, save or add an additional item to the cart. Notice how it even has a shipping/delivery estimator on the page.
4. Make the call to action buttons clear
The cart page’s purpose is to get the shopper to “move along” and pay. You lead him from one step to the next with a clear call to action button.
If the buyer is already happy with what he sees on the cart page, then it should also be easy for him to take the next step —which is towards the all-important page where money passes hands— the checkout page.
Make this button to checkout very clear. So clear that there’s no doubt in the buyer’s mind what to do next. We have an article just for CTA buttons, so I won’t tell you more about that here. But the important thing to bear in mind with buttons is that they have to stand out from the rest of the items on the page. You can do this by making it bigger or using a color that’s different from the rest of the colors on the page.
It’s worth testing the shopping cart button UX design. It might just increase your conversion rate. Even Amazon, which has used the same button for years, has just recently started testing a rounded button. If they regularly test, shouldn’t we all?
Talking of testing, here are a couple of tests you can do in your CRO campaigns which we often find positively affect conversion rates:
- Apart from the Checkout button, also add buttons that take the shopper to “Continue Shopping”, or to the last page they looked at.
- Try a sticky “Proceed to Checkout” button that’s always visible to the buyer. We see this increase conversions especially for buyers using mobile devices.
5. Show different payment methods
Not everyone wants to pay by credit card. This is especially true in some countries where buyers prefer using offsite payment processors. With insight on the types of buyers you have, ensure that you make it clear on the cart page the different payment methods available.
Show logos that your buyers are familiar with. Here are some of the ways that different eCommerce stores do this.
Build.com shows 3 different ways to pay on their cart page.
6. Make the best use of trust signals
Buyers have to trust you first before they’ll give you their money. If you’re not a household name —which is the reality for a lot of eCommerce stores— show customers that you’re a trustworthy and credible business.
Stats show that 60 to 80% of buyers in many eCommerce websites are first-time visitors. This means most visitors who visit your site don’t know anything about you. So you have to prove yourself to them. You do this with trust badges and signals. Here’s our complete guide on using social proof if you want to know more about trust signals.
But for now, just know that adding trust signals is one of the easiest and cheapest things you can do to increase conversions.
Have a look at the top reasons why buyers do not have confidence in eCommerce.
That’s a lot of fear that you can very quickly get rid of by simply adding trust signals.
Here are a couple of cart pages of two sites. Study them for some shopping cart UX design inspirations. And how they use trust signals on the page.
Build.com shows the star rating for the product.
John Lewis adds not one but three trust signals on its page:
- The Norton secure logo
- Logos of credit card companies and other payment gateways
- The text: BESTSELLER: 33 bought in the last 24 hours (social proof)
You now know the best practices for cart page UX designs.
But if you must remember only one thing, it’s this.
The cart page’s job is to make it easy for your customers to see the items they’ve added to cart. The key word is easy.
Make it so easy for them that they don’t have to do a lot of thinking. Make it so easy that their journey from clicking the add to cart button all the way to checkout is smooth and not burdened with pauses of uncertainty, overwhelm, or difficulty.
Do this and you’ll have buyers who trust you and find pleasure in shopping with you. And before you know it, more people who land on your cart page will have no problem clicking the checkout button.