eCommerce Web Design Guide- Shopping Cart Page

eCommerce Web Design Guide- Shopping Cart Page

NOTE: This is the fourth segment of a 7-part series that describes the eCommerce web design tips. See the index to this series for the complete list.

Shopping cart abandonment is one of the biggest problems for many e-Commerce sites. It causes online retailers a great deal of pain.

This occurs when customers are on the verge of purchasing something but instead decide to abandon their purchase on the shopping cart page or during the checkout process.

In this blog post, I have highlighted some of the common reasons for shopping cart abandonment and provided you with a guide to designing shopping carts that minimise abandonment.

I am also going to write about the checkout page design in my next blog post.

If you’re looking for a way to eliminate shopping cart abandonment completely, unfortunately one doesn’t exist.

However, you can design your e-Commerce site in such a way that can reduce your abandonment rates.

To help you achieve this, we have developed this guide to help reduce shopping cart abandonments.

Main Reasons for Cart Abandonment:

  • Customers become shocked by the price increase when shipping and taxes are included in the total.
  • Customers have concerns about the site security and transaction security, mainly when they shop from overseas based sites.
  • Customers unexpectedly walk away from the cart or leave their computer.
  • Customer was in the research phase and was simply comparing the same product on multiple sites.
  • Customers do not have an option to calculate the shipping amount on their cart page.
  • Limited payment options.
  • Website is not responsive and customer is trying to buy from a mobile device, making it difficult for them to use the site.

There are a number of different ways to tackle the above obstacles. In this article, we cover different design options that you can implement on your shopping cart page to help you reduce shopping cart abandonments.

1. Empty Shopping cart design

When the shopping cart is empty, remind your users to add products to cart instead of just saying that it is empty. Provide shopping instructions and a call to action that entices users to do so.

You can also include product recommendations or your store’s unique selling points.

Empty Shopping cart design

                                                                                                             Credit: Ecommerce UX Design

2. Mini shopping cart

Having a mini shopping cart is definitely not an alternative to the full page cart as decision making will be tedious with just a mini cart. It will help shoppers keep track of how much they spend and what they buy. Provide a link in the mini cart to view the full page cart instead of taking the user directly to checkout.

Mini Shopping Cart Design

                                                                                                             Credit: Ecommerce UX Design

3. Full page cart

Users make their final purchase decisions when they are in the cart page. Shoppers add products to cart so that they can review or compare the items they have chosen, check whether the order total meets their budget or whether they qualify for free shipping etc. So, design your cart page in such a way that it assists your shoppers in their buying decision.

Full Page Shopping Cart Idea

                                                                                                             Credit: Ecommerce UX Design

4. Where should the shopping cart icon be?

Allow your users to easily locate the shopping cart. Place the shopping cart icon on the top right of every page in your store. Indicate whether the cart contains products or not by specifying the total number of items. Also specify the total value of the items present in the cart.

Shopping Cart Icon

                                                                                                             Credit: Ecommerce UX Design

Test, Test, Test

Of course, with any list that includes techniques and tips to help increase conversions, you should remember that no matter how certain you are that one idea or the other will work for you – it’s ALWAYS worth testing. Your users may surprise you, and you won’t know how well a particular strategy will work unless you split test accordingly.

What Are Your Favorite Shopping Cart Conversion Strategies?

Have you come across a shopping cart that did everything right?  Did you come across a particular site that make the checkout process so smooth and hassle-free that you’d order from them again?  Share your comments below!

If you need an eCommerce site redesign service, please contact us.

About The Author

Piyush Kotadiya is a Managing Director at 23 Digital, a full service digital agency focused on web design, ecommerce, digital marketing, interactive technology and brand experience. While much of his current work is focused on research, strategy development and UX, he has a passion for ecommerce. Follow Piyush on Linkedin.


Speak a mind