How to Show the Total Number of Items in Customer Shopping Carts


Give your customers an accurate read of how many items are in their shopping carts with this helpful tutorial.

How to Show the Total Number of Items in Customer Shopping Carts

In e-commerce, giving feedback to users is incredibly important -- especially when it comes to what customers are investing in your store. 

Shopping carts should be just as helpful to your customers as they are to your bottom line. One key part of the shopping cart is notifying your customers on how many items they have before they check out.

One way to do that is with a number badge placed on or next to the on the cart/shopping bag icon showing the number of items in the cart. When the users add an item or remove an item, the number badge on the cart should update and clearly show the updated result. The badge should also be easily seen, with good positioning in relation to the cart icon and good color contrast. In this tutorial, we'll show you how to create a shopping cart icon.

Getting Started

We'll be using Bootstrap and FontAwesome. Copy and paste the external links below and add them in the head tags in your HTML file:

HTML

In the below code, we present the shopping cart icon inside a header navigation context. The shopping cart icon is normally displayed on the very right of a menu. Both the cart icon and the number badge is inside an a tag that should the take the user to their cart page. The icon uses an i tag with the FontAwesome class designated for the shopping cart icon: .fa-shopping-cart.

CSS

We're using absolute positioning to position to number badge on top and slightly towards the right of the cart. To do that, we need to make the top positioning of the badge slightly higher than the cart icon so we need to use a negative value. We set the top property as -6px and we do the same with the right positioning by setting it to -5px

There it is. Check out the JSFiddle code below to see how the cart icon and the badge look before committing to its use:

Author

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.