Display settings

This section controls how the Frequently Bought Together (FBT) bundle looks and behaves on your storefront.

How to set up

Step 1: Display settings

1

Choose widget layout

• Horizontal – products are shown in a row.

• Vertical – products are stacked in a column.

Tip: Horizontal works well for desktop, vertical fits better on mobile.

2

Edit content text

• Title: the main headline above the widget. Example: “Frequently Bought Together.”

• Description: a short explanation under the title. Example: “Buy these items together and save 10%.”

• Completed selection text: message shown when all bundle items are selected. Example: “Bundle complete! Discount applied.”

• Incomplete selection text: message shown when some items are not selected. Example: “Select all to unlock your discount.”

• Translation:

  • Click the Translation button to add text in other languages.

  • Select the target language from the dropdown.

  • Enter translations for Title, Description, and both selection texts.

  • Use variables such as {{value_discount}} or {{remaining_item}} in translations to keep discount values and product counts dynamic.

  • Click Add to save the translation.

3

Set add-to-cart behavior

• Stay on current page: the customer remains on the product page after adding the bundle.

• Redirect to cart: the customer is taken to their shopping cart immediatel

Step 2: Theme and content settings

To adjust the widget design and text, click Edit widget at the top of the Display settings section. Inside the editor, you can switch between two tabs: Theme setting and Content setting.

Theme setting

This tab lets you control the visual style of the Frequently Bought Together widget.

1

Select layout widget

• Horizontal or Vertical (already chosen earlier, but adjustable here).

2

Themes

• Choose a preset color theme from the swatches.

• If the widget colors do not match your Shopify theme, you will see a notice: “Widget color doesn’t match your theme.”

• Click Sync theme color (if available) to match automatically.

• If syncing is disabled due to a theme conflict, click Check my theme to request a quick review.

3

Styles – Background

• Enable Gradient background (optional).

• Background color: set the main widget background.

• Text color on button: set the text color for CTA buttons.

4

Styles – General

• Header color: color of the widget title (e.g., “BUY IT WITH”).

• Background product selected: background for products that are checked/selected.

• Icon color: color of icons (checkboxes, indicators).

5

Styles – Border color

• Border product selected: border color of selected products.

• Divider color: divider lines between products.

6

Styles – Gift

• Icon, price color: color of gift icons and pricing labels.

• Background product: background color for free gifts.

Content setting

This tab lets you control the text and wording inside the widget.

1

Widget text

• “Total” label. Example: Total for {{total_items}} items.

• “Confirm” button label. Example: Confirm.

• “Add to cart” button label. Example: Add to cart.

• “Item added to your cart” button label. Example: Item added to your cart.

• “Total for items” label. Example: Total for {{total_items}} items.

• “You save” label. Example: You save {{discounted_amount}}.

• “Gift” label. Example: Gift.

Variables such as {{total_items}} or {{discounted_amount}} update automatically with the customer’s cart details.

2

Translations

• Click Translation at the bottom of the Content setting tab.

• Select a language, enter translations for each text field, and keep variables intact.

• Example: German translation of “You save {{discounted_amount}}” → Sie sparen {{discounted_amount}}.

Step 3: Preview and save

Look at the live preview panel on the right to see how the widget appears on desktop and mobile.

Make adjustments in Theme or Content tabs until the widget matches your store’s design and language.

When satisfied, click Save to apply your settings.