> 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.