# Add-on widgets – Design

Add-on layouts help you show extra products (upsells) in different places, such as product pages, search results, collections, or the cart.\
This guide explains how to choose and design **Add-on** layouts.

### **💡** What are Add-on layouts?

Add-on layouts are recommendation widgets used to encourage customers to add more items before checkout.

Common use cases:

* “You may also like”
* “Add this item”
* Upsells on product, cart, or search pages

You can design each Add-on layout separately.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2F7dPET6QGBzRrFWlwSfF7%2F2025-12-22_10-58-25.png?alt=media&#x26;token=ecc8dced-ce59-4e57-9374-4031162f4234" alt=""><figcaption></figcaption></figure>

***

### 🛠️ Where to find the setting

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FwPBic6ariAsSokzGN0Uo%2F2025-12-22_10-59-57.png?alt=media&#x26;token=7f63dbdd-4fcc-49d6-a4a5-98c9e0abd520" alt=""><figcaption></figcaption></figure>

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.

***

### 1) Choose where the Add-on appears

Click **More views** to choose the **Add-on** location.

Available **Add-on** views include:

* **Homepage Add on** – show Add-ons on the homepage
* **Search Add on** – show Add-ons on search result pages
* **Collection Add on** – show Add-ons on collection pages
* **Cart Add on** – show Add-ons inside the cart
* **Cart Inline Offer** – inline offers inside cart items
* **Thank you offers** – offers after checkout
* **Cart Recently viewed products** – based on browsing history

Each view has its own design settings.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FG7f6DcNkz1EvgTbvCVOA%2F2025-12-22_11-03-15.png?alt=media&#x26;token=5f3f9453-c97a-4d55-a157-6afa65cc06ff" alt=""><figcaption></figcaption></figure>

***

### 2) Choose a layout (Template)

Select how Add-on products are displayed.

Available templates:

* **Carousel** – horizontal scrolling products (recommended)
* **Bundle** – products grouped together (great for upsells)
* **Table** – compact list view
* **List** – simple vertical list
* **Vertical** – stacked cards
* **Slider** – large sliding cards

**Tip:**\
Start with **Carousel** if you’re not sure, it works well in most cases.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FySdFLNiO6UKL0plAAuC7%2F2025-12-22_11-03-57.png?alt=media&#x26;token=73dad766-d39c-4b97-b6cb-523b46a7f6ce" alt=""><figcaption></figcaption></figure>

***

### 3) Adjust general layout settings

#### Maximum width

* Controls how wide the Add-on widget is
* Example: `1170` fits most desktop layouts

#### Number of products

* Sets how many Add-on products are shown
* Example: `10` → show up to 10 products

#### Position

* Choose where the widget appears, such as:
  * Use app block in theme editor
  * Before / after HTML elements

***

### 4) Choose visible elements

You can turn elements on or off:

* Variant selector
* Sale label
* Price
* Add to cart button

&#x20;Disable elements to keep the layout clean and simple.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2Flr704JMExXXF3JQsPDZL%2F2025-12-22_11-04-43.png?alt=media&#x26;token=26c87cb7-fd56-48b4-8061-14cba87c3f72" alt=""><figcaption></figcaption></figure>

***

### 5) Customize colors

Control the look of the Add-on widget:

* **Heading color**
* **Subheading color**
* **Product title color**
* **Price & old price color**
* **Sale label background**
* **Button text & background**

***

### 6) Preview your design

Use the **Preview panel** on the right:

* See changes instantly
* Test different templates and colors
* Make sure it fits your store’s design

***

### ✅ Best practices

* Use **Carousel** or **Bundle** for upsells
* Keep Add-on widgets simple and visible
* Match colors with your theme
* Limit product count to avoid clutter

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