> 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/design-settings-overview.md).

# Design settings overview

The **Design** section controls how your widgets look on your store (layout, colors, buttons, and what information shows).\
Any changes you make here update the **Preview** on the right, so you can see results instantly.

### ✅ Before you start

1. Open the app > go to app Settings
2. Click **Design**
3. Use the tabs at the top to switch between widget types:
   * **Related**
   * **Frequently Bought Together**
   * **Add on**
   * **Search Add on**
   * **More views** (dropdown)

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

***

### 🧩  How the Design page is organized

On the left, you’ll see settings grouped into sections (most widgets share the same structure):

* **General** → layout + size + placement
* **Elements** → what product info appears
* **Colors** → colors for headings, price, buttons, labels
* **Preview** (right side) → live preview of the widget

***

### 1) Choose a layout (Template)

**Template** controls how products are displayed in the widget.

Common templates you may see:

* **Carousel** — products slide horizontally (popular for product pages)
* **List** — simple vertical list
* **Table** — compact list-style layout
* **Vertical** — stacked cards (often good for sidebars)
* **Slider** — large sliding cards
* **Bundle** — grouped products (used a lot in Frequently Bought Together)

Tip: If you’re not sure, start with **Carousel**.

***

### 2) Set the widget size

#### **Maximum width**

Controls how wide the widget can be.

* Example: **1170** fits most desktop themes.
* Smaller numbers make the widget more compact.

#### **Number of products**

Controls how many products show in the widget.

* Example: **10** = show up to 10 items
* The final number displayed can depend on the layout and screen size.

***

### 3) Choose where the widget appears (Position)

**Position** decides where the widget is placed on the page.

Common options you may see:

* **Use app block in theme editor** (recommended)
* **Below the product form** (commonly used for bundles/FBT)
* **Before / After a HTML element** (advanced)

Tip: Use **app block in theme editor** when possible, it’s the easiest to manage.

***

### 4) Pick what shoppers can see (Elements)

The **Elements** section lets you show/hide parts of each product card.

Common options include:

* **Variant select** — show variant dropdown
* **Sale label** — show SALE badge
* **Price** — show product price
* **Add to cart button** — show the add-to-cart button

Tip: If your widget is small (sidebar/cart), hide extra elements to keep it clean.

***

### 5) Customize colors (Colors)

In **Colors**, you can adjust styling such as:

* **Heading / Subheading**
* **Product title**
* **Product price / old price**
* **Sale label + background**
* **Button text + background**

Tip: Match your theme’s button and text colors so the widget looks native.

***

### 6) Use the live Preview

The **Preview panel** on the right updates as you change settings.

Use it to quickly verify:

* spacing and layout
* readability (text + price)
* button visibility
* sale label appearance

⚠️ Note: Some widgets (like **Thank you offers**) may show **“No preview available”** depending on Shopify page limitations.

***

### ✅ Save your changes

When you’re done, click **Save** in the top-right corner of Shopify.

**🙋 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.