If you have, you’re not alone — this is a common occurrence that eats at a business’ resources. Each ecommerce website visitor costs money to acquire. Business owners spend large amounts on marketing, ads, and other channels to attract customers to their site and entice them to make a purchase. 

According to a 2022 study, nearly 70% of people who visited an online store added something to their cart and left the site, a practice called cart abandonment. 

A high cart abandonment rate can lower conversion rates and sales. Businesses need to use strategic web design to ensure customers finish checking out. 

Why do people abandon their shopping carts?

Many cart abandonments are a result of how customers browse online stores.  People often shop around various websites to research products, compare prices, and bookmark items for later. 

The same 2022 study sheds light on cart abandonment causes: 58% of online shoppers in the US ditched their ecommerce carts because they were browsing items without the intention of buying.

However, when we look beyond this factor as a reason for cart abandonment, customers leave their carts full for many other reasons:

• 48% felt there was excess additional expenditure (tax, shipping, etc.)
• 24% of websites urged visitors to create an account
• 17% felt the checkout procedure was too long or complicated
• 16% felt costs weren't transparent enough
• 13% had experiences with the website crashing
• 9% felt there weren't diverse payment options

Changing the design of ecommerce websites and shopping cart pages takes care of  many of these issues — the same study noted that improving checkout design can increase conversion rates by 35%. 

We’ve put together a list of the best practices you can employ in your web design process to recoup those lost orders.

Best practices for shopping cart design

The tiny shopping cart or bag icons you see across so many online stores aren’t merely aesthetic — they’re functional elements of ecommerce websites and an integral part of the online shopping experience. Shopping carts or bags are familiar icons that help visitors intuitively find and review any items they’ve added to their cart.

As a web designer, it’s crucial to use the best practices to create a shopping cart design that looks and feels good for the visitor, enticing them to complete their purchase.

1. Place the shopping cart icon in the top right corner of the page

Amazon, one of the biggest ecommerce companies, started to use the shopping cart in the late 1990s. This screenshot from Wayback Machine shows the shopping cart in the middle of the navigation bar in 1999.

In the early days, Amazon had two shopping categories: books and music. As more categories were introduced, the horizontal navigation tab design scaled reasonably well, allowing Amazon's designers to distinguish categories with color. 

As Amazon’s site evolved into the platform we know today, it kept the icon in the upper right corner — but nudged it even further right to fit more navigational elements.

Because of this and other early ecommerce experiences, online shoppers have over 20 years of conditioning that has led them to expect the shopping cart or bag to be in the upper-right corner of the page.

When designing for optimal performance and the best user experience possible, working against habit and muscle memory will feel unnatural to the visitor. As a result, it’s best to place the shopping cart or bag icon where people are used to seeing it — in the top right.

2. Use the shopping cart icon to display the number of items in the cart

Many online shoppers browse stores with no intention of making a purchase. Instead, they might bookmark items for later and forget about them. This is why reminding customers about products in their shopping carts is essential.

For example, if you visit My Little Loves Wax Melts’ website and your cart is empty, you’ll see a zero next to the shopping cart icon.

However, as soon as you add something to your cart, the icon changes to display the number of items in your cart.

To make this more apparent on your site, change the icon to a contrasting color that stands out. This slight change goes a long way to remind customers about forgotten items and salvages potential sales.

3. Let people know when they add items to their carts

It’s important to let customers know that chosen items have been added to their carts. Amazon does this well — they confirm with a clear “Added to Basket” in bright green lettering to make it obvious the product is now in your cart. A “Proceed to checkout” button also encourages shoppers to go ahead and make their purchases. 

Amazon goes a step further, attempting to cross-sell by displaying a range of related products that might interest the customer based on their tastes and preferences.

Another great way to recommend products is through email marketing. Not only does this remind the client of your online store, it also offers them insight into products they might like, discounts, and upcoming sales. Email marketing is valuable tool that can enocurage customers to keep coming back.

4. Embrace the mini cart

Online stores often take customers straight to the cart page when they add something to it. This interrupts the shopping experience and requires the visitor to return to the product page. The resulting back-and-forth can cause frustration and lead to cart abandonment.

To avoid this, use a mini cart. A mini cart is a pop-up containing essential details, such as the product name, price, and quantity. It gives customers a quick glance at their shopping cart without leaving the page they’re currently on.

Webflow’s merch store uses a mini cart that dims the rest of the screen when you add an item to your cart.

The mini cart has three essential components: the order summary, the subtotal, and the navigation buttons. From here, you can either close the mini cart by clicking on the X in the top-right corner to continue shopping or continue to checkout. The key to an effective mini cart is giving the customer the option to head straight to the cart page or continue shopping. 

5. Provide information about free shipping

Extra fees, including taxes and shipping are the number one reason people abandon their shopping carts. Offering free shipping on orders over a certain amount encourages customers to add items to reach that threshold amount.

For example, Midwest Mutt Shop has a reminder that they offer free shipping for orders over $25 in bright red, making it noticeable at the top of every page. Having a total in the cart that tells shoppers how far they are from shipping (“Only $4.25 more to go!”) will motivate them to spend a little more.

But don’t just offer free shipping. Actively persuade people to take advantage of the offer by placing reminders and call-to-actions (CTAs) throughout the shopping experience. Avoid badgering customers with bright banners and ads — incentivize them with eye-catching designs that blend into the UI.

6. Lead customers to checkout

The shopping cart page allows customers to see their orders, change quantities, remove items, and more. But the main goal of the shopping cart page is always to move customers to the next stage of the sales funnel: the checkout page.

Here’s an example shopping cart from Burton’s website that directs customers to make the final purchase.

Burton has a simple black, white, and gray color scheme, which makes their blue “Secure Checkout” button stand out. A checkout button that catches the eye by contrasting with your overall color scheme is a basic yet fundamental practice for great shopping design.

The checkout button should be the only call to action above the fold. You can add product recommendations, return policies, and shipping information below, but don’t emphasize them — this will distract people from proceeding to the checkout and payment pages.

Make small changes for a big impact

The role of shopping cart design plays in driving conversions is often overlooked. However, the best ecommerce websites leverage even the tiniest details of their interface. Stellar designers recognize that even a slight increase in your conversion rate will add up to a significant profit down the line.

Check out these 25 ecommerce websites for inspiration in your efforts to turn visitors into customers and learn how online stores implement the best practices of functional web design.