Cart Badge

What it does

Cart Badge displays the current number of items in Cells Cart.

It updates automatically when products are added, removed, or their quantity changes.

Before you start

Make sure Cart Engine is installed.

Without Cart Engine, Cart Badge has no cart data to read.

Steps to set up the component

Step 1

Place Cart Badge over your cart icon, cart button, or cart trigger.

Step 2

Choose whether Hide When Empty should be on or off.

Step 3

Set the visual style with Background, Text, and Size.

Step 4

If you want the badge count to match your typography, connect Count Font.

How it works

Cart Badge listens for cart updates and recalculates the total quantity of all items currently inside the cart.

Common mistakes

Cart Engine is not installed

If the engine is missing, the badge will not update properly.

Hide When Empty makes the badge disappear while testing

If the cart is empty and Hide When Empty is enabled, the badge can seem missing even though it is working as designed.

The badge is placed in the wrong position

Cart Badge does not auto-place itself over your icon, so you still need to position it correctly in your layout.

Quick setup checklist

1. Install Cart Engine.

2. Place Cart Badge over the cart icon.

3. Set Hide When Empty.

4. Style Background, Text, and Size.

5. Connect Count Font if needed.