> For the complete documentation index, see [llms.txt](https://bogos-guideline.gitbook.io/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogos-guideline.gitbook.io/user-guide/detailed-guide/customize/customize-cart-discount.md).
# 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.
**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.
### a) General
1. **Widget style**: Select a layout from the 3 available options.
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
BOGOS allows you to customize the colors of all elements with any of the 4 methods below:
* Choose a **ready-made color set** from the dropdown.
* **Manually adjust** each color field for all the available colors.
* Use [AI Theme Detector](#ai-theme-detector) to auto-generate a full widget color palette based on your store's branding.
* **Contact the BOGOS support team** to get help with color customization.
Click **Save** when done.
#### AI Theme Detector
BOGOS AI scans your online store and detects your brand's primary, secondary, and text colors, then generates a full widget color palette automatically.
{% hint style="warning" %}
Your store must NOT be password-protected for AI to access and detect your brand colors.
{% endhint %}
To edit the colors with BOGOS AI:
1. Click the **pen icon**.
2. Click **Scan again** to let BOGOS AI re-detect, or **manually adjust** the Primary color, Secondary color, or Text fields.
3. Click **Apply** for preview to apply the colors to the widget preview.
## 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.
### 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
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
BOGOS allows you to customize the colors of all elements with any of the 4 methods below:
* Choose a **ready-made color set** from the dropdown.
* **Manually adjust** each color field for all the available colors.
* Use [AI Theme Detector](#ai-theme-detector) to auto-generate a full widget color palette based on your store's branding.
* **Contact the BOGOS support team** to get help with color customization.
Click **Save** when done.
#### AI Theme Detector
BOGOS AI scans your online store and detects your brand's primary, secondary, and text colors, then generates a full widget color palette automatically.
{% hint style="warning" %}
Your store must NOT be password-protected for AI to access and detect your brand colors.
{% endhint %}
To edit the colors with BOGOS AI:
1. Click the **pen icon**.
2. Click **Scan again** to let BOGOS AI re-detect, or **manually adjust** the Primary color, Secondary color, or Text fields.
3. Click **Apply** for preview to apply the colors to the widget preview.
## 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.
*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
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, and the optional `goal` query parameter:
```
GET https://bogos-guideline.gitbook.io/user-guide/detailed-guide/customize/customize-cart-discount.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.