BOGOS
  • introduction
    • An overview of BOGOS.io
    • Understanding basic terms
    • πŸ“žBook a 30-min demo call
  • πŸ“šUser guide
    • Enabling BOGOS
    • Gift offer
      • Create offers with AI
    • Bundle offer
      • Create Classic bundle
      • Create Mix and match bundle
      • Create Bundle page
        • Display Bundle page
    • Upsell offer
      • Create Checkout Upsell
      • Create Frequently Bought Together
      • Create Thank You Page Upsell
    • Discount offer
      • Create Volume Discount
    • Customize
      • Customize Gift slider
      • Customize Gift icon & Gift thumbnail
      • Customize Cart message
      • Customize Today offer
      • Customize Classic bundle
      • Customize Bundle page
      • Customize Checkout Upsell
      • Customize Frequently Bought Together
      • Customize Thank You Page Upsell
      • Customize Volume discount
    • Analytics
      • Offer Analytics
      • Bundle Analytics
      • Upsell Analytics
    • Settings
    • Uninstall or turn off BOGOS app status
    • Translation
  • βš™οΈAdvanced customization
    • Advance customization (for Devs)
      • Customize using events
      • Customize using BOGOS template
    • Work with Shopify POS
  • Integration
    • Integration with PageFly
    • Integration with Weglot
    • Integration with Ecomposer
    • Integration with GemPages
  • πŸ’³Pricing
    • Pricing plan
  • βœ‰οΈFAQs
    • 1. How to create a Gift with purchase offer?
    • 2. How to create a Buy one get one (BOGO) offer?
    • 3. How to calculate the bill?
    • 4. What is my BOGOS plan?
  • πŸ“„Terms & Conditions
    • General Terms & Condition
    • Refund Policy
    • Privacy Policy
Powered by GitBook
On this page
  • 1. Customization options
  • 1.1 General
  • 1.2 Widget info
  • 1.3 Color
  • 2. Edit upsell widget position on theme

Was this helpful?

  1. User guide
  2. Customize

Customize Frequently Bought Together

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

Last updated 2 months ago

Was this helpful?

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.

πŸ“š