> 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-discount-on-cheapest-most-expensive-item.md).

# Customize Discount on Cheapest/Most expensive item

After setting up your discount offer, you can fully customize its widget display by following these simple steps:

* Step 1: Navigate to **Customize** from the **BOGOS Sidebar**.
* Setp 2: Find **Discount and select Discount on Cheapest/Most expensive item** from the **Discount** customize. 

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfzBFHbwxPpuCCz9mCSdyMj6BI-RDXmvIPNtZjApJKiaDK8gI5Fxuj5Mfzqmt4Ax3aVgqGrbIcj0qyRb21DbiGl-Nkbcm-uXBZn4Jfj3ljGbchML8HhqJTtnW_0XxXCcmWfst5Wog?key=APwpMqxaYlxpG4ng8MqyiA" alt=""><figcaption></figcaption></figure>

This offer type includes two main widgets:

* **Discount widget**
* **See All Products modal**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcp6_sWyqGyQrJoGRX3JkACxEqtgqgJ_qrrCakw-VGwRMVgz4lR8UPXvEd7ZeRpyrasyXy6UMDcHnymFBTx5eT6KqbQISXVJFrn3S8qCI3x6PxDKwfAKvFdNKwsHylUEwy2M0-N?key=APwpMqxaYlxpG4ng8MqyiA" alt=""><figcaption></figcaption></figure>

Let’s walk through how to customize each one by clicking on each tab.

## 1. Discount widget

### **General**

This section include key elements:

* **Number of products displayed:** Set how many selected products appear in the widget.
* **Product list label:** Add a short call-to-action message encouraging customers to choose a product.
* **Offer tier style:** There are two options to inform customers about the qualified requirements for each tier:

▶ **Checklist display:** All tiers' announcements show up in turns as checkboxes. Whenever a customer meets the requirement of a tier, its announcement will be crossed out.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeDLpxOV9oxNGcDWdoiCp7_a0eEOKeL7rg8Jyd-mH7MJn4P2ZTOFBkWHt_RrL0dMI6HzjkPxTEmZnw3di9Yr6vxO0t7cB6L80yMLWA_syqOLp6lik-ep5DZquE5-MulEUNDgYoIrQ?key=APwpMqxaYlxpG4ng8MqyiA" alt=""><figcaption></figcaption></figure>

▶ **Bullet list display:** All tiers' announcements show up as a simple list.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfdA4_VFomna9RB7c1H-B7Ope1ex09Du7qsssEe2uowb0MJRnFfC5dIX18hW6eI9cHEcTLBn3E_wmKmYEtEc7FZEEVPCSQQsYs3mpOm713vBQzN8u2NkT_XsEWHSd5n9mDmpWvO?key=APwpMqxaYlxpG4ng8MqyiA" alt=""><figcaption></figcaption></figure>

* **Show Add button on each item:** Enable this option to display a button that customers can click and add a product to their cart. You can also customize the button text as needed.&#x20;
* **Show button to see all products:** Enable this option to display a button that links to the full product list. You can also customize the button text as needed.

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

![](/files/8HMgW0p6Hvadbsq4mpf0)

2. Click **Scan again** to let BOGOS AI re-detect, or **manually adjust** the Primary color, Secondary color, or Text fields.

![](/files/wr4WVSAsv8yHcB3JKixf)

3. Click **Apply** for preview to apply the colors to the widget preview.

## 2. See all product modal

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeJcajdJECv845ZfwwNVgRJC_SxpHJP2jfXE3jKIN_Mt_b5agCpWlI4aBsaZnWM_DKtS3u1x8-H6ZXrTjnSiMGjP0JvpwyCJMT_nRjkuLrKwSNZ934Jd0zxxW11tO-6Ol908VBADg?key=APwpMqxaYlxpG4ng8MqyiA" alt=""><figcaption></figcaption></figure>

As you can see, it lets you configure how many products are displayed per load on desktop and mobile, including: **Products per row** and **Number of rows**. Then, BOGOS will automatically count the **Products per load**.

## **3. Widget preview**&#x20;

This section allows you to preview the widget on both desktop and mobile, including two display options:

* **Compact:** Shows the offer in a smaller, space-saving layout that fits neatly alongside product details.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdjLjF3Mh0VH6Vg13ysOAEzyT1vLA364Oqdcu_uhp1CNa2WgFfJUkKhQfsPkEGLzDRDv1Qut9pk5njJdkdfVcc_kdtizwFU4gLWyD1tUXQyEFRptTkAT9gnLu-A3YIYIlb3ysmWnQ?key=APwpMqxaYlxpG4ng8MqyiA" alt=""><figcaption></figcaption></figure>

* **Fullwidth:** Expands the offer to span the full width for maximum visibility.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeGShsZbMOdMtBU58fHugP0TkaQ-ys7msKIduM-CTULHbbZEYBUSevcQ75NNlLuHgAYfyNQDuR8EjD_Uy_La6f14iScTRbCSnOdvGmiwnlTU13sou3f8CfsYjgjEpGhwAZUmaADNw?key=APwpMqxaYlxpG4ng8MqyiA" alt=""><figcaption></figcaption></figure>