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

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.

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.

Before you publish