> ## Documentation Index
> Fetch the complete documentation index at: https://codking.tech/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# COD Form Buttons

> Change the text, colours, placement and behaviour of the Buy with COD button on your product page, cart page and cart drawer.

The **Buttons** page controls the **Buy with COD** button shoppers tap to open the COD Form. Open it from **COD King → Settings → COD FORM → Buttons**. A live **Preview** at the bottom of the page shows your changes.

## What your shopper sees

On your product page the shopper sees your theme's own buttons (**Add to cart** and **Buy it now**) and, in your brand colour, the **Buy with COD** button. Tapping it opens the order form right on the page, so the shopper never leaves the product. In the picture below, the COD button sits below the theme's buttons, which is the default placement. The extra box above it is a [bundle offer](https://codking.tech/documentation/cod-form/offers.md#bundles); you only see it if you have created one.

![COD button on a real product page](https://mintcdn.com/codking/-7j5WFh9RKYI6UNg/images/cf-65-store-buttons.png?fit=max\&auto=format\&n=-7j5WFh9RKYI6UNg\&q=85\&s=ee8790f48e271c87cbf614a4328e8b4c)

> [!TIP]
>
> Test on a real phone. Most COD orders come from mobile, so check that the button is easy to reach with a thumb and that the sticky button does not cover other parts of your page.

## 1. Style the COD button

Under **COD button**, set the text and look of the button:

* **Button label** — the button text, up to 60 characters. Use `{total}` to show the price, for example "Buy with COD — {total}".
* **Subtitle (optional)** — a short line under the label, up to 80 characters (for example "Pan India Supported").
* **Background**, **Text** and **Border** — colours for the button.
* **Border width**, **Corner radius**, **Text size** and **Height** — drag the sliders.
* **Shadow**, **Icon** and **Animation** — pick a style from each list.
* **Bold label** and **Full width** — tick to turn them on.

![COD button style settings](https://mintcdn.com/codking/Yn-PScIyACqIzwd1/images/cf-10-buttons-cod-button-style.png?fit=max\&auto=format\&n=Yn-PScIyACqIzwd1\&q=85\&s=6a41f8bf62264e2a287429625dbae1c1)

> [!NOTE]
>
> The **Default** menu next to a text field chooses which language you are editing the text for.

## 2. Choose the buttons on each page

**Buttons on each page** lets you show or hide each button and change its text. Leave a rename field empty to keep your theme's own text.

### Product page

* **Show Add to cart** and **Rename Add to cart**
* **Show Buy now** and **Rename Buy now**

The COD button is always shown on the product page; its text and style are set above.

![Buttons on the product page](https://mintcdn.com/codking/Yn-PScIyACqIzwd1/images/cf-11-buttons-product-page.png?fit=max\&auto=format\&n=Yn-PScIyACqIzwd1\&q=85\&s=8d93eca2387f9b6aaae65134c7e924e4)

### Cart page and cart drawer

For each of them you can:

* **Show Checkout** and **Rename Checkout** — keep or rename your theme's checkout button.
* **Show COD button** and **COD button text** — add a COD button next to checkout. `{total}` shows the cart total.

![Buttons on the cart page and cart drawer](https://mintcdn.com/codking/Yn-PScIyACqIzwd1/images/cf-12-buttons-cart-and-drawer.png?fit=max\&auto=format\&n=Yn-PScIyACqIzwd1\&q=85\&s=3cc85faa80385319ba60edc72bb85310)

## 3. Choose where the button sits

**Placement on the product page** decides where the COD button is added. It is added by the app embed, and no theme code is edited.

* **Below the theme's buy buttons**
* **Above the theme's buy buttons**
* **Inside a custom element**

**Sticky button on mobile** keeps a COD button at the bottom of the screen when the main button scrolls out of view. Tick **Show the sticky button** and set the **Sticky button label**.

![Placement and sticky button settings](https://mintcdn.com/codking/Yn-PScIyACqIzwd1/images/cf-13-buttons-placement-sticky.png?fit=max\&auto=format\&n=Yn-PScIyACqIzwd1\&q=85\&s=db440fc312b2c89a9803730a41734f5d)

## 4. Quantity offer widget

If you use quantity offers, **Quantity offer widget** shows your offer tiers on the product page. The tier a shopper picks carries into the form.

1. Tick **Show the widget on products that have a quantity offer**.
2. Choose its **Position**, for example **Above the buy buttons**.
3. Click **Manage quantity offers** to create or edit the offers themselves.

![Quantity offer widget settings](https://mintcdn.com/codking/Yn-PScIyACqIzwd1/images/cf-14-buttons-quantity-widget.png?fit=max\&auto=format\&n=Yn-PScIyACqIzwd1\&q=85\&s=7191329307d019418a26766e488828e0)

## 5. Advanced options

The **Advanced** card is only needed when your theme places a button in an unusual spot.

* **Quick-buy button on home and collection pages** — adds a COD button to product cards.
* **Cart page CSS selector** and **Cart drawer CSS selector** — optional. Leave them empty to place the button automatically.

![Advanced button options](https://mintcdn.com/codking/Yn-PScIyACqIzwd1/images/cf-15-buttons-advanced.png?fit=max\&auto=format\&n=Yn-PScIyACqIzwd1\&q=85\&s=a6c735f1ba1ad22e76d774e9faf107dc)

## 6. Check the preview

The **Preview** at the bottom shows how the product page buttons look with your changes, followed by the sticky button on mobile and the cart page.

![Button preview](https://mintcdn.com/codking/Yn-PScIyACqIzwd1/images/cf-16-buttons-preview.png?fit=max\&auto=format\&n=Yn-PScIyACqIzwd1\&q=85\&s=55b54e9f6b707652482de63592fcb26a)

***

> [card] [Next: Form designer](https://codking.tech/documentation/cod-form/form-designer.md)
>
> Choose the fields and style the form itself.

> [card] [Back to Setup](https://codking.tech/documentation/cod-form/setup.md)
>
> Choose which pages and products get the COD button.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.