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.

---

🛠️ Where 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.

---

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.

---

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.

---

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

Disable elements to keep the layout clean and simple.

---

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 [email protected]. We’ll be happy to assist you further.