Cart Counter

The live item-count badge on the cart icon, updating instantly as the cart changes.

Last updated

Cart Counter icon

How to use

  1. Place this component in your nav — most often nested inside the Cart Trigger component.

  2. Style the badge with Font, Color, BG, Border, and Radius.

  3. Toggle When 0 to Hide the badge when the cart is empty, or Show to always display it — this only affects the live site; the canvas always previews 0.

How the count is calculated

Cart Counter sums quantities across cart lines, but it doesn't just count every line item — only lines flagged to count toward it are included. That means a Product Cross-Sell Toggle item can be excluded from the badge via its own Show in Counter setting, so the number on the badge can legitimately read lower than the number of physical line items sitting in the cart.

The count updates the instant an item is added, then settles once Shopify confirms — so it's normal to see the number adjust slightly before the page has fully caught up.

Questions? Join our Slack community