20 Shopping Cart Design Tips to Reduce Shopping Cart Abandonment

Share on facebook
Share on google
Share on twitter
Share on linkedin

Shopping cart abandonment is an issue for all eCommerce stores, no matter their niche. According to shopping cart abandonment statistics, eCommerce brands lose $18 billion in revenue every year due to shopping cart abandonment.

If your goal is to reduce shopping cart abandonment, you need to rethink the design of your shopping cart. Its design, usability, and quality can influence customers more than you think.

To give website visitors a smooth online shopping process and learn how to reduce shopping cart abandonment, all you need to do is apply these shopping cart design tips.

1. Save the customer’s information even after they leave the website

Not all cart abandonment is final, as some customers return to eCommerce stores after a couple of hours or even days to complete their purchase. You need to take into account all of your customers who don’t finish their purchase process in one session and have a persistent shopping cart.

If your shopping cart doesn’t save the customer’s items, they will have to start their shopping from the beginning when they return to your store or give up on their purchase. Ideally, your shopping cart needs to remember items for at least 30 days, but you can also extend that period to 365 days.

2. Show all necessary product information


Image source

Customers need to understand exactly what is in their cart, especially if they return to it after a couple of days. All necessary product information needs to be listed so customers know what they’re purchasing.

Here is some product information you need to include:

  • Product image and title
  • Size/variant selected by the customer
  • Price of the order

There are also some additional elements you can add if they’re available:

  • Discounted price of the product next to the old price
  • How much the customer saves due to the discount
  • Scarcity triggers

3. Show the picture of the customer’s chosen product variant

If you sell multiple variants of the same product (for instance, different colours), you should always display the picture of the variant the customer put in their shopping cart. If you show the wrong variant, it can create confusion and friction because the customer might think the item they’re about to buy isn’t the one they chose.

4. Update the cart whenever the user changes the quantity

One of the worst examples of UX is having to add buttons such as “Update cart” or “Edit cart”, as they’re very inconvenient for customers. Instead of doing that, set automatic updates that will change the quantity of the items in a customer’s shopping cart.

All customers need to do is engage with increase and decrease buttons while they’re shopping or write the number they want in a quantity field. This type of UX decreases the number of unnecessary actions the customer has to perform and increases customer satisfaction.

5. Make the main CTA button prominent


Image source

If you want to decrease your eCommerce store’s shopping cart abandonment rate, you need to ensure the checkout is easy to complete. You can accomplish this by making the CTA button on your cart page very noticeable.

As this is the essential part of your cart page, you need to follow certain guidelines:

  • Make the colour of the CTA button prominent enough so it stands out from the rest of the page.
  • The colour you choose for the button needs to be the same on all pages where it appears.
  • Leave enough white space around the button.
  • The size of the button needs to be big enough so the customer doesn’t miss it.

6. Write clear copy for the CTA button

One of many shopping cart abandonment reasons is unclear copy on the CTA button. Unless customers know exactly what is going to happen once they click the button, they won’t proceed to checkout.

The copy doesn’t have to be overly complicated. Phrases such as “Proceed to checkout” or simply “Checkout” work best. If you want to show customers that your store is trustworthy, you can also write “Secure checkout” on your CTA button.

7. Add buttons for alternative payment options

While some people use their credit cards for online purchases, a large majority of customers like to have multiple payment options. In recent years, a number of eCommerce stores have added buttons to express checkout options such as PayPal, Google Pay, and Amazon Pay, and you should do the same.

The main reason why these options are popular is that they make the checkout process simpler and more convenient for those people who already use them. As data is usually saved in the payment system’s account, the customer doesn’t have to fill anything in manually.

8. Show all available payment methods


Image source

Some customers contemplate whether or not they want to proceed with the checkout process when they’re on the cart page, so it’s good to give them a nudge into the right direction. Assure them that they will be able to pay for their goods by showing all available payment methods on the cart page.

Include the most commonly used payment methods and show they’re available by adding a recognisable icon that’s big enough so customers can’t miss it. If you offer a large number of payment options, only display those that are frequently used.

9. Show if you offer instalment payments

Payments by instalments have become popular in the last few years and are very common in eCommerce stores that offer more expensive goods. If you decide to offer payments by instalments, make sure to make that clear to customers on the cart page.

Tell customers they can pay for their high-priced items with multiple monthly payments, and specify how large those payments will be. This way, it will be much easier for them to rationalise the purchase and you will be able to reduce shopping cart abandonment rates.

10. Show the subtotal price near the CTA button

A common practice for most eCommerce stores is placing the subtotal price of the customer’s order close to the main CTA button, and it’s something people expect. It should be placed near the main CTA button, ideally right above it. Additionally, it should also have a large font size and contrasting colours to the rest of the page so it’s prominent enough.

11. Display shipping information

Shipping information needs to be an essential element of your cart page, as customers want to know how much money in total they will spend before proceeding to checkout.

Here are some guidelines you should follow:

  • Include geo-targeted information so customers know if you can ship to their region.
  • If you offer free shipping, include that information. If you don’t, show shipping costs.
  • Add the expected delivery time.

12. Show information about your return policy

Since customers don’t see the physical product before they purchase it, they need to be sure they won’t lose their money in case something goes wrong. To reduce shopping cart abandonment rates, you need to show your customers there is no need to be sceptical or worried. 

As 80% of shoppers abandon carts because of the lack of a good return policy, you need to prominently display your returns and refunds policy and money-back guarantee. Place this information near the main CTA button and write it in a way that’s easy to read and scan.

13. Allow customers to remove items from the cart


Image source

It’s important to allow the customer to remove items from their carts if they change their mind before proceeding to checkout. If they have selected multiple items and want to remove one before going to the checkout but don’t have that option, they will most likely abandon the cart.

Place a remove link, button, or an icon near the product image in the cart which a customer can simply click on. When they do, ask them if that action was intentional and if they confirm, the item will be removed from their cart.

14. Make your discount section discreet

A discount section is a good addition to your cart page, but it can cause cart abandonment if it’s too prominent. A discount section which is too prominent prompts customers that don’t have a discount code to search for one online. If they don’t manage to find it, they get frustrated and abandon their cart.

That’s why it’s important to have a discount section that isn’t too noticeable. A simple and clickable text with copy like “Apply discount code” is a better alternative, but the best solution is to have automatically applied discounts.

15. Use urgency triggers

An effective way to reduce shopping cart abandonment is to create a sense of urgency that doesn’t allow your customers to think too long about their purchase. Create urgency triggers to promote sales, special offers, and discounts you’re offering.

Display a timer next to relevant elements that counts down the time until the offer passes to show customers that the offer is for a limited time only and that they need to act fast.

16. Use scarcity triggers

Image source

When you have a limited stock or limited offers, you can create scarcity triggers to make your items seem more attractive to customers. As soon as people see there is only a limited number of a certain item left, their fear of missing out kicks in and they’re more likely to purchase the item.

Place prominent scarcity elements next to relevant sections such as the CTA button or the price where the customers will notice them.

17. Include the “Continue shopping” button

If you sell a large number of complementary or similar items on eCommerce your store, you can also reduce shopping cart abandonment by causing your customers to be more invested in your products.

By including the “Continue shopping” button on your cart page, you can motivate them to browse more products. However, not many customers will want to click this button, so only include it as a clickable text.

18. Cross-sell when possible


Image source

Cross-selling works by showing customers items that go well with the one they already placed in their cart or a better version of the same product.

If you want this tactic to work, it needs to be well-executed:

  • Make your cross-selling promotions a secondary action and don’t be too pushy or distracting.
  • All the products you recommend need to be relevant to the product in the cart and slightly less expensive than it.
  • Don’t overwhelm the customer by showing too many options.

19. Link items in your cart to full product details

Some customers want to re-visit the item’s product details page before they continue with the purchase to check information or see the product images again. Make this easy for them by providing links in the product image and description that will conveniently take them to the details page.

20. Avoid clutter on your cart page

Another way to reduce shopping cart abandonment is to design the page with minimal ‘clutter’. A cluttered page will make it difficult for your customers to make decisions, so it’s essential this page doesn’t have any distracting elements.

Here are some tips to take into consideration:

  • The most prominent part of your cart page needs to be the checkout button.
  • Never use a bright colour for your background and stick to neutral colours such as white or grey.
  • Out of all the numbers on your page, the largest needs to be the subtotal price.
  • Don’t use any distracting or flashing elements that will take the customer’s attention away from the CTA button.

Summary

Online shopping cart abandonment is indeed a big issue for many online stores, but it can be solved if you learn how to design your cart page. As long as you have a simplistic design that focuses on providing the customer with a good shopping experience and leading them to the CTA button, you will have a lot of satisfied customers.

If you want to see your conversion rates increase, take a look at our conversion rate optimisation services and let us help your business grow in ways it never has before.

Scroll to Top