Ecommerce cart design best practices

The average online shopping cart abandonment rate is 69.89%. Can your ecommerce cart design combat it?

No items found.

When you consider that each visitor costs money to acquire, it becomes clear that a high cart abandonment rate can easily cripple a business.

Photo by rawpixel on Unsplash.

Have you ever visited an online store, added a product to your cart, and then never completed the purchase?

This is called cart abandonment. It might not seem like a big deal, but with an average online shopping cart abandonment rate of 69.89% (according to the Baymard Institute), it’s costly for merchants.

So, as a web designer, what can you do to help your clients fix this leak in their sales funnel? Here are 6 places to start.

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

Amazon answered the question of where to put the shopping cart icon back in the 90s when they put it in the top right.

Top navigation on Upper right nav of 3 choices: a shopping cart icon, Your Account, and Help.
Image credit: Amazon via Luke Wroblewski.

As Amazon’s site changed and evolved, they kept the icon in the upper right corner — but nudging it even further right.

Top navigation on with the shopping cart icon labelled "basket" in the upper farthest right.

Online shoppers have had over 20 years of conditioning when it comes to looking for the shopping cart icon in the upper right corner of the homepage. When you’re designing for optimal performance and user experience, working against habit and muscle memory is only going to hurt.

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

Have you ever added a product to your cart and been interrupted before you could finish the purchase? It’s easy to forget to return — especially with nonessential items.

Which is why it’s important to remind customers about their shopping carts.

If you visit Mindful Souls, for example, and your cart is empty, you’ll see a zero next to the shopping cart icon:

But as soon as you add something to your cart, the icon turns red and displays the number of items in your cart:

Say you were about to buy the Oceanic Fluorite Healing Wand when your BFF called and you completely forgot. Well, the next time you visit Mindful Souls, that obnoxious-red icon will remind you!

This goes a long way to nudging distracted customers and salvaging sales.

Free ebook: The modern web design process

Discover the processes and tools behind high-performing websites.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Start reading

3. Confirm when items are added to the cart

When a customer adds a product to their cart, confirmation keeps them from wondering if it worked or not.

Amazon is a great example of this — they not only provide confirmation, but also cross-sell with a display of related products.

A green checkmark with a product thumbnail labeled "Added to basket." Directly below are "Frequently bought together" items.

Online stores often take customers straight to the cart page when they when they add something to their cart. But this interrupts their shopping, makes it more difficult to add items, and can reduce the average order value.

4. Embrace the mini cart

A mini cart is a pop-up that contains the most important cart details. It gives customers a glance without having to leave the product page they’re on.

For example, let's say I'm shopping on Minaal and can’t remember if I added the tool case to my cart yet. I can check what’s in my cart by clicking the shopping cart icon without losing my spot on the site.

Minaal Toolcase product page with the mini cart display open on the far right. The order so far has a Toolcase and a Daily Bag in Vancouver gray.

As you can see above, I do have the tool case in my cart. I can click “Continue shopping” and go back to browsing.

Minaal’s mini cart has 3 essential components: the order summary, the subtotal, and navigation buttons. This is really all a mini cart needs — customers can click through to the cart page if they want more details.

It's also important to link the in-cart item to its product page — which Minaal does. Cart pages that don't allow for this create frustrating experiences for shoppers.

5. Provide information about free shipping

High shipping fees are the number one reason people abandon their shopping carts. Luckily, this is an easy fix — offer free shipping on orders over a certain amount and then nudge your customers toward that amount.

For example, Mindful Souls reminds you on their cart page that they offer free shipping anywhere in the USA for orders over $35.

Mindful souls shopping cart page with a "Forest Soul Ring" for $29.97. Text at the top of the page reads, "Only $5.03 away from free shipping."

You can see above that I’m only $5.03 away from free shipping, so I’m likely to add something to my order to get there.

Don’t just offer free shipping — actively persuade people to take advantage of it by reminding them about it.

6. Lead customers toward the checkout

The shopping cart page has many functions. It allows customers to see the order, change quantities, remove items, return to the product page, etc. But the main goal of the shopping cart page is to move customers to the next stage in the sales funnel: the checkout.

Take a look at how Burton uses design to nudge people toward that next step:

Burton has a black, white, and grey color scheme, which makes their blue checkout button stand out. A checkout button that contrasts your overall color scheme is a great practice.

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

Pro tip: the idea that a page can have many functions but one goal is the core of conversion-rate optimization. It’s a good principle to keep in mind.

Small changes for a big impact

Even a tiny increase in your conversion rate can add up to a significant amount of money over an extended period of time. It’s important to research best practices and apply them to each page you’re designing.

Design should be persuasive. Use it to guide the visitor through your site towards checkout. Know the next step you want visitors to take and lead them there.


May 8, 2019



Join the conversation

What's Webflow?

Try it for free
More about the Designer


The power of CSS, HTML, and JavaScript in a visual canvas.


Build website interactions and animations visually.

More about Interactions


Define your own content structure, and design with real data.

More about the CMS


Goodbye templates and code — design your store visually.

More about Ecommerce


Edit and update site content right on the page.

More about the Editor


Set up lightning-fast managed hosting in just a few clicks.

More about Hosting