# Frequently Bought Together – Design

Use **Frequently Bought Together**  in the app **Settings** to control how your bundle widget looks on your storefront (layout, position, visible elements, and colors). Changes show instantly in the preview.

### 🛠️ How to find the setting

Open the app > click **Settings** > **Design** > click on **Frequently Bought Together** tab

You’ll see:

* Design settings on the left
* A live **Preview** on the right

Changes are shown instantly in the preview.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FARaoC63tfWhP1mcdhHlV%2F2025-12-22_10-40-41.png?alt=media&#x26;token=92934ace-8b48-4f19-83e3-6691c74c3131" alt=""><figcaption></figcaption></figure>

***

### 1) Choose a layout (Template)

This controls how related products are displayed on your store.

#### Available layouts

* **Carousel**\
  Products scroll horizontally.\
  Best for product pages and modern layouts.
* **Bundle**\
  Shows products grouped together.\
  Ideal for “Buy together” or bundle offers.
* **Table**\
  Compact, list-style layout.\
  Useful when showing many products.
* **List**\
  Simple vertical list.\
  Clean and easy to scan.
* **Vertical**\
  Stacked cards.\
  Often used in sidebars.
* **Slider**\
  Large sliding cards.\
  Good for visual impact.

**Tip:**\
If you’re not sure, start with **Carousel,** it works well for most stores.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FMJKgrKQEl3tBqu2DmXsx%2F2025-12-22_10-41-50.png?alt=media&#x26;token=7dc9e800-ef55-49df-bbe6-ffafb7c9d3ce" alt=""><figcaption></figcaption></figure>

***

### 2) General layout settings

#### Maximum width

Controls how wide the widget can be.

* Example: **1170** fits most desktop layouts
* Smaller values make the widget more compact

***

#### Number of products

Sets how many related products are shown.

* Example: **10** → show up to 10 products
* Actual number may depend on layout and screen size

***

### 3) Choose widget position

Defines **where the widget appears** on the product page.

Common options:

* **Below the product form** (most common)
* **Use app block in theme editor** (recommended for OS 2.0 themes)
* **Before / After a HTML element** (advanced use)

**Tip:**\
Use **App block** if your theme supports it, it’s the safest option.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FzkgEV6NgEGD4eiajZJTv%2F2025-12-22_10-42-44.png?alt=media&#x26;token=da7081f4-dd3e-452e-9dd3-e07c9f247e92" alt=""><figcaption></figcaption></figure>

***

### 4) Show or hide elements

Choose what information is displayed inside the widget:

* **Variant select**
* **Sale label**
* **Price**
* **Add to cart button**

**Recommended:**

* Keep **Price** and **Add to cart** enabled
* Enable **Variant select** only if variants matter

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FBTefXLfVvHI0Yb6bZtJF%2F2025-12-22_10-44-47.png?alt=media&#x26;token=404c744a-f789-45d4-a810-2e40256ab539" alt=""><figcaption></figcaption></figure>

***

### 5) Customize colors

Match the widget to your store’s design.

You can customize:

* Heading & subheading
* Product title
* Price & old price
* Sale label text & background
* Button text & background

***

### 6) Preview your changes

Use the **Preview panel** to:

* See layout changes instantly
* Check spacing, colors, and buttons
* Confirm mobile-friendly appearance

**🙋 Still need support?**

If you still need help, please feel free to contact us at <hi@tipo.io>. We’ll be happy to assist you further.

***