Skip to main content
Cart Counter preview A lightweight component for Framer that displays the number of items currently in the cart by reading from localStorage and updating in real time when the cart changes.

​
What It Does

The Cart Item Counter renders a single number — the count of items in the cart — as a styled text element. It is designed to be placed in a navbar or cart icon area to give users a live count of how many items they have added. Key behaviors at a glance:
  • **Reads cart from **localStorage — on mount, reads the cart key from localStorage and counts the number of items in the array.
  • Updates in real time — listens for a custom cartUpdated event on window. Whenever another component (e.g. an Add to Cart button) dispatches this event, the counter re-reads localStorage and updates the displayed number instantly without a page reload.
  • Renders nothing until loaded — the count is null on the first render before localStorage is read, so no placeholder number flickers on screen during load.

​
Property Controls

PropertyTypeDefaultDescription
FontFont12pxTypography for the counter text (family, size, weight, etc.).
ColorColor#181A2CText color of the counter number.

​
Notes

  • The counter shows the number of line items in the cart array, not the total quantity. If the same product is added twice as separate entries, the count will show 2.
  • The cart must be stored in localStorage under the key cart as a JSON array. Any component that modifies the cart must dispatch a cartUpdated event on window after writing to localStorage for the counter to update — otherwise it will only reflect the state from the initial page load.
  • The component renders no fallback or zero state — if localStorage has no cart key, the counter displays nothing.