# Products, coupons and the cart

> Add product grids and recommendations, unique coupon codes, the contact's cart and their purchase data to campaign and automation emails. Alpha: open to the Emailit team only.

With your shop's products and orders in Emailit (see [Commerce](/docs/commerce/)), campaign and automation emails can show products, give each recipient their own coupon code, list what's in their cart and use their purchase history. Every tag on this page works in the subject, the HTML and the plain-text version, and is filled in for each recipient when the email is created.

> **Commerce is in alpha:** Commerce is open only to the Emailit team while we test it. See [Who can use Commerce](/docs/commerce/#who-can-use-commerce).

## Add a block in the editor

In the campaign wizard's **Content** step, select **Products & coupons**. Pick products, a coupon, the cart or customer data, adjust the options, select **Copy** and paste the tag into your content. In the rich-text and Dragit editors, the variables menu also lists ready-made commerce tags.

The rest of this page describes the tags themselves, for the HTML editor, the API and automation templates.

## Product grids

`{{products}}` inserts a grid of product cards with an image, the title, the price (with the old price struck through when the product is on sale) and a button:

```handlebars
{{products source="best_sellers" limit="3"}}
{{products source="recently_viewed" limit="4" fallback="best_sellers" button="View"}}
{{products "on_sale"}}
```

A leading quoted word is a short form for `source`.

| Attribute | Default | Meaning |
| --- | --- | --- |
| `source` | `best_sellers` | Where the products come from, see below. |
| `limit` | `4` | How many products, up to 12. |
| `category` | | With `source="category"`, the category. With `best_sellers` or `newest`, limits them to it. |
| `ids` | | With `source="ids"`, your product IDs separated by commas, in the order to show. |
| `days` | `30` | Time window for `best_sellers` and `recently_viewed`, up to 365. |
| `fallback` | | A workspace-wide source to use when a personal source finds nothing for a recipient. |
| `columns` | 3, or fewer products | Cards per row, 1 to 4. |
| `button` | `Shop now` | Button text. `button=""` hides the button. |
| `button_color` | `#111111` | Button color as a hex code. |
| `show_price` | `true` | `false` hides prices. |
| `show_description` | `false` | `true` adds the product description. |

Feeds skip archived products and products with an inventory of 0, except `last_order`.

### Sources

| Source | Same for everyone | Products |
| --- | --- | --- |
| `best_sellers` | Yes | Most units sold in the last `days`. Padded with the newest products when there aren't enough sales. |
| `newest` | Yes | The products added to your catalog most recently. |
| `on_sale` | Yes | Products whose compare-at price is above the price. |
| `category` | Yes | Best sellers of one `category`, then its newest products. |
| `ids` | Yes | The products you list in `ids`. |
| `recently_viewed` | No | The products the recipient viewed on your site in the last `days`, most recent first. Needs the [tracking script](/docs/commerce/connect-your-shop/#the-tracking-script). |
| `recommended` | No | Best sellers in the categories the recipient viewed or bought, without what they already bought. Falls back to best sellers. |
| `bought_together` | No | Products often bought together with what the recipient bought. |
| `last_order` | No | The items of the recipient's most recent order. |

### Your own layout

To design the cards yourself, loop over a feed with `{{#each}}`. Inside the loop, use the product fields:

```handlebars
{{#each products.recommended limit="3" fallback="best_sellers"}}
  <a href="{{url}}"><img src="{{image_url}}" alt="{{title}}" width="180"></a>
  <p>{{title}}: {{price_formatted}}{{#if on_sale}} <s>{{compare_at_price_formatted}}</s>{{/if}}</p>
{{/each}}
```

| Field | Value |
| --- | --- |
| `id`, `sku` | Your product ID and SKU. |
| `title`, `description`, `brand` | Product text. |
| `url`, `image_url` | Links to the product page and image. |
| `price`, `price_formatted` | The price as a number and formatted with its currency, for example `€139.00`. |
| `compare_at_price`, `compare_at_price_formatted` | The old price. |
| `on_sale` | `true` when the compare-at price is above the price. |
| `currency`, `categories` | Currency code and the list of categories. |
| `index`, `number` | The position in the loop, from 0 and from 1. |

Use `{{#if products.recently_viewed}}...{{/if}}` to show a section only when a recipient has products in a feed. Product data is HTML-escaped, so a product title can't break your email.

## Coupon codes

`{{coupon "key"}}` inserts a code from the [coupon](/docs/commerce/coupons/) with that key:

```handlebars
<p>Here's 10% off your next order: <strong>{{coupon "welcome10"}}</strong></p>
```

- A **unique codes** coupon gives each recipient their own code from its pool. A recipient keeps the same code in every email of the same campaign or automation, including the web version.
- A **one code for everyone** coupon inserts its code for everyone.
- When a unique coupon's pool is empty or the coupon has expired, recipients get its fallback code, or nothing if it has none.
- Previews and test sends show a sample such as `WELCOME10-PREVIEW` and don't use up codes.
- An unknown key renders nothing.

`{{coupon.welcome10}}` is the same code as a variable, for example in `{{#if coupon.welcome10}}`.

## The cart

`{{cart}}` inserts the recipient's open cart: each item with its image, quantity and price, the total and a **Return to your cart** button linking to the cart's checkout URL. Set `button` and `button_color` like on product grids. When the recipient has no open cart, it renders nothing.

For your own layout, use the cart variables:

```handlebars
{{#if cart}}
  <p>You left {{cart.item_count}} items ({{cart.total_formatted}}) in your cart.</p>
  {{#each cart.items}}<p>{{quantity}} × {{title}}: {{line_total_formatted}}</p>{{/each}}
  <a href="{{cart.checkout_url}}">Complete your order</a>
{{/if}}
```

`cart` has `id`, `total`, `total_formatted`, `currency`, `checkout_url`, `item_count` and `items`. Each item has the product fields above plus `quantity`, `line_total` and `line_total_formatted`. The cart is the contact's most recent active or abandoned cart, so in an [abandoned cart automation](/docs/automations/recipes/#abandoned-cart-reminder) it's the cart that was abandoned.

## Customer data

| Tag | Value |
| --- | --- |
| `{{customer.orders_count}}` | Number of orders. |
| `{{customer.total_spent}}`, `{{customer.total_spent_formatted}}` | Total spent, as a number and formatted. |
| `{{customer.average_order_value}}`, `{{customer.average_order_value_formatted}}` | Average order value. |
| `{{customer.first_order_at}}`, `{{customer.last_order_at}}` | Dates of the first and last order, `YYYY-MM-DD`. |
| `{{customer.expected_next_order_at}}` | When the next order is expected, from the second order on. |
| `{{customer.churn_risk}}` | `low`, `medium` or `high`, or empty without orders. |
| `{{customer.is_customer}}` | `true` when the contact has ordered. |

```handlebars
{{#if customer.is_customer}}Thanks for being a customer since {{customer.first_order_at}}.{{else}}Your first order ships free.{{/if}}
```

## Web version

`{{webview_url}}` links to a web version of the email, rendered for that recipient with the same products, cart and coupon code. Use it for a "View in browser" link.

## Related

  - [Commerce](/docs/commerce/): Connect your shop and see revenue from email.
  - [Temple](/docs/templates/temple/): Variables, fallbacks and conditionals.

---
Source: https://emailit.com/docs/campaigns/products-and-coupons/