> For the complete documentation index, see [llms.txt](https://docs.bogos.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bogos.io/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.&#x20;

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


---

# 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://docs.bogos.io/detailed-guide/customize/customize-discount-on-cheapest-most-expensive-item.md?ask=<question>&goal=<endgoal>
```

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