# Toasts

> Short messages you design in Webflow that appear for a few seconds when something happens - a product added to the cart, a wishlist change, a form sent, a link copied, an error from the cart.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/build/toasts  
Updated: 2026-10-12

A toast is a short message that appears in a corner of the page for a few seconds, then goes away. It tells visitors that something worked when nothing else on the page changes: a product added to the cart on a site without a mini cart, a product saved to the wishlist, a form sent, a link copied. It also shows the errors Shopify gives for the cart. You design each toast in Webflow, and Smootify shows a copy of it when the event happens.

## How it fits together

- **`smootify-toasts`** is the box that holds the toasts, once per page. Smootify shows it above everything else on the page, drawers and dialogs too.
- **A template per event**, inside it: a Div block with the custom attribute `toast` set to the event’s name. Smootify hides the templates and shows a copy of one each time its event happens.
- **Custom attributes inside a template** mark where Smootify writes the product image, its title, the price or the message.

There is no toast for an event without a template. You choose the events by adding only the templates you want. A page without `smootify-toasts`, or with no template in it, shows no toast.

## 1. Add the toasts box

Add a Custom element with the tag `smootify-toasts`. It goes once per page, so put it in a component that is on every page, such as your navbar or footer component.

Give it a class and place it with Webflow’s position settings, for example **Fixed**, bottom right, with a 16 px offset. Until you do, Smootify places it bottom right. Use flex, vertical, with a gap, to stack the toasts.

Two optional custom attributes on `smootify-toasts`:

- **`data-duration`**: how long a toast stays, in milliseconds. The default is `4000`. With `0` a toast stays until the visitor closes it.
- **`data-max`**: how many toasts show at once. The default is `3`. When one more arrives, the oldest goes.

## 2. Design a template for each event

Inside `smootify-toasts`, add a Div block for each event you want and give it the custom attribute `toast` with the event’s name. Design it as the toast should look: its class and everything inside it are the toast’s. In the Designer the templates stay visible, so you design them in place. On the published site Smootify hides them.

| Template | Shows when | Smootify fills |
|---|---|---|
| `toast="added-to-cart"` | a product is added to the cart, from any button; not when a mini cart opens for that add | image, title, variant-title, quantity, price, count |
| `toast="wishlist-added"`, `toast="wishlist-removed"` | a wishlist toggle saves or removes a product | image, title, variant-title |
| `toast="form-sent"` | a Smootify form is sent: newsletter, back in stock, account and server forms | message: the text of that form's Success message |
| `toast="link-copied"` | a share button copies its link; not when the phone's share sheet opens | none: write the text in Webflow |
| `toast="cart-error"` | Shopify refuses a cart change: an add, a quantity, a discount code | message: Shopify's text |
| `toast="error"` | the fallback for errors when the page has no cart-error template | message |

Inside a template, mark the parts Smootify fills with the custom attribute `toast-item`:

- **`toast-item="image"`** on an Image: Smootify sets the product image and its alt text.
- **`toast-item="title"`** and **`toast-item="variant-title"`**: the product name and the chosen variant, such as Blue / M.
- **`toast-item="quantity"`** and **`toast-item="price"`**: how many were added and what they cost together, in the store’s money format. The price is the total for that quantity, not the price of one: write the line as “Qty 2 · €98.00”, not “2 × €98.00”.
- **`toast-item="count"`**: how many lines were added at once, for a bundle or a product with add-ons.
- **`toast-item="message"`**: the text of the message. For `form-sent` it is the text of that form’s Success message, so each form says its own thing.

Everything else in a template is yours: write it in Webflow, such as “Added to cart” or “Link copied”. A part Smootify has no value for is hidden, such as the variant title of a product with only one variant. Design those parts so the toast looks right without them.

```html
<smootify-toasts>
  <div toast="added-to-cart">
    <img toast-item="image">
    <div>Added to cart</div>
    <div toast-item="title">Product</div>
    <div toast-item="variant-title">Variant</div>
    <a href="/cart" data-action="open-cart">View cart</a>
  </div>
  <div toast="cart-error">
    <div toast-item="message">Message</div>
  </div>
</smootify-toasts>
```

## 3. Add the buttons

- **Close.** A Custom element with the tag `button` and the custom attribute `data-action="close"` closes its toast. Give it an aria-label, such as “Close”, when it shows only an icon.
- **Open the cart.** A Link block with the custom attribute `data-action="open-cart"` opens the page’s mini cart and closes the toast. Set its link to your cart page: on a page without a mini cart, the link takes the visitor there.

## 4. Animate them

Each toast gets combo classes you can style and animate:

- **`is-visible`** right after the toast enters the page. Give the template opacity 0 and a small offset, and the combo class `is-visible` opacity 100% and no offset, with a transition: the toast slides in.
- **`is-leaving`** just before it goes. Smootify waits for its transition or animation to end, one second at most, then removes it.
- **`is-error`** on the `cart-error` and `error` toasts, for an error look if they share a class with the others.

The timer stops while the pointer is over a toast, while the focus is in it or while a finger touches it, so visitors have time to read it and click.

## When to use them

- **A site without a mini cart.** The `added-to-cart` toast tells visitors the product is in the cart, and its “View cart” link takes them there. On a site with a mini cart that opens on add to cart, the cart itself answers, and Smootify does not show the toast for that add.
- **The wishlist.** A heart that fills is easy to miss on a phone: a toast with the product’s name confirms it.
- **Forms and share buttons.** Visitors see that the form was sent or the link copied, without a Success message in the layout.
- **Cart errors.** A quantity or a code Shopify refuses shows up wherever the visitor is on the page.

For your own messages from custom code, see `Smootify.toast` in [JavaScript API](https://www.smootify.io/docs/developers/javascript-api).

## Before you publish

> [!STUCK]
> **No toast shows.** The template is missing, or its name is misspelled. Smootify shows only the events that have a template. On your `.webflow.io` address the debugger lists a name that is not an event as one only custom code can show.
> **The toast shows in the middle of the page.** `smootify-toasts` has no position. Give its class the Fixed position and the offsets you want.
> **No toast after adding to the cart.** The mini cart opened for that add, so Smootify did not show the toast. That is on purpose.
> **An empty line in the toast.** The line is not marked with `toast-item`, or it holds text you wrote. Smootify hides only the `toast-item` parts it has no value for.
> **Two toasts boxes on the page.** Only one `smootify-toasts` belongs on a page. Keep it in a single component that is on every page.