# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tipo.io/tipo-related-products/design-and-appearance/related-products-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.