Toasts

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 write each toast as HTML in a component, 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: an element with the attribute toast set to the event’s name. Smootify hides the templates and shows a copy of one each time its event happens.
• 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 smootify-toasts element. It goes once per page, so put it in a component that is on every page, such as your layout, navbar or footer.

Give it a class and place it with CSS, for example position: fixed at the bottom right with a 16 px offset. Until you do, Smootify places it bottom right. Smootify’s tags are inline by default: use display: flex with flex-direction: column and a gap to stack the toasts.

Two optional 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 an element for each event you want and give it the attribute toast with the event’s name. Design it as the toast should look: its class and everything inside it are the toast’s. Smootify hides the templates and shows a copy of one each time its event happens.

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

• toast-item="image" on an <img>: 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 [form-done], so each form says its own thing.

Everything else in a template is yours: write it in the template, 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.

<smootify-toasts>
  <div toast="added-to-cart">
    <img toast-item="image" alt="">
    <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 <button type="button" 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 (<a>) with data-action="open-cart" opens the page’s mini cart and closes the toast. Set its href to your cart page: on a page without a mini cart, the link takes the visitor there.

4. Animate them

Each toast gets 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 .is-visible opacity: 1 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 [form-done] 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.

Before you publish