The Saved for Later popup is the modal dialog 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, with a clear Save and Cancel choice.
The popup is one of two cart-removal interceptor modes. You can pick either Toast or Popup, not both. This page covers the Popup mode. For the lighter notification version, see Setting Up the Saved for Later Toast.
Find the editor under Wishlist → Saved for later → Saved for Later Popup → Customise.
Before the popup 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 Popup. See: Saved for Later - Overview & Enabling.
Editor basics
Text
Heading text: the main line shoppers see, e.g.
Save this for later?Body text: an optional second line under the heading. Leave blank to hide it.
Primary action text: the label on the save button, e.g.
Save for later.Cancel text: the label on the dismiss button, e.g.
Not now.
Content
Show product image: when on, a product thumbnail appears on the left of the popup.
Show product name: when on, the product name and variant (if applicable) appear under the heading.
Both default to on so the shopper can see which item is being saved at a glance. Turn them off if you want a minimal text-only popup.
Appearance
Background colour: the modal fill.
Text colour: applies to the heading and primary text.
Muted text colour: applies to body text and the variant line (if shown).
Button background colour: fill of the primary Save button. Also used as the outline and label colour of the Cancel button.
Button text colour: label colour on the primary Save button.
Border radius: corner roundness of the modal, in pixels.
Button radius: corner roundness of the action buttons, in pixels.
Image radius: corner roundness of the product image, in pixels (only used when Show product image is on).
Backdrop opacity: how dark the page behind the modal becomes when the popup opens, from 0 (no dim) to 100 (fully opaque). Default is 45.
How dismissing works
There are four ways a shopper can dismiss the popup:
Click the Cancel button.
Click the × close icon in the top-right of the modal.
Click anywhere on the backdrop (the dimmed area outside the modal).
Press the Escape key.
All four methods are equivalent. None of them save the item, they all just close the popup.
Clicking the primary action button is the only way to save the item.
Also prompt on quantity reduction
By default, the popup 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 popup editor, because it applies to both Toast and Popup modes.
Each item only triggers the popup once per session. If the shopper reduces or removes the same item again, the popup 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 (colours, radii, backdrop opacity). With this on, only your custom CSS controls the look of the popup. Useful if you want to style the popup entirely from your theme.
Custom CSS
You can target the popup from your theme's stylesheet or from the Saved for Later builder's Advanced tab. All classes follow BEM naming with the mage-sfl-backdrop and mage-sfl-modal prefixes.
Class | Description |
| The full-screen dimmed background behind the modal. |
| Applied while the popup is on screen (fade-in / fade-out target). |
| The modal container itself: background, border radius, padding. |
| The × close button in the top-right corner. |
| The horizontal row that holds the image and the copy column. |
| The product image (only rendered when Show product image is on). |
| The text column: heading, product name, variant, body text. |
| The heading line. |
| The product name line (only rendered when Show product name is on). |
| The variant line under the product name (only rendered when the variant title is meaningful). |
| The optional body text (only rendered when Body text is filled in). |
| The footer row that holds the Cancel and Save buttons. |
| Shared base class for both action buttons. |
| Modifier for the Cancel button (outline style). |
| Modifier for the primary Save button (filled style). |
Custom CSS examples
Stronger backdrop dim:
.mage-sfl-backdrop { background-color: rgba(0, 0, 0, 0.6) !important; }Wider modal with extra padding:
.mage-sfl-modal { max-width: 480px; padding: 28px; }Pill-shaped buttons:
.mage-sfl-modal__btn { border-radius: 9999px; padding: 12px 24px; }Troubleshooting
The popup 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 Popup.
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. Contact support to see if we can support your theme.
If you have already been prompted for this item earlier in the session, the popup will not show again until you reload the page. This is intentional: each item only triggers the prompt once per session.
The popup opens but the page behind it stays fully visible. Check the Backdrop opacity setting. A value of 0 means no dim at all. The default is 45, which gives a clear focus without obscuring the page completely.
The popup is hidden behind my sticky header. Raise the z-index in your custom CSS:
.mage-sfl-backdrop { z-index: 2147483000; }Need help?
If the popup isn't quite matching your store's look and you're not sure which selector to target, reach out to our team for help.