Raphael ThysFollowing are the shopping cart design best practices:
#1 Show thumbnail images of the products placed in the shopping cart
Shopping cart design best practices in 2022 1
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, colour, model) of the product being added.
A big image re-confirms to your customers that they are placing the correct order.
If you are selling anything wearable (like clothes, jewellery, 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, colour, 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, colour, model, etc.
Do you want to set up Google Analytics 4 (GA4) fast and correctly? Yes I want the ebook
#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 that 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.
My Step By Step Guide To Reading Both Standard And Enhanced E-Commerce Reports In Google Analytics
Learn To Read Both Standard And Enhanced E-Commerce Reports In Google Analytics (104 pages) Yes I want the ebook
#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 them 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 a 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 colour 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.
Register for the FREE TRAINING...
"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."
Here’s what we’re going to cover in this training…
#1 Why digital analytics is the key to online business success.
#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.
#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.
#4 Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.
#5 The number 1 reason why conversion optimization is not working for your business.
#6 How to advertise on any marketing platform for FREE with an unlimited budget.
#7 How to learn and master digital analytics and conversion optimization in record time.
My best selling books on Digital Analytics and Conversion Optimization
Maths and Stats for Web Analytics and Conversion Optimization This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.
Master the Essentials of Email Marketing Analytics This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.
Attribution Modelling in Google Analytics and BeyondSECOND EDITION OUT NOW! Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.
Attribution Modelling in Google Ads and Facebook This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.
About the Author
Himanshu Sharma
- Founder, OptimizeSmart.com
- Over 15 years of experience in digital analytics and marketing
- Author of four best-selling books on digital analytics and conversion optimization
- Nominated for Digital Analytics Association Awards for Excellence
- Runs one of the most popular blogs in the world on digital analytics
- Consultant to countless small and big businesses over the decade