> ## Documentation Index
> Fetch the complete documentation index at: https://aiodapp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Upsell

> Template for recommending related products with an optional percentage or fixed discount and a configurable storefront Upsell widget.

Use **Upsell** when a merchant wants to recommend additional products based on products in the customer's cart.

The template card says: "Recommend related products with an optional automatic discount widget." The example shown in AIOD is "Add socks when a customer buys shoes".

## When to use this template

Use this template for:

* Cross-sell or upsell recommendations triggered by cart items.
* Related-product recommendations on product pages, the cart page, or side cart drawer.
* Recommendations with no discount.
* Recommendations with an optional percentage or fixed discount.
* Horizontal or vertical storefront product layouts.

Use [Volume Discount / Bundle](/docs/templates/volume-discount-bundle) when customers should choose a quantity-based bundle tier. Use [Buy X Get Y (Discount)](/docs/templates/buy-x-get-y-discount) when the promotion must enforce buy-X-get-Y qualification and reward quantities. Use [Custom Rule Builder](/docs/templates/custom-rule-builder) when the merchant needs conditions or discount logic that the Upsell form does not provide.

## Entry points

The template and widget cards open the same configuration form.

### Discount Templates

In Shopify admin, open **Apps** > **AIOD Discount & Gift** > **Discount Templates**.

Click **Create** on **Upsell**. AIOD opens a form titled **Upsell**.

### Discount Widgets

In Shopify admin, open **Apps** > **AIOD Discount & Gift** > **Discount Widgets**.

Click **Create New Widget**, then click **Upsell** under **Ready-Made Widgets**. This shortcut opens the same **Upsell** form. It does not have separate widget-only configuration.

## Top-level controls

The **Upsell** form has two tabs:

| Tab               | What it controls                                                                                             |
| ----------------- | ------------------------------------------------------------------------------------------------------------ |
| **Offer**         | Trigger items, recommended products, optional discount, offer title, visibility rules, and widget locations. |
| **Widget design** | Widget copy, product layout, display options, colors, sizes, and preview.                                    |

The form also shows:

* **Need more control?** and **Use Custom Rule Builder**. Use this button to switch to the more flexible rule builder when the Upsell template is not sufficient.
* A **Widget Preview** panel.
* A **Rule Size** indicator. The observed form showed Shopify's `10 KB` limit and **This limit is set by Shopify**.
* **Previous** and **Next** navigation. The final **Widget design** tab has **Save**.

### Status mode

The top-right status dropdown controls who can use or see the offer.

| Status                          | Meaning                                                                                |
| ------------------------------- | -------------------------------------------------------------------------------------- |
| **Live**                        | The discount is active for customers.                                                  |
| **Testing** or **Testing mode** | The discount is visible to the merchant for testing, but it is not live for customers. |
| **Deactive**                    | The discount is turned off.                                                            |

While creating a new **Upsell**, the observed status was **Live**. Newer draft forms can show only **Live** and **Testing mode**.

## Offer tab

Use **Offer** to choose when the widget appears, which products it recommends, and whether those products receive a discount.

### Trigger

The **Trigger** section chooses which cart products cause the Upsell widget to appear.

| Trigger target           | Conditional control                                           |
| ------------------------ | ------------------------------------------------------------- |
| **All products**         | No picker. This was selected by default in the observed form. |
| **Specific products**    | Shows **Browse** and an item-selection area.                  |
| **Specific collections** | Shows **Browse** and an item-selection area.                  |
| **Specific variants**    | Shows **Browse** and an item-selection area.                  |

Before a selection is made, the picker says: **No items selected. Click "Browse" to choose.**

AIOD states: **The offer will be displayed when the trigger product is in the cart.**

### Offer products

The **Offer products** section chooses which products the widget recommends.

Options:

* **Specific products**. Selected by default in the observed form.
* **Specific collections**.
* **Specific variants**.

Each mode uses an item picker. The observed **Specific products** mode showed **Search products**, **Browse**, and **No items selected. Click "Browse" to choose.**

There is no **All products** option in the observed **Offer products** section.

### Discount

Use **Discount Type** to choose whether the recommended products receive a discount.

| Discount Type      | Conditional field                                                                              |
| ------------------ | ---------------------------------------------------------------------------------------------- |
| **No discount**    | Hides **Discount Value**.                                                                      |
| **Percentage**     | Shows **Discount Value** with a `%` suffix. This was selected by default in the observed form. |
| **Fixed Discount** | Shows a numeric **Discount Value** input with placeholder `Enter value`.                       |

The observed discount value was blank. Enter a value before saving a discounted Upsell offer.

### Offer Title

The **Offer Title** input has placeholder `eg: SUMMER UPSELL` and a `64`-character counter.

AIOD says the title is shown to customers in cart and checkout when the discount is applied.

### Offer visibility

Use these checkboxes to suppress recommendations that are no longer useful:

* **Hide products that are already in cart**. Off by default.
* **Hide products that match trigger product**. Off by default.

### Where should the widget appear?

Read [**Where should the widget appear?**](/docs/app/common-template-settings#where-should-the-widget-appear) for information about this.

## Widget design tab

Use **Widget design** to configure the storefront widget copy and appearance.

### Widget content

Controls and observed defaults:

| Control                     | Observed default or behavior                    |
| --------------------------- | ----------------------------------------------- |
| **Icon**                    | Opens the title icon selector.                  |
| **Title**                   | `You may also like`                             |
| **Sub text**                | Blank. Supports adding a link to selected text. |
| **Button CTA: Add text**    | `Add`                                           |
| **Button CTA: Adding text** | `Adding`                                        |
| **Button CTA: Added text**  | `Added`                                         |

Use the three CTA fields to define the button copy before, during, and after the product is added.

### Style

#### Product layout

Options:

| Layout         | Behavior                                                                                                |
| -------------- | ------------------------------------------------------------------------------------------------------- |
| **Horizontal** | Products are arranged side by side inside each horizontal carousel slide. This was selected by default. |
| **Vertical**   | Products stack vertically inside each horizontal carousel slide.                                        |

The layout section includes:

* **Products visible at a time** slider. Observed value: `3`. AIOD says this also controls the admin preview.
* **Products visible at a time on smaller storefront screens** slider. Observed value: `3`. AIOD says this does not change the admin preview.

#### Product and price display

Options and observed defaults:

| Control                          | Observed default                             |
| -------------------------------- | -------------------------------------------- |
| **Show icon in CTA button**      | On. A **CTA button icon** picker is visible. |
| **Show currency prefix**         | On.                                          |
| **Do not show discounted price** | Off.                                         |
| **Show sold out products**       | On.                                          |
| **Hide variant info**            | Off.                                         |

#### Colors and border

| Control                | Observed default |
| ---------------------- | ---------------- |
| **Background color**   | `#FFFFFF`        |
| **Border color**       | `#D9D9D9`        |
| **Title color**        | `#303030`        |
| **Product name color** | `#303030`        |
| **Button color**       | `#2A2A2A`        |
| **Button text color**  | `#FFFFFF`        |
| **Border radius**      | `16px`           |

#### Text sizes

| Text             | Observed size |
| ---------------- | ------------- |
| **Title**        | `18px`        |
| **Sub title**    | `15px`        |
| **Product name** | `12px`        |
| **Pricing text** | `14px`        |
| **Button text**  | `11px`        |

### Widget placement and preview

The placement configured on the **Offer** tab also applies here.

Before offer products are selected, **Widget Preview** says: **Select offer products in the Offer tab to see the preview UI.**

## Save

Click **Save** on the **Widget design** tab after selecting offer products and reviewing the preview. If Shopify admin shows an **Unsaved changes** bar, its **Save** and **Discard** buttons apply to the current draft changes.