> 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-bundle-builder.md).
# Customize Bundle builder
## 1. How to enable the bundle
The Bundle builder will appear as a separate page as a Bundle builder offer is created.
To access Bundle Builder:
1. Open BOGOS app
2. All offers > Create offer > Bundle
3. Bundle builder
## 2. Customization options
### 2.1. Bundle product
* **Add button text:** Sets the label for the button customers click to add a product to the bundle.
* **See more text:** Sets the label for viewing additional details or variants of a product.
* **Out of stock text:** Displays the message for products that are currently unavailable.
* **Choose variant:** Text displayed when a product has multiple variants for customers to select from.
* **Load nore text:** Sets the label for loading additional products in the bundle section.
### **2.2. Bundle Summary**
* **Bundle summary title:** Sets the title of the summary section where the bundle details are displayed.
* **Show description:** Toggles whether a description is displayed in the bundle summary section.
* **Bundle summary description:**Adds a short description of how the bundle works or its benefits.
* **Offer tier style:** Determines how the progress toward discounts or rewards is displayed.
* **Label**: Displays the offer in text form.
* **Progress**: Uses a visual progress bar to show how close customers are to unlocking the next reward.
* **Total price text:** Sets the label for the total price of all items in the bundle.
* **Add to cart text:** Customize "Add to cart" button text, ensuring it matches your brand style.
* **Step text:** Sets the label for each step in the bundle creation process.
* **Required product text:** Displays a message indicating the number of required items that must be added in a specific step.
* **Blank step text:** Sets the message shown when no products have been added to a specific step yet.
### 2.3. Step icon
* **Default icons**: Visually represent steps in the bundle creation process. These icons help customers identify and differentiate steps quickly.
* **Upload custom icon:** Provides the ability to upload a custom image or GIF for step icons, enabling merchants to align the icons with their brand or product theme
### 2.4. 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. Add Bundle Builder to Other Pages Besides Product Page
{% hint style="info" %}
You can place the Bundle builder 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 Mix and Match block.
Then, on the left panel, scroll down, click **Add section**, choose **Apps**, find and select **BOGOS: Bundle Page** block.
**Step 3**: In the top-right panel, complete the setup field.
* **Offer ID**: Enter the ID of the Bundle builder offer you want to display.
For more details, visit our \[[Add or Adjust BOGOS Blocks](/user-guide/quick-start-guide/adjust-bogos-blocks.md)] guide.
---
# 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-bundle-builder.md?ask=&goal=
```
`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.