> 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-bundle-builder.md).
# Customize Bundle builder
This guide explains how to customize the Bundle Builder, helping you tailor the bundle page to match your store's branding and create a smooth shopping experience for your customers.
Customizing the Bundle Builder with BOGOS includes the 4 steps:
1. In BOGOS Admin, open **Customize** > **Bundle** > **Bundle builder**.
2. Customize the **Bundle product field**.
3. Customize the **Bundle summary field**.
4. Click Save.
### 1. Customize Bundle Product Field
The Bundle product field is where customers browse products and add them to their bundle. This tab lets you customize the layout, content, and styling of that section.
#### a) Content
To set it up, fill in these fields:
* Button text
* When product is out of stock
* When reach maximum quantity
* Number of products per load: Set how many products are displayed per load, with separate settings for Desktop and Mobile:
* Products per row
* Number of rows
* Products per load
* Hide step icon: Hide the step icon on the step progress bar, showing only the step label/title
#### b) See more modal
The See more modal appears when customers click on a product card, showing product images, description, and variants, so customers can view details without leaving the bundle page.
To set it up, fill in these fields:
* Thumbnail gallery position: Choose where the thumbnail gallery appears in the modal:
* Below main image
* Left of main image
* Link to product page label: Enable to show a clickable link in the modal that takes customers to the full product page. When enabled, enter the label text (e.g., "See product's details").
* Select icon: Choose an icon from the available options, or upload your own to match your brand.
{% hint style="warning" %}
* The modal displays up to 10 product images. If a product has more than 10, only the first 10 will be shown.
* For bundle offers already published before this update, only 1 image will be displayed until the offer is published again.
* If a product's images are updated on Shopify, the modal won't auto-sync. Please re-publish the offer to update the latest images.
{% endhint %}
#### c) 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 to auto-generate a full widget color palette based on your store's branding. For more details, visit our \[[AI Theme Detector](https://docs.bogos.io/detailed-guide/customize/ai-theme-detector)] guide.
* Contact the BOGOS support team to get help with color customization.
Click Save when done.
**Step:** Customize the colors of the step selector at the top of the bundle page, including:
* Step background
* Step text
* Step underline (under the active step)
**Page text:** Customize the colors of the text elements on the bundle page, including:
* Page heading
* Page sub-heading
* Step heading (e.g., "Add a facial cleanser")
* Step description
**Product list:** Customize the colors of the text elements on each product card, including:
* Product name
* Variant name
* Discount price
* Original price (strikethrough)
**Add button:** Customize the colors of the "Add to bundle" button on each product card, including:
* Button color (background)
* Button text
#### d) Add-on
Search, sort & filter: Customize how the Search bar, Sort, Filter, and Tab filter display on your bundle page.
* Filter display: Choose how filters appear to customers:
* Combined: All filter types are grouped under a single Filter button.
* Separated: Each filter type has its own button.
* Show selected filter as tags: Enable to show a row of tags below the filter bar
* Active color: The color applied to the selected tab and the active state of filter buttons.
* Active filter tag: The background color of the filter tags row.
### 2. Customize Bundle Summary Field
The Bundle Summary field lets customers review their selected items, track progress toward discount tiers, and add the bundle to their cart. This tab lets you customize its content and styling.
#### a) Content
To set it up, fill in these fields:
* Title
* Show description
* Total price text
* Add to cart button text
* Tier style: Choose how discount tiers are displayed:
* Label: Shows the tier as text (e.g., "Buy 2 items get 10% OFF").
* Progress: Shows a visual progress bar as customers get closer to unlocking the next tier.
* None
#### b) Step
Customize the step section that shows the required items for each step of the bundle.
* Step title
* Required product text
* Blank tex
* Select icon: Choose an icon from the available options, or upload your own to match your brand.
#### c) 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 to auto-generate a full widget color palette based on your store's branding. For more details, visit our \[[AI Theme Detector](https://docs.bogos.io/detailed-guide/customize/ai-theme-detector)] guide.
* Contact the BOGOS support team to get help with color customization.
Click Save when done.
**Bundle summary:** Customize the colors of the bundle summary section, including:
* Background
* Title
* Description
* Required text (the "item(s) required" text)
**Add to cart button:** Customize the colors of the "Add bundle to cart" button, including:
* Button color (background)
* Button text
**Add-on:** Add-on customization applies when your bundle offer includes free gifts or shipping discounts.
* Free gift discount, including:
* Free product text (the label shown next to the free gift product name)
* Free price text (the text replacing the price of the free gift, e.g., "FREE")
* Shipping discount, including:
* Shipping icon: Choose an icon from the available options, or upload your own to match your brand.
* Banner color (background)
* Banner text
### 3. Adjust Widget Position on Your Store
By default, the Bundle builder appears as a separate page once the offer is published.
However, you can place the Bundle builder block on any page of your store (except the Checkout page). To do this:
1. Go to Shopify admin > Online Store.
2. Open the theme editor.
3. Navigate to the page where you want to add the widget.
4. Click **Add section** > **Apps** > select **BOGOS: Bundle Builder block**.
5. In the block settings, enter the **Offer ID** of the Bundle builder offer you want to display.
For more details, visit our \[[Adjust BOGOS Blocks](https://docs.bogos.io/quick-start-guide/adjust-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.
---
# 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.bogos.io/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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
