The right shopping basket for your online store

February 12, 2018

The right shopping basket for your online store

The buyer found the product, then used the filter and pressed the cherished "Add to cart" button. But it's too early to relax - adding to the cart does not mean buying.
The Baimarda Institute says that almost 70% of orders remain in the shopping cart.
Let's discuss the design features. Let's start with the obvious.

Mini Basket

Electronic baskets can be different. Some baskets combine the payment function of an order, while others are limited to a small drop-down list. The second option is called a "mini shopping basket".
There is nothing wrong with a mini shopping cart. It provides quick access and is easy to load. This electronic shopping cart does not mislead the user as opposed to "quick view".

The main problem with the mini shopping cart is its size limitation. They also force you to limit the contents. You cannot use your mini shopping cart as a replacement for a full shopping page.

Your shopping cart is a custom "rubicon". The last time a customer checks the shopping list, the total price, and promised discounts and bonuses.
If you are cheating him somewhere, do not expect forgiveness.
Let's take a look at the infographics of Bymard research on why users throw their electronic baskets.

We will consider all the reasons later, when we move on to ordering.

Brief description of cart

No complicated arithmetic. Here you need to show the characteristics that will further influence the decision to buy.


Main characteristics: parameters selected by the user (color, size, RAM power, etc.). The information should be at least in the description in the catalog.

Users use the shopping cart to compare products. It is difficult to compare clothes if the image is too small.

Images are important. The product in the picture must fully match the characteristics chosen by the user.
By clicking on the product card, the user should be able to go to the page with the selected product.

It takes time for the user to change the order specifications: size, color or quantity. Suddenly, when an item is added to the cart, the user makes a mistake.
And now we will browse sports store sites to find the perfect product card. There will be many pictures.
Checking sports online stores

The company Vans make beautiful sneakers, but sell them on a site with extremely bad design. You can't change anything. It's a good thing at least the delete button is placed separately.

Brand designer Adidas made two "shape" buttons on the product card page, but there are no buttons inside the product card to change the color or size.

In Nike brand specialists made a button to change the size. But it is still impossible to change the color in the basket. A drop-down list is present, but here it is worth changing.

The Reebok website was trying to fix the big brother's mistake. But it looks weird. They replaced all the functions for some reason. Everything works in quick view mode.

A drop-down list that goes outside the window - no comments :)


Header and footer carry a lot of information and even CTA. Large footers - good and comfortable, detailed header - fine, but not in the basket.
Our goal is to minimize distractions. The header and footer should be simplified to a logo using the phone, privacy policy or other documents.
Remember a button or link that leads to familiar pages with detailed headers and footers.

Not just delivery
The final cost is no less important than the shipping cost.

We recommend that you explain to the user "how it happens". For example, using formulas.

Check the mobile version, again

Approximately 70% of traffic in our latest online store projects comes from mobile phones. In the mobile version, the shopping cart should always be visible.
It is preferable to leave it in the upper right corner, although the reachability of this area is not ideal.

Simplify the modification and removal from the basket. It is normal to change your mind in the process, do not prevent the user from leaving only the desired items in the shopping cart.
Make a contrasting delete button. Change your order dynamically, without having to update your cart or save changes.

Don't forget the mobile version of the ordering function.

Most tips for the mobile version consist of two simple steps:

  • you minimize the amount of content to put everything on a small screen - consciously prioritizing;
  • try to make sure the mobile version is as functional as the web version.
Grow your business.
Interested in partnering with us? We love to hear from ambitious clients! Tell us what you’re looking to achieve and how we can contribute.
Get in touch