The Ultimate Guide to Shopping Cart UX Design in 2023

So, you have reeled in a customer and they have clicked “add to cart” on your product page. The product is then placed into their shopping cart and the customer completes the purchase. Seems simple enough, right?

In reality, the average cart abandonment rate is 69.82%. Once a customer moves a product into their cart, your work is not done – you now face several new challenges.

Building upon industry trends and shopping cart UX best practices, this blog will explain what these challenges are and how to design a shopping cart that overcomes them. Optimising your shopping cart UX could be the key to unlocking vast amounts of sales and conversions.

How Do eCommerce Shopping Carts Work?

Just like a shopping cart in the real world, an online shopping cart holds the products that a customer is looking to buy. In turn, the shopping cart page allows customers to see and review all the products they have added to their cart before paying.

This page is an intermediate point in the purchasing funnel where the customer has another opportunity to re-think whether they want to go through with their transaction. Poor UX will give them a reason not to.

Abandoned carts will always be inevitable due to people simply browsing and subjective factors outside of your control. However, there are plenty of things within your control that you can do to dramatically reduce your site’s cart abandonment rate.

The Most Important Considerations for Shopping Cart UX

Improving the user experience of your eCommerce site is centred around making it easy to carry out purchases. That is why the fight to lower your cart abandonment rate begins with shopping cart UX.

Your shopping cart page should assist your customers with their buying decision and seamlessly guide them to the checkout page. This section will show you how to do so. Given the solution often reveals the problem, this section will also explain why carts are so often abandoned.

Here are the most important UX tips to consider when designing a shopping cart page:

Notify the Customer When an Item Is Added to the Cart

When a user adds an item to their cart/basket/bag, they should receive a notification confirming that the item has been successfully added.

Clear feedback helps to build consumer trust. Actions and clicks must have tangible effects on your website otherwise the user will question its functionality and responsiveness.

The number of products in the basket should be clearly indicated next to the icon that you use to denote your cart page. This is essential but also the bare minimum when it comes to notifying the user.

There are many effective ways to deliver a notification beyond simply changing the number next to your cart icon. We recommend using a “mini shopping cart”. Using examples from industry leaders below, we will discuss two different ways you could present your mini cart.

Nike vs. Adidas Example

After you click “Add to Bag” on the Nike website, a temporary pop-up appears in the top right corner. This displays the product’s important information and the text “Added to Bag”.

Nike’s mini cart is simple, clear, and, importantly, has CTA buttons that allow the user to view the entire contents of their basket or simply proceed straight to checkout.

Now, look at how Adidas presents its mini cart…

Here are the key differences between the two competitors:

• Nike’s pop-up is temporary and appears in the corner. In contrast, Adidas uses a permanent modal overlay – a centralised pop-up that you have to manually close to get rid of.
• Adidas includes a related products section in its mini cart.
• Adidas chooses to display and re-calculate the total cost of the basket each time an item is added. Nike only shows the cost of the product just added to the cart. If you have multiple products in your cart, you have to go to the full shopping cart page to see the overall cost.

Nike’s notification method is more familiar among eCommerce sites, perhaps because it is less disruptive. However, Adidas justifies its use of a permanent centralised pop-up by providing more information to the user. 

Not only does the mini cart provide the overall cost of all items in the basket, but it even has a related products section. Good UX is connected to giving your customers as personalised an experience as possible, and that is exactly what product recommendations do. Cross-selling is a great way to generate more sales, but it also creates a tailored shopping experience.

To justify a disruptive notification like Adidas, you should have something to OFFER the customer (e.g. related product suggestions, product insurance, etc.)

Show Total Cost

You need to make sure that the cost display is clear and easy to understand, both on your mini and full shopping cart page. If a customer is surprised by hidden fees or unexpected costs later down the line (e.g. in the “Payment and Review stage”), they will feel as if they have been deceived. 49% of people cite extra costs as the primary reason for abandoning shopping carts.

These “extra costs” typically refer to taxes and shipping costs, which should both occupy their own line alongside the subtotal and total cost of the cart. Equally, if your taxes and/or shipping vary according to location, you need to include a tax and shipping calculator on your page (like B&H does).

Trafiki Tip: If you do not already, you should consider offering free delivery on your eCommerce site. Not only is it a proven way to boost sales and conversions, but you avoid a lot of the hassle outlined above!

Show Other Important Information

All important information must be presented early in the checkout process, not just the total cost. Include the size, colour, and quantity of each item, as well as a link from each item back to its product page.

Suppose a customer purchases a t-shirt available in a range of colours. The cart page should show the t-shirt in the specific colour they selected, rather than using the default product image. You have to show the customer what they expect to see.

Designing a site is all about aligning a user’s expectations with reality. Anytime where these two things do not match up, you are disrupting the payment process and running the risk of losing a sale.

Allow Users to Edit Their Carts Easily

Although you should design your shopping cart in a way that encourages purchases, the customer should always feel as if they are in control. Make it easy for them to delete a product, whether that is via a delete icon or a “remove” button. However, when a customer clicks on the icon or button, also ensure that a pop-up appears asking them if it was intentional.

You must also make it easy for your customers to edit products in their carts. For instance, allow them to edit the quantity of the product by providing:

• “+”/“-” buttons.
• A drop-down menu.
• A box where the user can manually enter a figure.

Equally, allow customers to edit as many other features as possible (e.g. size and colour) without having to return to the product page.

Whatever edits are made, make sure the product image and/or information is updated accordingly. The number one goal is to keep the user on the cart page. If your cart functionality (or lack thereof) means that the user has to return to the product page to re-add a product in a new size/colour, they will feel like they are taking a step back. The buyer’s journey should always be progressive.

Clarks vs. Schuh Example

Clarks’ minimalistic shopping cart page is certainly stylish. The layout is simple and their choice to foreground large, high-quality product images (typically they are smaller) is bold and effective.

However, the functionality is too simplistic for our liking. Whilst you can edit the number of products, you are unable to edit the selected shoe size.

Comparatively, Schuh…

• Allows you to edit shoe size through a drop-down menu. 
• Allows you to even edit products that you have not purchased yet in the related product section! When you click “Check Sizes”, a drop-down menu appears with the available product sizes.
• Allows you to then easily add similar products (in your selected size) to your cart.

This is a great example of how to give customers ultimate control over their shopping experience. When a customer feels that you are limiting their control, they will get frustrated and abandon their cart. When a customer feels that your site is designed to help them, they will reward you with purchases.

Let Users Add Products to a Wishlist

Allowing online shoppers to add items to a “wishlist” is another way to hand over control to the user. Through a heart icon or “save for later” button next to a product, they should be able to create a list of products that they are currently considering buying. They might not want to buy now, but that does not mean they will not want to buy at a later date (e.g. when their paycheck comes in). This feature will make it easy for them to find products quickly, and then buy them!

Trafiki Tip: Also make sure that you give your shopping cart a “long-term memory”. In other words, make sure that if a customer returns to your site after a little while, the products that they added to their basket are still there! Magento calls this a Persistent Cart.

Create a Clear and Bold Checkout CTA

When a customer arrives at the shopping cart page, they should almost immediately know how to proceed to payment, continue shopping, save an item to their wishlist, etc. Your job is to create a clear visual hierarchy that makes such navigation intuitive.

Given that the ultimate goal is to guide your customer towards the checkout page to complete a transaction, your “Checkout” button should be the largest and boldest call-to-action on your page. This is your primary CTA.

Although you should give your customers the option to return to browsing your site, a “Continue Shopping” button should be far less visually dominant. This is your secondary CTA. How you illustrate this hierarchy in practice will become more apparent in our examples below.

But first, here are the two most important factors to consider when designing your “Checkout” CTA button:

CTA Size

One way that your “Checkout” button should stand out is through size; in other words, it needs to be big enough to catch the attention of your customers. However, do not make it so big that it is the only thing that their eyes are drawn to! This is a very outdated UX design tactic. Your customers will sense your desperation for sales, which will be very off-putting.

CTA size is dependent on the device, whether that is desktop or mobile. Mobile CTAs must be able to pass the “thumb test” to avoid touch target problems. They need to be large and easy enough for users to tap without accidentally clicking the wrong thing. Apple, for example, recommends a minimum target size of 44×44 pixels in their iPhone Human Interface Guidelines.

Tap target problems are flagged up on Google Search Console, making them an essential part of mobile SEO as well as mobile UX optimisation.

CTA Colour

The right colour will also help your CTA to stand out on the page e.g.

• SAP found that using orange CTAs boosted conversion by over 32%.
• Performable found that red CTAs boosted their conversion rate by 21%.

We are not telling you this so that you now make your checkout CTA red or orange. Rather, these cases simply illustrate that colour matters. It is all about how your CTA button interacts with the rest of your shopping cart page design. Integrating brand colours into the design will help create a consistent aesthetic, but the most important thing is that your button heavily contrasts the background. This is what will catch the user’s eye.

Trafiki Tip: Do not be afraid to carry out regular testing on your CTA buttons! Finding the right size, colour, placement etc. could have a significant impact on conversion rate.

Zara vs. Marks & Spencer Example

Zara and Marks & Spencer’s shopping cart pages display two slightly different but similarly effective approaches.

There is a lot of white space on Zara’s page (white space is very important in UX design), making the solid black “Continue” button a simple but striking point of difference. The monochrome design not only facilitates this stark contrast between white and black, but it is also in keeping with Zara’s brand colours.

Zara chooses to not have a “Continue Shopping” button of any kind. Nonetheless, the browser back button still allows the user to return to the page they have come from without removing the item they have just added.

This is an important detail. If you want to focus on leading users to the checkout page by not having a “Continue Shopping” button, ensure that your browser back button has this functionality.

Conversely, M&S chooses to have a “Continue Shopping” CTA. It is an uncoloured clickable link that is placed in the bottom left corner, whilst the checkout CTA is a brightly coloured button that appears on the right centre of the cart page. The visual hierarchy is clear.

Just like Zara’s cart page, M&S incorporates its brand colours into the design: green, white, and black. Being the only green feature on the page and surrounded by plenty of white space, the “Checkout securely” button is striking.

The central, right-aligned placement is common across eCommerce sites and works very well on M&S’ page. It catches the user’s natural eye movement as they move from left to right – from the product they have added to their cart to the total cost.

Despite placing it in the bottom right corner, Zara highlights the checkout CTA by using a “sticky” button. The “Continue” button is stuck to the bottom of the screen, meaning that it is always clickable and visible to the user wherever they scroll on the page.

Trafiki Tip: Large sticky checkout CTAs are particularly effective on mobile devices, where the smaller screen means that users have to do far more scrolling. A sticky button will make it easier for them to proceed to checkout and thus subtly encourage them to do so.

eCommerce UX Audit

Different industries may have different nuances and requirements, but the same UX principles can be applied across the entire eCommerce world. This blog gives our readers a sneak peek at the methodology behind an eCommerce UX audit, but is by no means exhaustive.

We are partners with Mouseflow and, in turn, use this industry-leading website analytics tool to conduct our user research. This research stage – which allows us to study real-life user behaviour – is crucial to our UX audit process. Click here to download this software (with a FREE 14-day trial!) and start learning about your audience today.

The shopping cart page is only one aspect of your eCommerce site that you need to pay close attention to when it comes to UX. There are countless other stages in the buyer’s journey. We have also written blogs on:

• Product page UX: if you want to find out how to get customers onto your cart page in the first place!
• Checkout UX: if you want to find out how to get customers to hit that all-important “Place Order” button.

Trafiki is a London-based specialist eCommerce marketing agency that provides UX audits and ongoing UI & UX design services to businesses looking to grow. We offer a UX audit service that is detailed, comprehensive, and utterly tailored to your brand. Moreover, it is a service specially designed for eCommerce sites.

We will help you to create a website that not only looks great but is optimised for conversions. Book a FREE 30-minute Discovery Call with one of our experts today!