> For the complete documentation index, see [llms.txt](https://docs.tipo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tipo.io/tipo-related-products/design-and-appearance/frequently-bought-together-design.md).

# 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="/files/QUZD0z7TpAJfsYed71Q9" 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="/files/OIHIkwxjK2OOn2kyZTxn" 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="/files/1DnFuelACxP64oMZ0wif" 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="/files/rXjCz692ap5oox8o3thE" 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.

***