Toast

The storefront's single notification overlay — cart, favorites, and recipe events trigger it, with editable designs for every event.

Last updated

August 14, 2026

How to use

Place this component once in your Page Template(s) so it appears on every page.
Set Style to design the toast's appearance, position, animation, and duration. Where the layer sits on your canvas doesn't matter — the toast's real position is the one set inside Style. (Setting the canvas layer to Fixed keeps the preview tidy.)
Enable Cart and/or Favorites to connect designs for each event. For any Toast event that you don't want to trigger, do not connect a component instance.
Turn on Recipes to connect per-recipe toast designs, setting the unique Recipe ID per design.
Use the Preview dropdown to select which Toast to display on the canvas while editing.

Cart & favorites events

Every cart and favorites toast message connects to its own design. A tidy way to manage them: build one design component with a text variable, and reuse it for every event with different copy.

Cart Event	Explanation
`⦿ Add: Success`	A product was added to cart.
`⦿ Add: Error`	A product was attempted to be added to the cart, but failed.
`⦿ Remove: Success`	A product was removed from the cart.
`⦿ Remove: Error`	A product was attempted to be removed from the cart, but failed.
`⦿ Update: Success`	A product's quantity was updated.
`⦿ Update: Error`	A product's quantity was attempted to be updated, but failed.

Favorites Event	Explanation
`⦿ Add: Success`	A product was added to Favorites.
`⦿ Add: Error`	A product was attempted to be added to Favorites, but failed.
`⦿ Remove: Success`	A product was removed from Favorites.
`⦿ Remove: Error`	A product was attempted to be removed from Favorites, but failed.

Recipe toasts

You can trigger custom toasts in any Recipe set in the Butter plugin. For example, when a customer visits your site with a discount code in the URL, you can trigger a toast that lets them know that their discount is auto-applied.

To use Recipe toasts, enable the Recipes property control and set the Amount for how many slots you need. For each slot, set its Recipe ID (from the plugin) and connect a design.

Matching is by Recipe ID and is case-insensitive. A slot without a connected design is skipped rather than breaking the page.

One instance per site

Only place this component once per site, with the exception of if you are using multiple page templates. Cart, favorites, and recipe events all trigger this same shared toast, so a second instance would double-render every notification.