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:
Choose Widget layout: Choose how the upsell products are displayed (e.g., Amazon-style or stacked).
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.
Widget border radius: drag the slider to adjust the corner roundness of the widget.
Product image size: choose the size of the product images shown on the widget.
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:
Total price: Customize the text for the total price section.
Button text: Modify the text displayed on the add to cart button.
Show each item's price: Enable or disable the display of individual product prices in the widget.
Show discount amount on Add to cart button: Choose whether to display the applied discount (e.g., "20% OFF") on the button.
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.
Shipping discount: Choose your shipping icon among some available options or upload your own one (image or gif is supported).
Edit Text lable 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 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:
Choose Product card style: between Horizontal and Vertical to control how each product card is laid out.
Choose Widget style among 3 styles.
Select Checkbox position between left and right to set where the checkbox appears on each product card.
Widget border radius: drag the slider to adjust the corner roundness of the widget.
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:
Choose Title text alignment: select Left, Center, or Right to control how the widget title is aligned.
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.
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
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 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:
Open your Theme Editor > go to the page where you want to add new or adjust current Frequently Bought Together widget.
On the left panel > Click Add block > Choose Apps > Find and select BOGOS: FBT block.
Drag and drop the section/block to where you want.
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.
Click Save.
For more details, please read our [Adjust BOGOS Block] guide.
Last updated