Skip to main content

Setting Up the Wishlist Toast

Written by Kris - Mage Loyalty
Updated today

The wishlist toast is the small pill that appears on your storefront when a shopper adds or removes a product from their wishlist.

The toast appears automatically whenever your storefront heart or Add to Wishlist button is clicked. You don't need to add anything to your theme for it to work. It's configured once and applies everywhere those widgets are placed.

Find the editor under Loyalty Pages → Wishlist Toast.

Editor basics

Text

  • Added text: what shoppers see when they add an item, e.g. Added to wishlist.

  • Removed text: what they see when they remove one, e.g. Removed from wishlist.

Both support any string up to ~40 characters; longer text will truncate on narrow screens. Keep them short and direct. This is a brief confirmation, not a full message.

Appearance

  • Background colour: the pill fill.

  • Border colour: the outline. Set it to match the background if you don't want an outline to show.

  • Text colour: applies to both the message and the close icon.

  • Text font size: the "Added / Removed" message size in pixels.

  • Action text font size: the call-to-action size (only shown when the on-click action isn't "Nothing"; see below).

Behaviour

  • Position: Top, Middle, or Bottom of the viewport. Bottom is the default.

  • Auto-dismiss duration: how long the toast stays visible, in seconds. Default is 4 seconds. Clicking the close icon dismisses it immediately.

How the on-click action works

The middle of the toast (message + action text) is a clickable link. What happens when a shopper clicks it is controlled by the Action dropdown:

Nothing

The toast is informational only. Clicking the body does nothing. No call-to-action text is shown, just the message.

Open Accounts Sidebar Wishlist

Clicking the toast opens your storefront sidebar with the wishlist page active. The sidebar must be enabled for this to work; the editor will warn you if it isn't.

Open Wishlist Popup

Clicking the toast opens the full-screen wishlist dialog. The wishlist popup must be enabled in the Wishlist builder for this to work; the editor will warn you if it isn't.

Action text

When the action is not "Nothing", the Action text field becomes editable. This is the underlined call-to-action that appears alongside the "Added to wishlist" message. The default is View.

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 (background, border, text colours, font sizes). With this on, only your custom CSS controls the look of the toast. Useful if you want to style the toast entirely from your theme.

Custom CSS

You can target the toast from your theme's stylesheet or from the wishlist builder's custom CSS field. All classes follow BEM naming with the mage-wishlist-toast* prefix.

Class

Description

.mage-wishlist-toast

The toast pill itself: fixed-position wrapper, background, border, radius

.mage-wishlist-toast--visible

Applied while the toast is on screen (fade-in / fade-out target)

.mage-wishlist-toast--top

Position modifier: top of the viewport

.mage-wishlist-toast--middle

Position modifier: vertically centred

.mage-wishlist-toast--bottom

Position modifier: bottom of the viewport (default)

.mage-wishlist-toast__link

The clickable body (message + action text). Flexes them on one baseline

.mage-wishlist-toast__message

The main message text ("Added to wishlist" / "Removed from wishlist")

.mage-wishlist-toast__action-text

The trailing call-to-action ("View"), underlined by default

.mage-wishlist-toast__close

The × close button on the right

CSS variables

The colour and font-size controls in the editor are driven by CSS custom properties. If you prefer, override these instead of writing selector-specific rules:

Variable

Set by editor field

--mage-toast-bg

Background colour

--mage-toast-border

Border colour

--mage-toast-text

Text colour

--mage-toast-font-size

Text font size

--mage-toast-action-font-size

Action text font size

Custom CSS examples

Match your theme's button style:

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

Wider toast with extra padding:

.mage-wishlist-toast {   padding: 14px 22px;   min-width: 300px; }

Slide in from the right instead of fading:

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

Troubleshooting

The toast doesn't appear when I click the heart. The heart or Add to Wishlist widget may have data-trigger-toast="false" set on it. Check your theme markup. The default is to trigger the toast.

Clicking the toast doesn't open the sidebar / popup. Make sure the corresponding feature is enabled: the sidebar under Sidebar settings, or the wishlist dialog under

Wishlist builder. If the toast's "Open …" action points at a surface that's disabled, clicking the toast does nothing. The editor warns you about this inline when you pick an action that depends on a disabled feature.

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

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

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.

Did this answer your question?