Add quantity badge to mini cart icon

[finkk]

Hello there,

Is it possible to add a little quantity badge to the cart dropdown button as shown in the attached image ‘baskey-qty.png’?

I can see that the Cart Item Count meta value is available in the Cart Buttons customiser - see attached imaged ‘cart-item-count.png’

Can I use this value on a cart dropdown badge?

Kind regards,

Spencer

[christian]

Hey Spencer,

It’s doable. Let clarify first though that what you need to set up is the Cart Dropdown Toggle and not the Cart Button.

The main option that will enable you to do that is the Toggle Text with Cart Item Count Dynamic Content. You then need to style the rest using the styling options. You might need a few CSS to extend style the text so I’ll provide you with a sample code that targets the Primary Text. Add the following code in the Cart Dropdown Element CSS.

$el .x-anchor-text-primary {
  background: rgba(0,255,255,0.5);
  padding: 3px;
  border-radius: 10em;
}

Watching the video below will give you an idea how to achieve this. Slow the play speed down if it’s hard to follow along.

Thanks.