Customize Frequently bought together

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

1. Customization options

1.1 General

Customize the layout and structure of the widget:

• Widget layout – Choose how the upsell products are displayed (e.g., Amazon-style or stacked).

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

1.2 Widget info

Control the content displayed in the upsell widget:

• Total price text – Customize the label 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.

1.3 Color

Customize the colors of the Frequently Bought Together upsell to match your store’s branding.

1.3.1 Choose a theme

You can select from the default widget themes to quickly apply a preset style, or customize the colors by yourself with the below options.

1.3.2 Background color

• Widget background – Adjust the background color of the upsell widget.

1.3.3 Text color

Customize the colors for different text elements in the widget:

• Widget title & subtitle – Customize the colors of the main title and sub-title to match your store’s branding.

• Item name – Set the color of product names displayed in the upsell widget.

1.3.3 Price color

• Item price – Choose colors for the original price (before discount) and the discounted price to highlight savings.

• Total price – Define colors for both the original total price and the discounted total price

1.3.4 Button color

Adjust the colors of the CTA button:

• Button color – Change the background color of the “Add bundle to cart” button.

• Button text color – Customize the color of the text inside the button.

2. Edit upsell widget position on theme

To further adjust the placement of the Frequently bought together widget within your store's theme, click Open theme editor and position the widget as needed.

3. Add the Frequently bought together block to other pages besides the Product Page

Step 1: Navigate to your Online Stores in the Shopify navigation menu => choose Themes => Customize

Step 2: In the Shopify Theme Editor, go to the page where you want to add the Frequently Bought Together block.

Then, on the left panel, scroll down, click Add section, choose Apps, find and select BOGOS: Frequently bought together block.

Step 3: In the top-right panel, complete the setup fields

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

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