Shopping cart design best practices
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.
Get the E-Book (50 Pages)
Get the E-Book (104 Pages)
#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
- Schwartz five stages of awareness in marketing
- Product detail page design best practices
- Product images best practices for ecommerce websites
- Product pricing strategies for ecommerce websites
- Writing product descriptions that convert
- 12 ecommerce best practices for your category pages
- 25 web form design best practices – Optimizing forms for conversions
- Shopping cart design best practices
- Website navigation best practices
- Brand reputation audit to find conversion issues
Do you know the difference between Web Analytics and Google Analytics?
99.99% of course creators themselves don’t know the difference between Web analytics, Google Analytics (GA) and Google Tag Manager (GTM).
So they are teaching GA and GTM in the name of teaching Web analytics.
They just copy each other. Monkey see, monkey do.
But Web analytics is not about GA, GTM.
It is about analyzing and interpreting data, setting up goals, strategies and KPIs.
It’s about creating strategic roadmap for your business.
Web Analytics is the core skill. Google Analytics is just a tool used to implement ‘Web Analytics’.
You can also implement ‘Web analytics’ via other tools like ‘adobe analytics’, ‘kissmetrics’ etc.
Using Google Analytics without the good understanding of ‘Web analytics’ is like driving around in a car, in a big city without understanding the traffic rules and road signs.
You are either likely to end up somewhere other than your destination or you get involved in an accident.
You learn data analysis and interpretation from Web analytics and not from Google Analytics.
The direction in which your analysis will move, will determine the direction in which your marketing campaigns and eventually your company will move to get the highest possible return on investment.
You get that direction from ‘Web analytics’ and not from ‘Google Analytics’.
You learn to set up KPIs, strategies and measurement framework for your business from ‘Web analytics’ and not from ‘Google Analytics’.
So if you are taking a course only on 'Google Analytics’, you are learning to use one of the tools of ‘Web analytics’. You are not learning the ‘Web analytics’ itself.
Since any person can learn to use Google Analytics in couple of weeks, you do no get any competitive advantage in the marketplace just by knowing GA.
You need to know lot more than GA in order to work in Web analytics and marketing field.
So what I have done, if you are interested, is I have put together a completely free training that will teach you exactly how I have been able to leverage web/digital analytics to generate floods of news sales and customers and how you can literally copy what I have done to get similar results.
Here what You'll Learn On This FREE Web Class!
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.
FREE GIFT “Key Performance Indicator – KPI” (32 pages ebook) – Stay till the very end of the Webinar and I’ll give you this FREE Gift!
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 Beyond
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.
Himanshu Sharma
Digital Marketing Consultant and Founder of Optimizesmart.com
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.
Get the E-Book (50 Pages)
Get the E-Book (104 Pages)
#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
- Schwartz five stages of awareness in marketing
- Product detail page design best practices
- Product images best practices for ecommerce websites
- Product pricing strategies for ecommerce websites
- Writing product descriptions that convert
- 12 ecommerce best practices for your category pages
- 25 web form design best practices – Optimizing forms for conversions
- Shopping cart design best practices
- Website navigation best practices
- Brand reputation audit to find conversion issues
Do you know the difference between Web Analytics and Google Analytics?
99.99% of course creators themselves don’t know the difference between Web analytics, Google Analytics (GA) and Google Tag Manager (GTM).So they are teaching GA and GTM in the name of teaching Web analytics.
They just copy each other. Monkey see, monkey do.
But Web analytics is not about GA, GTM.
It is about analyzing and interpreting data, setting up goals, strategies and KPIs.
It’s about creating strategic roadmap for your business.
Web Analytics is the core skill. Google Analytics is just a tool used to implement ‘Web Analytics’.You can also implement ‘Web analytics’ via other tools like ‘adobe analytics’, ‘kissmetrics’ etc.
Using Google Analytics without the good understanding of ‘Web analytics’ is like driving around in a car, in a big city without understanding the traffic rules and road signs.
You are either likely to end up somewhere other than your destination or you get involved in an accident.
You learn data analysis and interpretation from Web analytics and not from Google Analytics.The direction in which your analysis will move, will determine the direction in which your marketing campaigns and eventually your company will move to get the highest possible return on investment.
You get that direction from ‘Web analytics’ and not from ‘Google Analytics’.
You learn to set up KPIs, strategies and measurement framework for your business from ‘Web analytics’ and not from ‘Google Analytics’.So if you are taking a course only on 'Google Analytics’, you are learning to use one of the tools of ‘Web analytics’. You are not learning the ‘Web analytics’ itself.
Since any person can learn to use Google Analytics in couple of weeks, you do no get any competitive advantage in the marketplace just by knowing GA.
You need to know lot more than GA in order to work in Web analytics and marketing field.
So what I have done, if you are interested, is I have put together a completely free training that will teach you exactly how I have been able to leverage web/digital analytics to generate floods of news sales and customers and how you can literally copy what I have done to get similar results.
Here what You'll Learn On This FREE Web Class!
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.
FREE GIFT “Key Performance Indicator – KPI” (32 pages ebook) – Stay till the very end of the Webinar and I’ll give you this FREE Gift!
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 Beyond
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.
Himanshu Sharma
Digital Marketing Consultant and Founder of Optimizesmart.com