> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/navigation-bar-buttons/cart-button.md).

# Cart

Opens your cart, with a live count of what's in it.

A Cart button opens your cart and shows how many items are in it. The count updates as customers add things, without the page reloading.

That count is the point. A cart icon sitting in the native bar, visible on every screen with the right number on it, is one of the clearest reminders you can give someone that they have shopping to finish.

## Add one

On the screen's **Navigation bar** tab, click **+ Add**, then choose **Cart**.

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fgit-blob-b84819eb864f5c6eeb825e8551353ea91afcaa18%2Fnav-bar-cart-dialog.png?alt=media" alt="The Add Cart Button dialog with Button Icon, URL, Badge Action, Badge Color, Counter Text Color and Cart Counter Identifier"><figcaption></figcaption></figure>

| Field                         | What to enter                                                 |
| ----------------------------- | ------------------------------------------------------------- |
| **Button Icon**\*             | Choose a supplied icon or upload a `.png`, `.jpg` or `.jpeg`. |
| **URL**\*                     | Your cart page. Must start with `https://`.                   |
| **Badge Action**\*            | Where the count sits: `Badge`, `right`, `left` or `center`.   |
| **Badge Color**\*             | Background of the count. Defaults to `#DE3F44`.               |
| **Counter Text Color**\*      | The number itself. Defaults to `#FFFFFF`.                     |
| **Cart Counter Identifier**\* | The class or id on your website that holds the count.         |
| **Visibility → User**         | **All**, logged-in only, or logged-out only.                  |

Click **Add**, then **Save as draft**.

## Finding the Cart Counter Identifier

This is the field that makes the count work, and the one worth taking care over.

Twinr reads the number from your own website. You tell it where to look by giving it the **class or id** of the element that holds the cart count.

To find it: open your site in a desktop browser, right-click the number next to your cart icon, and choose **Inspect**. The highlighted element will have a `class` or `id` — something like `cart-count`, `cart-item-count` or `#CartCount`. That is what goes in this field.

{% hint style="info" %}
Add something to your cart before you go looking. Many themes hide the counter entirely while the cart is empty, so there is nothing to inspect.
{% endhint %}

{% hint style="warning" %}
If the count shows `0` when the cart is not empty, the identifier is wrong or your theme has changed it. Re-inspect the element — a theme update can rename it without warning.
{% endhint %}

## Badge Action

`Badge` is the familiar shape: a small coloured circle on the top-right corner of the icon. The other three — `right`, `left`, `center` — place the number beside or across the icon instead.

Pick `Badge` unless you have a reason not to. It is what customers expect, and it stays legible as the number grows.

## Colour

The defaults are a red badge with white text, which reads clearly on most bars. If you change them, keep the contrast strong — this number has to be readable at a glance on a small screen in daylight.

## More than one

Nothing stops you adding a second Cart button with a different identifier. A wishlist counter is the usual reason: same mechanism, pointed at your wishlist count and your wishlist page.