> 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/related-products-design.md).

# Related products – Design

The **Related products** section in the design setting lets you control how your *Related Products widget* looks on your store.\
You can choose the layout, adjust spacing and sizes, show or hide elements, and customize colors — all with live preview.

### 🛠️ How to find the setting

Open the app > click **Settings** > **Design** > click on **Related** 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/Hyot1bYLNYiRIKnOygG6" alt=""><figcaption></figcaption></figure>

***

### 1) Choose a layout (Template)

This controls how related products are displayed.

#### Available layouts

* **Carousel**\
  Products scroll horizontally (best for product pages).
* **Bundle**\
  Shows products grouped together (great for bundles or “buy together” offers).
* **Table**\
  Compact, list-style layout (useful for many products).
* **List**\
  Simple vertical list.
* **Vertical**\
  Stacked cards, often used in sidebars.
* **Slider**\
  Large sliding cards for visual impact.

<figure><img src="/files/fNouUCOoGUeHiJS9uGsV" alt=""><figcaption></figcaption></figure>

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

***

### 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 shown may depend on layout and screen size.

***

#### Position

Defines where the widget appears.

* **Use app block in theme editor** (recommended)
* Or theme-specific placement options

***

### 3. Elements&#x20;

Choose which product elements are visible:

* **Variant select** – show variant dropdowns (size, color, etc.)
* **Sale label** – show “Sale” badge
* **Price** – show product price
* **Add to cart button** – allow quick add

Example:\
If you want a cleaner look, you can hide **Variant select** and only show the **Add to cart** button.

***

### 4. Color settings

Customize the widget to match your store’s branding.

You can change colors for:

* Heading
* Subheading
* Product title
* Product price
* Old price
* Sale label text
* Sale label background
* Button text
* Button background

All colors update instantly in the preview.

***

### 5. Live preview

The **Preview panel** on the right shows exactly how your widget will look on your store.

Use it to:

* Compare layouts
* Test colors
* Check spacing and readability

No need to save to see changes.

***

### Example setup

**Goal:** Clean related products carousel under product description

Recommended settings:

* Template: **Carousel**
* Maximum width: `1170`
* Number of products: `6`
* Enabled elements:
  * Price
  * Sale label
  * Add to cart button
* Colors: Match your theme’s primary colors

<figure><img src="/files/XOZj2VNihHIJDtrUgqJE" alt=""><figcaption></figcaption></figure>

Result:\
A modern, scrollable related products section that blends seamlessly with your store.

***

### Tips & best practices

* Keep the number of products between **4–8** for best conversion
* Use **Carousel** for product pages, **List/Table** for sidebars
* Match button and text colors with your theme for consistency
* Always check the preview before saving

**🙋 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.