Cart upsells

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.

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.

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.

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:

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, 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 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.

Before you publish