> 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-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://bogos-guideline.gitbook.io/user-guide/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](/user-guide/quick-start-guide/adjust-bogos-blocks.md)] guide.