# 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2Fuz75mcjq9fguabtNMsh0%2Fimage.png?alt=media&#x26;token=4646f2db-4629-417d-9ab1-461f0833269c" 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FgwM98ivmReleq6kLsEhB%2Funknown.png?alt=media&#x26;token=f9324486-d4fb-41e3-a866-fb9c0a562d98" alt=""><figcaption></figcaption></figure>

#### a) General

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

<figure><img src="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FqLI320nBU1lu92K3DpnO%2Funknown.png?alt=media&#x26;token=730fdcc6-bdef-44aa-b8e6-9be62fc2ad8c" 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FoumWTegFiHycPVRUqC1f%2Funknown.png?alt=media&#x26;token=420a1dfa-b951-40fb-b19a-464c9b4b2362" 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FB5AYD8p1oEwGfof6QtT5%2Funknown.png?alt=media&#x26;token=f4e08e48-4ba1-4df4-9500-9de6fb141ea8" 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FpukdlfqwqM3WIlOlqD0q%2Funknown.png?alt=media&#x26;token=36e6450f-45ba-4f4c-98b6-661364d78ac3" 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FYyG7KGCX8K0l9LW0RXb6%2Funknown.png?alt=media&#x26;token=1c9d875b-7e96-40b5-b56d-8bd57054819b" 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FniXnJ0fOLLfhbqhMN3PR%2Fimage.png?alt=media&#x26;token=a82d8cd4-9cd2-496d-ae4d-d8f93201fff5" 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.
* [Book a demo call ](https://calendly.com/bogos-freegift/demomeeting)for personal guidance.