> 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/screen-customization/tab-bar/navigation-bar/navigation-bar-buttons/cart-button.md).

# Cart Button

Very useful if you are selling something online. Cart button comes with a lot of customization.   If you have the cart button on your website's header, then you can mimic it natively on Twinr.

**Step: 1** Go to Any screen where you want to add the Cart button. Then go to navigation bar and add the button on left or right side. You can add different cart buttons both the sides as well. For example, you can add wishlist button as well with badge!

<figure><img src="/files/N0VClzWmRhksIVnp5Xmm" alt=""><figcaption></figcaption></figure>

**Step: 2** Fill the information needed.

Let's take a look at each fields of the form.

* **Button Icon:** Here you need to upload button icon image. It's a required field.
* **URL:** An URL where you wants to redirect to on click of the button.
* **Badge Action:** You can decide how cart counter badge should get displayed. It has Right, Left, Center or Badge (top right corner).&#x20;
* **Badge Color:** Badge background color. In the image below you can see badge background color is red.&#x20;
* **Counter Text Color:** Color of the counter text. For example, in the below image it's white.
* **Cart counter selector:** You can find cart counter selector by inspecting a cart button on your website.

**Step: 3** Preview the changes on [Preview App](/dashboard/preview-app.md).

<figure><img src="/files/CZdNjXxR1PM2WkD7tI7f" alt="" width="188"><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.twinr.dev/screen-customization/tab-bar/navigation-bar/navigation-bar-buttons/cart-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.