# 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FkOUZ1zoEoCompMBZjloT%2F2025-12-22_11-24-00.png?alt=media&#x26;token=747d3cff-624d-4de4-9a28-fdfcc7423aa9" 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.