Ecommerce shopping cart design ideas

3 ecommerce companies with shopping cart designs that inspire.

Tomas Laurinavicius
May 30, 2019
Inspiration

Have you noticed that shopping carts tend to look pretty much the same? Let’s take a look at 3 ecommerce companies who follow best practices while also managing to make their shopping cart design stand out.

Shopping carts on ecommerce sites all tend to look pretty much the same — it’s important to follow best design practices. But once you’ve got the fundamentals right, it makes sense to get creative and experiment a bit.

And who knows?  maybe you’ll stumble on something that will significantly increase the conversion rate!

Let’s look at 3 companies who applied best practices and stand out with unusual shopping cart elements.

1. Minaal

Minaal homepage.

Minaal sells backpacks and travel accessories to digital nomads. They used Kickstarter to raise $340,000 in 2013 and $700,000 in 2016. Their flagship product, the Carry-on 2.0 bag, was deemed “the perfect carry-on backpack” by BuzzFeed.

Their shopping cart sits in the upper-right corner of the page. It displays the quantity and subtotal of cart items. Instead of taking you to the shopping cart page, clicking the cart reveals a mini-cart popup.

Minaal’s mini cart has three main elements:

  • Order list
  • Subtotal
  • Navigation buttons

The mini cart has 3 calls to action: Continue Shopping, View Cart, and Checkout. The design nudges customers towards the “Checkout” button by making it stand out in the overall color scheme.


The design and layout of the cart page has all the necessary functionality. The customer can see the order, edit it, or click through to the product page. And the  blue Checkout buttons provide a clear call to action.

Minaal added some personality to their shopping cart page with playful headline copy: “Woo hoo! Let’s complete your order, shall we?” They included a form that allows shoppers to leave a note. This reinforces the idea that they care about each and every customer.

Minaal has the best cart I’ve ever seen — they apply best practices while adding their own creative flair for a smooth, memorable shopping experience.

2. Mindful Souls

Mindful Souls homepage.

Mindful Souls sells apparel and jewelry to spiritual people. Their products are meant to eliminate stress, anxiety, and negative energy. And it seems to be working — they have 2504 reviews and a 5-star rating.

The shopping cart icon is in the upper right corner of the page with a correlating number of cart items. It displays grey when the cart is empty and turns bright red when items are added.


Mindful Souls’ products are non-essential and inexpensive. Which means the average customer isn’t likely to put much thought into making a purchase. Which is a double-edged sword — inexpensive products are easy to sell, but they’re also easy to forget. A customer could add items to their cart on an impulse, get distracted, and forget all about them. A scenario that’s less likely to happen with something like Minaal’s $299 backpack.

This makes drawing attention to their shopping cart as shoppers add products a brilliant idea. If the distracted shopper returns, they’ll likely notice the red cart, feel compelled to click, and hopefully complete their purchase.

Clicking the cart takes you to the cart page where all the usual elements are found: a list of items, the ability to edit the cart, and Proceed to Checkout buttons that stand out in the overall color scheme.

They also include less-common elements like:

  • A reminder that I’m only $5.03 away from free shipping, which encourages me to add items to qualify
  • A timer counting down how long my order is reserved, which encourages me to complete my purchase now
  • Badges that remind me about free shipping, ease my worries, and provide social proof
  • “Real Reviews From Real Customers” for additional social proof

Mindful Souls isn’t afraid to experiment with bold choices. I haven’t seen a timer like that anywhere else. Is it a little bit tacky? Sure. But it works!

Be sure to test any unusual elements to make sure they help increase your conversion rate.

3. Rainbow OPTX

Rainbow OPTX homepage.

Rainbow OPTX sells colorful sunglasses. They offer 10 different colors and a variety of shapes. Their sunglasses are meant to boost one’s mood by making the world look more colorful.

The shopping cart icon is placed in the upper right corner and displays both the number and the value of the items in the cart. What happens when you click it? You’re taken to the cart page.

As you can see above, all the usual elements are there, including the order, the editing functionality, and the Check Out button.

The layout and colors of the Update Cart and Check Out buttons are a bit questionable. The bright yellow Update Cart button draws the most attention with its prominent position and color. Which could negatively affect the conversion rate by distracting customers from completing the sale with the Check Out button.

What Rainbow OPTX does well though is includes a “What some of our customers have to say…” section with reviews for products in the cart. And what better social proof is there?

Again, be sure to test this kind of a review system to make sure it improves your conversion rate.

Creativity for the sake of creativity has its place

When you’re working on an ecommerce store design, your creativity needs to have a purpose — ultimately, to make sales. If your splashes of personality confuse or turn away customers, they’re useless. So be sure to understand and implement best practices — and then look for creative ways to increase the conversion rate.

What worked on someone else’s store might not necessarily work on yours (or your client’s), so test, test, test! Don’t just throw new elements on a page and hope for the best. Run A/B tests so you know for sure.

You can’t test everything, but the more creative you get, the more important it is to test.

Tomas Laurinavicius

I’m a lifestyle entrepreneur and blogger from Lithuania helping aspiring entrepreneurs build businesses and live better. Follow me @tomaslau.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

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

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

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

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

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