The Saved for Later toast is the small notification that appears on your storefront when a shopper removes a product from their cart. It asks if they want to save the item for later.

The toast is one of two cart-removal interceptor modes. You can pick either Toast or Popup, not both. This page covers the Toast mode.

Find the editor under Wishlist → Saved for later → Saved for Later Toast → Customise.

Before the toast will fire on your storefront, Saved for Later must be enabled, and the interceptor mode in the General tab of the Saved for Later builder must be set to Toast. See: Saved for Later - Overview & Enabling.

Editor basics

Text

Heading text: the main line shoppers see, e.g. Save this for later?
Action text: the inline call-to-action that doubles as the save link, e.g. Save for later.

Content

Show product image: when on, a small product thumbnail appears on the left of the toast.
Show product name: when on, the product name appears as a muted line below the heading.

Both default to off for a minimal text-only card. Turn them on for a more receipt-like layout that confirms which item is being saved.

Appearance

Background colour: the toast fill.
Text colour: applies to the heading, action text, and close icon.
Border colour: the outline. Set it to match the background if you don't want an outline.
Border radius: corner roundness of the toast itself, in pixels.
Image radius: corner roundness of the product image, in pixels (only used when Show product image is on).

Behaviour

Position: Top, Middle, or Bottom of the viewport. Bottom is the default.
Auto-dismiss duration: how long the toast stays visible, in milliseconds. Default is 8000 ms (8 seconds).

The auto-dismiss timer pauses while a shopper is hovering over the toast, so they have time to read it. The timer resumes once they move the cursor away.

How the on-click action works

Clicking anywhere on the toast triggers a save. The Action dropdown decides what happens immediately after:

Save

The item is saved and the toast fades out. This is the default.

Save and open popup

The item is saved and the Saved for Later popup opens automatically so the shopper can see their list. The popup must be enabled for this to work.

Save and open sidebar

The item is saved and the Account Sidebar opens at the Saved for later page. The account sidebar must be enabled with the Saved for later block setup for this to work.

When the shopper clicks, the action text briefly swaps to "Saved" before the toast fades. This is built-in feedback and is not configurable.

Also prompt on quantity reduction

By default, the toast only fires when an item is fully removed from cart. If you also want it to fire when a shopper reduces an item's quantity (for example dropping from 3 to 2), turn on Also prompt on quantity reduction.

This option lives in the General tab of the Saved for Later builder, not the toast editor, because it applies to both Toast and Popup modes.

Each item only triggers the toast once per session. If the shopper reduces or removes the same item again, the toast stays silent so they aren't nagged.

Advanced

Disable customizer styles

In the Advanced card, the Disable customizer styles checkbox lets you turn off all the inline styling that the editor produces. With this on, only your custom CSS controls the look of the toast. Useful if you want to style the toast yourself.

Custom CSS

You can target the toast from your theme's stylesheet or from the Saved for Later builder's Advanced tab. All classes follow BEM naming with the mage-sfl-toast prefix.

Class	Description
`.mage-sfl-toast`	The toast wrapper: fixed position, background, border, radius.
`.mage-sfl-toast--visible`	Applied while the toast is on screen (fade-in / fade-out target).
`.mage-sfl-toast--top`	Position modifier: top of the viewport.
`.mage-sfl-toast--middle`	Position modifier: vertically centred.
`.mage-sfl-toast--bottom`	Position modifier: bottom of the viewport (default).
`.mage-sfl-toast__image`	The product image thumbnail (only rendered when Show product image is on).
`.mage-sfl-toast__copy`	The text column: heading, optional product name, action text.
`.mage-sfl-toast__heading`	The heading line ("Save this for later?").
`.mage-sfl-toast__name`	The optional product name line.
`.mage-sfl-toast__cta`	The inline save link ("Save for later").
`.mage-sfl-toast__close`	The × close button on the right.

Custom CSS examples

Match your theme's pill style:

.mage-sfl-toast {   background: #0f172a;   border-color: #1e293b;   border-radius: 9999px;   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .mage-sfl-toast__cta {   color: #38bdf8 !important; }

Wider toast with extra padding:

.mage-sfl-toast {   padding: 16px 48px 16px 16px;   max-width: 420px; }

Slide in from the right instead of fading:

.mage-sfl-toast {   transition: transform 0.25s ease, opacity 0.25s ease;   transform: translateX(40px); } .mage-sfl-toast--visible {   transform: translateX(0); }

Troubleshooting

The toast does not appear when I remove an item from cart.

Confirm Saved for Later is enabled and the interceptor mode in the General tab is set to Toast.
Confirm the Mage Loyalty app embed is enabled on your live theme.
Make sure your theme supports AJAX cart updates (drawer or pop-up cart). Themes that fully reload the page on every cart change are not currently supported.
If you have already been prompted for this item earlier in the session, the toast will not show again until you reload the page. This is intentional: each item only triggers the prompt once per session.

Clicking the toast does not open the popup or sidebar. Make sure the matching surface is enabled. If the toast's action is set to "Save and open popup", the Saved for Later popup must be enabled in the builder. If it is set to "Save and open sidebar", the Account Sidebar must be enabled.

The toast is hidden behind my sticky header. Raise the z-index in your custom CSS:

.mage-sfl-toast {   z-index: 2147483000; }

The product image is not showing on the storefront, but looks fine in the preview. Some Shopify themes (Dawn, Sense) have a CSS rule that collapses content-less divs. Mage forces the image visible with inline styles, but if you have written aggressive custom CSS that overrides this, the image can be hidden. Check your custom CSS for any rule that targets div:empty or sets display: none on .mage-sfl-toast__image.

Need help?

If the toast isn't quite matching your store's look and you're not sure which selector to target, reach out to our team for help.

Setting Up the Saved for Later Toast