7 Shopping Cart Design Guidelines

If your shopping cart is poorly designed — it will negatively affect the user experience, resulting in low conversion rates.

Jeremiah Lam
Jan 25 · 6 min read
Image for post
Image for post
Illustration by Icons 8 from Icons8

Have you ever added something to the cart but then never completed the purchase due to whatever reason? Cart abandonment is the main nemesis for anyone running an e-commerce business, especially since the average abandonment rate for 2018 is 75.6%. When you consider the acquisition cost involved for each user visit, a high cart abandonment rate can be deadly for your bottom line.

In all fairness, a percentage of abandonments are simply users who are just browsing — window shopping, price comparisons, etc. But leaving the “just browsing” users aside, there are other reasons for cart abandonment which good design can help, such as;

  • Complicated checkout process

The purpose of this article is to highlight some of the critical guidelines when it comes to designing better shopping carts, along with examples from various websites to help you get a better idea of how to incorporate them.

Cart notification

Usually, most e-commerce sites would indicate adding a product to the shopping cart by adding a number to the cart icon. This is fine, but there’s a risk that the user might not notice it. To draw the user’s attention, it’s best to use a secondary indicator to inform them that the product has been successfully added to their cart.

Image for post
Image for post

A good example would be Everlane, which uses their mini-cart to inform the user that their item has been added to the cart, providing a consistent feedback loop on their action. This also allows the user to quickly review the product to make sure that it’s correct, preventing them from making a wrong purchase.

Detailed summary

One of the cart page’s primary purposes is to allow the user to review their order before completing their purchase. A detailed summary is required to display all relevant information that would help build confidence and increase conversion rates to help them do so.

Some of the critical pieces of information to include are:

  • Product Image
Image for post
Image for post

On their shopping cart page, Warby Parker makes it clear and easy for the user to review their order, decreasing the percentage of users abandoning their cart due to unclear information. They even include additional details that you selected, such as frame width, prescription type, etc, to prevent users from ordering the wrong product.

Edit option

It’s essential to allow your users to easily edit their order details on the shopping cart page instead of redirecting them back to the product page, or worst, removing and re-adding the product again. By doing so, you are making the user’s life easier, ultimately increasing your conversion rates.

Image for post
Image for post

It’s common to allow the user to edit the quantity of a product, but ASOS goes the extra mile by making the color and size editable within the shopping cart page. The product image and details will also be updated to reflect any changes made to enforce the feedback loop and prevent any confusion.

Show total cost

One of the main reasons for cart abandonment, as mentioned above, is the inability of users to calculate the total order cost up-front. When it comes to payment, it’s crucial to be transparent about the amount that you will be charging the user.

The payment summary should indicate all applicable costs; taxes, shipping, sub-total, etc. The information should be aligned, with proper spacing, and not include any confusing financial jargon. There should not be any shady or dubious charges added at the last minute of the checkout process.

Shipping cost

If you offer different shipping options, the cheapest or most popular option should be pre-selected, rather than leaving it empty. This allows the user to estimate how much extra is required and not be surprised when they see the final bill.

If you offer free shipping, which is fantastic, then make it clear and evident to the user as it would sway them to complete the purchase. If there’s a minimum amount required for the order to qualify for free shipping, show an indication of how much more is required.

Image for post
Image for post

Sign in barrier

It’s super annoying whenever a website forces you to log in or sign up before you can proceed to the checkout page. While it may seem like a simple task, it can be relatively jarring for the user, resulting in a negative user experience and lower conversion rates — 30% of users end up abandoning their cart as a result.

When cart abandonment rates are that high, you should prioritize the sale rather than data collection.

Image for post
Image for post

Revolve mitigated this stumbling block by allowing its users to “checkout as a guest” while still keep the option to “sign-in” open. This creates a positive experience for new users who are too lazy to create an account.

The mini cart

The mini-cart usually is a dropdown that contains a summary of your cart details; it’s used to give the user a glance at their cart without leaving the current page that they’re on. It could also act as a notification when users add a product to their cart, similar to the Everlane example.

The mini-cart has 4 essential components;

  • Product information; must be linked to the individual product page
Image for post
Image for post

Save for later

Some users might not be able to complete their order within a single session due to various reasons. It’s important to store their cart information for some time to prevent frustration, which may result in the user abandoning the order altogether.

A “save for later” or “add to favorites” button can help reduce cart abandonment by allowing the user to continue their shopping at a future time. For example, if a user saves a product on Friday and returns on Sunday to confirm their purchase, he wouldn’t need to relocate the product again — improving the whole buying experience.

Image for post
Image for post

HBX allows the user to save their products into personalized wishlists, and they could easily add them back to the cart within the shopping cart page itself. This reduces the number of clicks required by the user and optimizes the entire shopping experience. It also serves as a reminder that they have saved items in the scenario that they have forgotten about them.

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Jeremiah Lam

Written by

Jeremiah Lam is a UI/UX designer, writer, and tech enthusiast living on the sunny island of Singapore

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Jeremiah Lam

Written by

Jeremiah Lam is a UI/UX designer, writer, and tech enthusiast living on the sunny island of Singapore

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store