> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecomelixir.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Upsells
> Raise average order value with product page upsells, cart upsells, and bundles
Elixir has four separate upsell surfaces. Each one catches the customer at a different moment, and they work together.
| Upsell | Where it appears | Best for |
| ------------------------------- | --------------------------------- | ------------------------------------------- |
| **Product Upsell** block | Product page, near the buy button | A matching add-on for this specific product |
| **Upsell Product** block | Cart drawer | Impulse adds once they've committed |
| **Upsell Carousel** block | Cart drawer | Several suggestions in a small space |
| **Product Bundle Upsell** block | Cart drawer | One high-value bundle offer with urgency |
Upsells add the product at its normal price. If the offer is "add this for 50% off", create the discount in Shopify admin under **Discounts**, and match its conditions to what the block promises.
## Product page upsell
Add the **Product Upsell** block to your product page to offer an add-on right where the customer is deciding.
1. Open your product page in the theme editor.
2. Add the **Product Upsell** block, usually just above or below the Add to Cart button.
3. Pick the **Upsell product**.
### Behavior
The **Behaviour** setting decides what happens on click:
| Option | What happens |
| -------------------- | --------------------------------------------------------------------------------------------------- |
| **Open cart drawer** | Adds the upsell immediately and opens the cart |
| **Add with product** | Stages the upsell so it's added together with the main product when the customer clicks Add to Cart |
**Add with product** usually converts better. The customer makes one decision and one click instead of being pulled into the cart mid-consideration.
### Show it only for certain variants
**Show only for variant** limits the block to specific variant values. Enter one value, or several separated by slashes:
```
Small
Small / Red
```
Use it for add-ons that only make sense with one option, like a case that only fits the large size.
### Content options
* **Use custom title** off shows the product's own title
* **Make title a link** sends customers to the upsell product's page
* **Show description** with your own text
* **Show badge** with custom text and optional SVG icon
* **Button text after adding**, so the button confirms the add
## Cart upsells
Cart upsells live in the **Cart drawer** section. Add them as blocks.
### Set the header first
Add the **Upsell Section Header** block once. It controls presentation for the upsells below it:
| Setting | What it does |
| --------------------------------------- | ------------------------------------------------------------------------------ |
| **Header Text** | Heading above the upsells, for example "Frequently bought together" |
| **Display Upsell Block in Carousel** | Turns stacked upsells into a swipeable carousel |
| **Carousel Pagination Style** | Dots or a progress bar |
| **Sticky With Footer** | Pins the upsell area above the cart footer so it stays visible while scrolling |
| **Show Scroll Fade Effect** | Gradient fade indicating there's more to scroll |
| **Use Toggle Switch instead of Button** | Swaps Add buttons for toggle switches |
### Add individual upsells
Add one **Upsell Product** block per product you want to offer.
| Setting | What to do |
| ------------------------------------------- | -------------------------------------------------------------------------------------- |
| **Select Upsell Product** | The product to offer |
| **Specific Variant** | Lock to one variant by ID or title, for example `Blue / Large` |
| **Only show when this product is in cart** | Trigger product. Leave empty to always show. |
| **Button Text** and **Success Button Text** | Before and after adding |
| **Show Star Rating** and **Rating Source** | Use Product Metafield for real ratings, see [product ratings](/guides/product-ratings) |
| **Show Best Seller Tag** | Badge with custom text and optional SVG |
| **Card Layout** | Standard, or Compact which replaces the button column with a small plus circle |
**Only show when this product is in cart** is the setting worth planning around. It turns a generic upsell into a relevant one: offer filters only when the machine is in the cart, offer a leash only with a collar.
Two or three cart upsells is the ceiling. Past that the cart becomes a catalog and customers stop scrolling to the checkout button.
### Upsell carousel
The **Upsell Carousel** block takes a whole product list in one block instead of one block per product. Use it when you want to offer six accessories without adding six blocks.
It shares the same card settings as individual upsells: description source, best seller tag, rating source, card layout, toggle switch, and image style.
### Bundle upsell
The **Product Bundle Upsell** block presents a single bundle with urgency built in:
| Setting | What it does |
| ----------------------------------------- | ------------------------------------------------------------ |
| **Product** | The bundle product |
| **Heading Text** | Offer headline |
| **Show Countdown Timer** | Adds a timer that persists as the drawer opens and closes |
| **Timer Label** and **Custom Timer Icon** | Timer presentation |
| **Show Save Badge** | Savings badge, shown when the product has a compare-at price |
| **Bullet Points** | One benefit per line |
The save badge needs a **compare-at price** on the bundle product. Without one there's no saving to calculate and the badge stays hidden.
## A setup that works
1. **Product page:** one Product Upsell block set to **Add with product**, offering the natural companion item.
2. **Cart:** an Upsell Section Header with carousel mode on, plus two Upsell Product blocks with trigger products so they're contextual.
3. **Cart:** one Product Bundle Upsell with a countdown for your highest-margin bundle.
Then check the cart drawer on a phone. Upsells are the first thing to make a mobile cart feel bloated.
## Troubleshooting
Blocks add the product at its normal price. Create an automatic discount in Shopify admin and match its conditions to the offer you advertise in the block.
Check whether **Only show when this product is in cart** is set. If it points at a product that isn't in the cart, the upsell stays hidden. Leave it empty to always show.
Set **Specific Variant** on the block, using either the variant ID from the admin URL or the exact variant title.
The badge is calculated from the compare-at price. Add one to the bundle product in Shopify admin.
Turn on **Sticky With Footer** in the Upsell Section Header so the checkout button stays pinned, and cut the number of upsells.