> 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-classic-bundle.md).

# Customize Classic bundle

{% embed url="<https://youtu.be/_oPn7GqUGAk>" %}

## 1. Customize Widget Position <a href="#how-to-enable-the-bundle" id="how-to-enable-the-bundle"></a>

By default, the bundle will show up on the product pages of the corresponding products.

If you:

* Don't see the widgets on storefront
* Want to change the widgets' position
* Want to add Classic Bundle widget onto other pages (homepage, cart page,...)

*Please visit our \[*[*Adjust BOGOS Blocks*](/user-guide/quick-start-guide/adjust-bogos-blocks.md)*] guide.*

## 2. Customization Options <a href="#customization-options" id="customization-options"></a>

### 2.1. Content <a href="#content" id="content"></a>

<figure><img src="https://bogos-guideline.gitbook.io/~gitbook/image?url=https%3A%2F%2F1174860429-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBQEzvXIQmpPrTmxjT8T6%252Fuploads%252FUFidGSkHoH0w9M630JrS%252Fbundle%2520content.jpg%3Falt%3Dmedia%26token%3D6da1a501-22b0-46ed-ad85-66f2dad25f1d&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=9ad8fc95&#x26;sv=1" alt=""><figcaption><p>Customize Classic bundle - Content</p></figcaption></figure>

Customize how the content displays on the bundle widget here:

* Show description: Display the bundle description
* Show discount price on each item: Display the strike-through price of the bundled product
* Show discount amount on 'Add to cart' button
* Total price text
* Button text
* Select variant text

### 2.2. Color <a href="#color" id="color"></a>

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.

## 3. Add the Classic Bundle to Other Pages Besides the Product Page

{% hint style="info" %}
You can place the Classic Bundle block on any page of your store, except the Checkout page.
{% endhint %}

**Step 1:** Navigate to your **Online Stores** in the **Shopify navigation menu** => choose **Themes** => **Customize**

**Step 2:** In the **Shopify Theme Editor**, go to the page where you want to add the **Classic Bundle** block.

Then, on the left panel, scroll down, click **Add section**, choose **Apps**, find and select **BOGOS: Classic Bundle** block.

<figure><img src="/files/E5BWRCaCV6uHiLCbbGHF" alt=""><figcaption></figcaption></figure>

**Step 3:** In the top-right panel, complete the setup fields.

<figure><img src="/files/OXiTNACbWgtl9UnqcX2k" alt=""><figcaption></figcaption></figure>

* **Offer ID:** Enter the ID of the bundle offer you want to display.
* **Product show:** Select a product from your store. All Classic Bundle offers linked to this product will be displayed on the current page.


---

# 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-classic-bundle.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.