# 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 widget elements with any of the **3 methods** below:
* Choose a preset template to apply a ready-made color set.
* Adjust individual color fields for the background, text, and discount tier states.
* Contact BOGOS support to customize the colors to match your store's branding.
## 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 Content
BOGOS allows you to customize the colors of all widget elements with any of the 3 methods below:
* Choose a preset template to apply a ready-made color set.
* Adjust individual color fields for the background, text, and discount tier states.
* Contact BOGOS support to customize the colors to match your store's branding.
## 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.
---
# Agent Instructions: 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:
```
GET https://bogos-guideline.gitbook.io/user-guide/detailed-guide/customize/customize-frequently-bought-together.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.