# Cart upsells

> Product suggestions based on what the visitor just added to the cart, shown in the mini cart, on the cart page or anywhere on the page.

Status: Ready (Smootify 2.0)  
Plan: Lite plan  
1.x page: https://docs.smootify.io/docs/cart/cart-upsells  
URL: https://www.smootify.io/docs/build/cart-upsells  
Updated: 2026-10-01

Cart upsells suggest products that go with what the visitor just added. Smootify asks Shopify for the recommendations of the product added most recently, leaves out the products already in the cart, and fills a product card you design. The suggestions change as the cart changes.

> [!NOTE]
> Cart upsells need the Lite or Server plan, or the **Cart Upsell** extension activated in the Smootify dashboard. On your `.webflow.io` address they work without it, so you can build and test first.

## How it fits together

What Smootify needs:

- a `smootify-product` element with `data-id="cart-upsells"`. It is the template of one card. It needs no product id and no CMS.

What is up to you:

- where the suggestions go: inside the mini cart, on the cart page, or anywhere else on the page;
- the card design: image, title, price, an add button;
- a heading or a wrapper around the cards, shown only when there is something to suggest.

```html
<div condition="has-cart-upsells">
  <div>You may also like</div>
  <div>
    <smootify-product data-id="cart-upsells" limit="4">
      <img variant="image">
      <a href="#" product="url">Product</a>
      <smootify-price><div data-prop="price">$0.00</div></smootify-price>
      <button data-is="direct-add-to-cart"><div data-state="default">Add</div><div data-state="loading">Adding…</div></button>
    </smootify-product>
  </div>
</div>
```

## 1. Add the card template

1. Add a Div block where the suggestions should appear, such as under the lines of the mini cart. The cards are placed inside it, next to each other, so style it as a grid or a row.
2. Inside it, add a Custom element with the tag `smootify-product` and the custom attribute `data-id="cart-upsells"`.
3. Design one card inside it. Everything a product card can show works here: see [Product cards](https://www.smootify.io/docs/build/product-cards).

Smootify copies the card once for each suggestion. On the live site, the card you designed is replaced by the suggestions, and nothing shows while there are none. Each card gets its product id and `cart-upsell="true"`: Smootify writes both, so don’t add them yourself.

**How many.** `limit` on `smootify-product` sets the most cards it shows. The default is 3. Smootify asks Shopify for at most 10 recommendations of each kind, so a list of one kind never shows more than 10.

## 2. Choose which suggestions

The value of `data-id` decides which recommendations Shopify gives:

| `data-id` | What it shows | Who chooses the products |
|---|---|---|
| `cart-upsells` | complementary products first, then related products | you, then Shopify |
| `cart-complementary` | complementary products only | you, for each product, in Shopify's Search & Discovery app; without them, the list shows nothing |
| `cart-related` | related products only | Shopify; you can adjust them in Shopify's Search & Discovery app |

The suggestions always come from the product added most recently. When the visitor adds a suggestion, that product becomes the latest one, and the suggestions change to match it.

You can use several lists on the same page, such as related products in the mini cart and complementary products on the cart page. Each list is filled on its own.

## 3. The add button

Add a Custom element with the tag `button` and `data-is="direct-add-to-cart"` inside the card. A click adds one item of the product’s current variant, without a form.

- It is disabled when that variant cannot be bought.
- The elements inside it with `data-state="default"` and `data-state="loading"` swap while the product is added.
- The cart stays open and shows the new line.
- A picker inside the card, such as [`variant-swatches`](https://www.smootify.io/docs/reference/elements/variant-swatches), lets the visitor choose the variant first.

Use this button inside the cart. An add-to-cart form cannot go there, because Webflow does not put a Form Block inside another Form Block. A full [`smootify-add-to-cart`](https://www.smootify.io/docs/reference/elements/smootify-add-to-cart) form works for suggestions placed outside the cart’s Form.

## 4. Hide the section when it is empty

An element with `condition="has-cart-upsells"` shows only while at least one list on the page has a card. Put it on the wrapper with the heading, so “You may also like” does not stay on screen alone. It works anywhere on the page. See [page conditions](https://www.smootify.io/docs/reference/conditions/page).

## Before you publish

> [!STUCK]
> - **Suggestions show on `.webflow.io` but not on your domain.** The plan does not include Cart Upsell. Use the Lite or Server plan, or activate the extension in the Smootify dashboard.
> - **`cart-complementary` shows nothing.** The product has no complementary products. Add them in Shopify's Search & Discovery app.
> - **No suggestions at all.** The cart is empty, or every recommended product is already in the cart.
> - **The heading stays when there are no suggestions.** Add `condition="has-cart-upsells"` to the wrapper.
> - **You cannot add an add-to-cart form to the card.** The card is inside the cart's Form. Use the `direct-add-to-cart` button.