Give your customers an accurate read of how many items are in their shopping carts with this helpful tutorial.
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.
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:
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:
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
There it is. Check out the JSFiddle code below to see how the cart icon and the badge look before committing to its use: