Following are the shopping cart design best practices:

#1 Show thumbnail images of the products placed in the shopping cart

The objective of a shopping cart page is to preview the order before completing a purchase. 

Without thumbnail images, your customers may not know exactly what they are buying. This could result in placing a wrong order and request for refund/return down the line for you.

#2 Display ‘big’ thumbnail images of the products placed in the shopping cart

Just displaying a thumbnail image of the products added to the shopping cart is not enough. The image needs to be big enough to show the finer details (like size, color, model) of the product being added. A big image re-confirms your customers that they are placing the correct order.

If you are selling anything wearable (like clothes, jewelry, shoes, etc) where knowing the finer details of a product are very important then using large thumbnail images on the shopping cart page is a must.

#3 Use ‘clickable’ thumbnail images of the products added to the shopping cart

The thumbnail images on the cart page should be clickable so that your customers can easily go back to the product detail page to:

• Look at the product details one more time before placing the order.
• Change the order by changing the quantity and other product attributes like size, color, model, etc.

#4 Use clickable names of the products added to the shopping cart

The names of the products added to the shopping cart should be clickable so that your customers can easily go back to the product detail page to:

• Look at the product details one more time before placing the order.
• Change the order by changing the quantity and other product attributes like size, color, model, etc.

#5 Clearly show the ‘price’, ‘quantity’ and ‘availability’ (in stock, out of stock) of each product added to the shopping cart

Product price, quantity, and availability all play an important role in re-confirming your customers that they are placing the correct order.

‘Availability’ feature is especially useful when your customers return back to their shopping cart after several days or weeks. You don’t want your customers to check out a product that is out of stock.

#6 Provide the ability to change the quantity of the product added to the shopping cart

If your customers can change the quantity of a product from the cart page without visiting the product detail page then it provides a good shopping experience which reduces friction and boosts sales.

#7 Provide the ability to remove a product from the shopping cart

Your customers must be able to remove a product from the cart page in case they changed their minds and don’t want to purchase it. If you do not provide such functionality then it could result in high checkout abandonment. 

#8 Show the cart subtotal on your shopping cart page

The subtotal shows the total price of the products added to your cart without shipping cost and/or taxes. It is just another way of re-confirming your customers that they are placing the correct order.

#9 Show the cart total on your shopping cart page

A cart total (or order total) shows the total price (including shipping cost and/or taxes) of the products added to the shopping cart. Whereas the subtotal shows the total price of the products without shipping cost and/or taxes. 

According to the study conducted by Statista.com the number 1 reason for checkout abandonment is hidden charges:

Any extra charge/ fees during the checkout process can immediately put off a visitor and can cause him to abandon the shopping cart straightaway. Therefore be upfront with your prices including shipping fees esp. when your shipping fees and/or taxes considerably increase the total size of the shopping cart.

Instead of just displaying subtotal on your cart page, whenever possible, also display the cart total. 

#10 Do not prominently display the coupon code field on your shopping cart page

When you prominently display a coupon code field on the cart page, you are encouraging your customers to leave the website and find the discount code. And when they leave the website there is no guarantee that they will return.

Minimize the size of the coupon code field. In this way, you are minimizing the magnitude of coupon code on your checkout process. You are making the use of coupon code trivial. 

#11 The cross-selling or upselling you are doing on the shopping cart page should make sense

Upselling is the practice of encouraging a customer to buy a higher-priced version of the product he is planning to buy. 

If a customer is planning to buy an iPhone 7, you recommend him iPhone 7 plus (which is a better but more expensive version of the iPhone).

Cross-selling is the practice of encouraging a customer to buy products that are related or complementary to the product he is planning to buy.

If a customer is planning to buy an iPhone 7, you recommend him to also buy an iPhone charger and iPhone case. 

If you are already doing cross-selling or up-selling on a shopping cart page then check the quality of the products’ recommendation. Do they make sense? 

#12 A/B test your cross-selling or upselling offers 

Cross-selling or upselling on a shopping cart page can both increase or decrease your website sales. 

It is important that you A/B test your cross-selling or upselling offers before you make it available for all website users.

#13 The content of your shopping cart should not expire after a certain time period

Ideally, your shopping cart content should never expire. This lets your customers continue shopping where they left off. It is good user experience.

#14 Remove any unnecessary element on the shopping cart page which takes a user away from the page

The objective of a cart page is to encourage users to checkout.

Any unnecessary web page element (like banner ads, Google AdSense, Email pop-up, etc) which takes a user away from the cart page creates a distraction and should be removed. 

Use the heatmap tool (like the one provided by hotjar.com) to determine whether certain elements on your page steal users’ attention from the ‘checkout’ button.

#15 Make sure the checkout button stand out on the cart page

The ‘checkout’ button is the most important element on a shopping cart page. 

Without the ‘checkout’ button, the cart page has no purpose. You want people who view their shopping cart to checkout. However, this is possible only when the ‘checkout’ button stands out on the page. For your ‘checkout’ button use a contrasting color and larger font. 

#16 Place the ‘checkout’ button above the fold

Above the fold refers to the upper half of a web page which is visible to website users without scrolling down the page. Since the ‘checkout’ button is the most important element on a cart page, it should be placed above the fold where the bulk of website visitors focus on. 

#17 Use two checkout buttons on the cart page, one above and one below the cart

The advantage of using the second checkout button below the cart is that when there are a lot of items in the shopping cart, it becomes easier for customers to checkout from the lower half of the cart page without scrolling all the way up.

Related Articles

1. Schwartz five stages of awareness in marketing
2. Product detail page design best practices
3. Product images best practices for ecommerce websites
4. Product pricing strategies for ecommerce websites
5. Writing product descriptions that convert
6. 12 ecommerce best practices for your category pages
7. 25 web form design best practices – Optimizing forms for conversions
8. Shopping cart design best practices
9. Website navigation best practices
10. Brand reputation audit to find conversion issues