# Customize Cart Discount

This guide explains how to customize the **Cart Discount widget** and the **Congrats message** in BOGOS - helping you inform customers about available discounts and celebrate when they unlock a deal.

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

**Customizing these with BOGOS includes the 5 steps:**

{% stepper %}
{% step %}
In BOGOS Admin, open Customize > Discount > Cart Discount.
{% endstep %}

{% step %}
[Customize Product page widget.](#customize-product-page-widget)
{% endstep %}

{% step %}
[Customize Congrats message.](#customize-congrats-message)
{% endstep %}

{% step %}
Click Save.
{% endstep %}

{% step %}
[Adjust the widget position on your store.](#adjust-widget-position-on-your-store)
{% endstep %}
{% endstepper %}

### 1. Customize Product Page Widget

The Product page widget appears on your store to show customers the available discounts and motivate them to add more to their cart.

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

#### a) General

1. **Widget style**: Select a layout from the 3 available options.

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

2. **Discount tier style**: Choose how tiers are listed - Checklist or Bullet.

{% hint style="info" %}
For the Bullet option, you can select from available icons or contact BOGOS support team to help upload your own.
{% endhint %}

3. **Divide tiers into table**: Enable this to display tiers in a table format for a cleaner, easier-to-scan layout.
4. **Widget border radius** (for Widget style 2 & 3): Drag the slider to adjust the corner roundness of the widget.

#### b) Color

<figure><img src="/files/3GyqaxkGTOuDzUxLIcLg" alt=""><figcaption></figcaption></figure>

BOGOS allows you to customize the colors of all widget elements with any of the 3 methods below:

* Choose a preset color theme from the dropdown to apply a ready-made color set.
* Adjust individual color fields for the background, text, and discount tier states.
* Contact BOGOS support to customize the colors to match your store's branding.

### 2. Customize Congrats Message

The Congrats message appears when a customer unlocks a discount tier, keeping them engaged by confirming they have successfully claimed the deal.

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

#### a) General

1. **Message will appear in (seconds)**: Set the delay before the message appears after a customer qualifies.
2. **Message position**: Select where the message appears on the screen from 6 positions available.
3. **Border radius**: Drag the slider to adjust the corner roundness of the message.

#### b) Content

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

1. **Title**: Enter the headline displayed on the congrats message.
2. **Description**: Add details about the discount the customer has just unlocked.

{% hint style="warning" %}
Please retain the **{{discount\_amount}}** in the description to dynamically display the discount syncing with your setup. If accidentally deleted, click **Add variable** to restore it.
{% endhint %}

#### c) Color

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

BOGOS allows you to customize the colors of all message elements with any of the 3 methods below:

* Choose a preset color theme from the dropdown to apply a ready-made color set.
* Adjust individual color fields for the background and text.
* Contact BOGOS support to customize the colors to match your store's branding.

### 3. Adjust Widget Position on Your Store

By default, the Cart Discount widget **automatically appears on all relevant product pages.**

**However, if you:**

* don't see any widget on your product page
* want to reposition it on your product pages
* want to add it to other store pages (such as the homepage, collection page, or cart page)

**Please follow these steps:**

1. Go to Shopify admin > Online Store.
2. Open the theme editor.
3. Navigate to the page where you want to adjust the widget.
4. Add or drag the BOGOS: Cart Discount block to your desired position.

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

*For more details, visit our \[*[*Adjust BOGOS Blocks*](https://bogos-guideline.gitbook.io/user-guide/user-guide/customize/customize-bogos-blocks)*] guide.*

### Need Help?

If you need any assistance, feel free to reach out to our customer support team via **live chat** within our BOGOS app.


---

# Agent Instructions: 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://bogos-guideline.gitbook.io/user-guide/detailed-guide/customize/customize-cart-discount.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.