> 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-frequently-bought-together.md).
# Customize Frequently Bought Together
## 1. Frequently Bought Together
### 1.1 General
To customize Frequently bought together widget, follow these steps:
1. Choose **Widget layout:** Choose how the upsell products are displayed (e.g., Amazon-style or stacked).
2. Enter the **Maximum number of products displayed:** Set the max number of upsell products shown in the widget. If customers want to show other products, they need to click at See more.
3. **Widget border radius**: drag the slider to adjust the corner roundness of the widget.
4. **Product image size:** choose the size of the product images shown on the widget.
5. **Enable image border radius** (optional) to auto-match the corner roundness of product images to the widget border.
### 1.2 Content
Control the content displayed in the upsell widget:
1. **Total price:** Customize the text for the total price section.
2. **Button text:** Modify the text displayed on the add to cart button.
3. **Show each item's price:** Enable or disable the display of individual product prices in the widget.
4. **Show discount amount on Add to cart button:** Choose whether to display the applied discount (e.g., "20% OFF") on the button.
5. Set up the **See more label**:
* Enter the text for the **See more and See less buttons**, shown when the product list is expanded or collapsed.
* Choose **See more text alignment**: select Left, Center, or Right to control the alignment of these buttons.
6. **Shipping discount:** Choose your shipping icon among some available options or upload your own one (image or gif is supported).
7. Edit **Text lable for cheapest item** (if you choose [Discount type](https://docs.bogos.io/detailed-guide/customize/pages/ISD6kieaGTUaQXLJ4ku3#id-5.2-discount-frequently-bought-together-widget) as Cheapest item free)
{% hint style="info" %}
Remember to enable the preview options to see how the shipping discount and cheapest item free are shown on the widget.
{% endhint %}
### 1.3 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.
## 2. Product Add-on
### 2.1 General
To customize Product Add-on widget, follow these steps:
1. Choose **Product card style:** between Horizontal and Vertical to control how each product card is laid out.
2. Choose **Widget style** among 3 styles.
3. Select **Checkbox position** between left and right to set where the checkbox appears on each product card.
4. **Widget border radius**: drag the slider to adjust the corner roundness of the widget.
5. **Enable image border radius** (optional) to auto-match the corner roundness of product images to the widget border.
### 2.2 Content
To customize the content display of the Product Add-on widget, follow these steps:
1. Choose **Title text alignment**: select Left, Center, or Right to control how the widget title is aligned.
2. Enter **Number of products displayed**: set how many products are visible at first. Customers can click **See more** to view all available products.
* **Compact:** applies to the widget displayed on the product page.
* **Fullwidth:** applies when the widget is added as a standalone section in your theme.
3. Set up the **See more label**:
* Enter the text for the **See more and See less buttons**, shown when the product list is expanded or collapsed.
* Choose **See more text alignment**: select Left, Center, or Right to control the alignment of these buttons.
### 2.3 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-1) 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. Edit upsell widget position
{% hint style="info" %}
You can place the Frequently Bought Together block on any page of your store, except the Checkout page.
{% endhint %}
Normally, frequently bought together widget will **automatically appear on relevent product pages.** However, you **have to manually adjust it** if you:
* Don't see the widgets appear
* Want to change the widgets' position on the product pagr
* Want to add new blocks on product pages or other pages on your store
Please follow these steps:
1. Open your **Theme Editor** > go to the page where you want to add new or adjust current Frequently Bought Together widget.
2. On the left panel > Click **Add block** > Choose **Apps** > Find and select **BOGOS: FBT** block.
3. Drag and drop the section/block to where you want.
4. In the top-right panel, complete the setup fields (only if you add FBT block to pages that aren't product pages)
* **Offer ID**: Enter the ID of the Frequently bough together offer you want to display.
* **Product show**: Select a product from your store. All Frequently bought together offers linked to this product will be displayed on the current page.
5. Click Save.
For more details, please read our \[[Adjust BOGOS Block](/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://docs.bogos.io/detailed-guide/customize/customize-frequently-bought-together.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.