New Update: Frequently Bought Together in cart
Read the docs
Ctrlk
Watch TutorialsVisit WebsiteResources
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Customize Frequently Bought Together

Overview of how to customize the appearance of the Frequently Bought Together widget on the product page.

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 label for cheapest item (if you choose Discount type as Cheapest item free).

Remember to enable the preview options to see how the shipping discount and cheapest item free are shown on the widget.

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 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.

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.

  1. 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 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.

3. Cart page

Customize how the upsell widget appears on the cart page. Customization here applies globally to all FBT offers with Cart page enabled in Display placement.

3.1 General

  1. Product list style: Horizontal card, carousel/ Horizontal card, collapsed/ Vertical card, carousel/ Vertical card, collapsed

  2. Widget style: Choose from 3 available styles.

  3. Widget border radius: Drag the slider to adjust the corner roundness.

  4. Rounded image (optional): Auto-match the corner roundness of product images to the widget border.

3.2 Content

  1. Title text alignment: Left, Center, or Right.

  2. Number of products displayed:

  • Choose Compact or Fullwidth.

  • Products per row: Set how many products display per row.

  1. Add button:

  • Button style: Icon button, Text button, or Text and icon.

  • Select icon: Choose from available icons or upload your own. available icons or upload your own.

3.3 Color

  1. Customize colors for:

  • Widget: Title, Description

  • Product card: Card background, Card border

  • Text: Product name, Variant name, Discount price, Original price

  • Add button: Button color, Button text

  • Carousel button: Button position: Header or On slider, Icon color.

  1. 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.

  • Contact the BOGOS support team to get help with color customization.

Click Save when done.

4. Cart drawer

Customize how the upsell widget appears in the cart drawer (side cart). Customization here applies globally to all FBT offers with Cart drawer enabled in Display placement.

4.1 General

  1. Product list style: Choose from 4 layouts: Horizontal card carousel, Horizontal card collapsed, Vertical card carousel, or Vertical card collapsed.

  2. Widget style: Choose from available styles.

  3. Widget border radius: Drag the slider to adjust the corner roundness.

  4. Product image size: Xsmall (60x60), Small (80x80), Normal (100x100), or Large (120x120).

  5. Rounded image (optional): Auto-match the corner roundness of product images to the widget border.

4.2 Content

  1. Title text alignment: Left, Center, or Right.

  2. Number of products displayed: Set how many products are visible at first.

  3. Products per row: Set how many products display per row.

  4. Add button:

  • Button style: Icon button, Text button, or Text and icon.

  • Select icon: Choose from available icons or upload your own.

4.3 Color

  1. Customize colors for:

  • Widget: Title, Description

  • Product card: Card background, Card border

  • Text: Product name, Variant name, Discount price, Original price

  • Add button: Button color, Button text

  • Carousel button: Button position: Header or On slider, Icon color.

  1. You can customize colors with any of the 4 methods (dropdown, manual, AI Theme Detector, or BOGOS support).

Click Save when done.

5. Edit upsell widget position

You can place the Frequently Bought Together block on any page of your store, except the Checkout page.

Normally, frequently bought together widget will automatically appear on relevant 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 page

  • 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.

  1. Click Save.

For more details, please read our [Adjust BOGOS Block] guide.

PreviousCustomize Checkout Upsell
NextCustomize Thank You Page Upsell

Last updated

Was this helpful?