Shopping cart: 6 tips to design it and take your checkouts to the next level

Do you have an inefficient shopping cart design, have your abandonment rates increased, are your checkout processes too complex? These problems are very common in e-commerce. Even industry giants such as Amazon, eBay or AliExpress had to redesign their checkout pages to achieve the usability and efficiency they show today.
According to SaleCycle, the shopping cart abandonment rate in 2018 reached 75.60%, 6% less than the previous year (81.40%), according to data provided by AbandonAid. Even for small online stores, reducing the number of abandoned carts is a priority, due to lost revenue and customer loyalty opportunities.
To achieve an inspiring checkout page design and effectively decrease abandonment rates, it is imperative to mimic the characteristics of competitors who do well in this regard.

No more abandoned cart! 6 tips for creating effective shopping cart designs

Improving the usability of checkouts in e-commerce is one of the most important objectives for professionals from all sectors. However, cart abandonment are not always related to poor design or poor usability.
A large part of cart abandonment is due to the way users browse and shop: adding products to the cart as if it were a wishlist, comparing prices or studying the discount with a given promotion are some of the behaviours that contribute to cart abandonment.
According to Baymard Institute, almost 6 out of 10 online shoppers (58.6%) have abandoned a cart in the last 3 months because they were surfing and had no real intention of purchasing any product. However, it would be a mistake to think that shopping cart design does not influence abandonment rates. Below you will find a series of tips and good practices to improve them:

Create checkout processes in a few steps

One of the fundamental characteristics in the best shopping cart designs is the reduced number of steps to follow to finalize the purchase. What is the ideal number? Between 3 and 4. In fact, it is not advisable to reduce this number, as it would force to include in a few pages a large number of information, fields and elements. An example to follow is Apple, which currently uses 4 steps in its checkout process.
The use of a step-by-step method makes the payment process easy to follow for the customer, who must provide the ecommerce with a series of essential data to complete the purchase:

  • Log in with your user and password (or create an account, if this is the first time you make a purchase).
  • Fill in the data relating to billing (which will be reduced to a simple confirmation if the customer has an account).
  • Select one of the available payment methods.
  • Confirm the purchase and complete the payment.

This summary helps us understand how much information consumers need to provide before making a purchase. It also shows why step-by-step checkout processes are the most used and efficient.

Buy’ no, ‘Add to Cart’ yes

One of the most widespread errors in e-commerce is the use of ‘Buy’ buttons on product cards, rather than ‘Add to Cart’. Is there a difference between these designations? Of course! And the error is double if the link leads to the checkout process of the cart, instead of allowing the user to continue shopping. In the real world, it’s the equivalent of going through the checkout process every time you pick up a product at a supermarket.
When a customer surfs the internet, he places the products in the shopping cart with the option to buy or not to buy, and only once he has finished is shown the full checkout page with its various fields of confirmation, billing, etc.. The following point is a perfect complement to this recommendation.

While the consumer is shopping, it is important to show him in a visible place (e.g. in the form of a shopping cart to the right of a menu with ‘position: fixed’). In this way, we offer two benefits to the user:

  • Show you updated information about your shopping cart, such as the number of items included or the final price so far.
  • Allow you to finish shopping at any time by clicking on the shopping cart icon.

Use clear and simple designs in your checkouts.

A lot has been written about the impact of design, colour palette or typography on consumer purchasing decisions. According to the Color Marketing Group, 8 out of 10 consumers choose one product over another based on colour. Design choice in checkout processes cannot be taken lightly.
In general, it is advisable to use clear and simple designs, which besides harmonizing with the e-commerce branding, accentuate the buttons and key checkout fields: H2 titles, CTAs, available payment options, etc. It is important to avoid designs that are confusing, messy and with too many elements. As it usually happens, when we talk about design, less means more.

Payment options, the more, the better

But the design of the shopping cart is only one of the many aspects to be improved in checkout processes. Payment options, for example, are part of making an online purchase, being one of the points of greatest friction between the user and the e-commerce.
Currently, offering bank transfer, debit or credit card payments and payment via PayPal is not enough. Some consumers use alternative epayments, such as Stripe, WePay, Dwolla or even payment methods exclusive to certain platforms (Ali Pay, Apple Pay, etc.).

Have you ever been shopping and, at the end of the purchase, remembered an additional product that you wanted to add to the cart? This is a very common situation. Unfortunately, most e-commerce forget to include a ‘Continue Shopping’ button on their checkout pages. In contrast, the best marketplaces even take the opportunity to offer upsells in this section, such as related products or free shipping after reaching a certain amount, to encourage sales.

Image credit : Deseno