What the Wishlist Add Button is
The wishlist add button is a full-width or standard button you can drop onto product pages so shoppers can save items to their Mage wishlist. The button label, colours, shape and size are all configurable. When a product is already on the customer's wishlist, the button automatically switches to the "in wishlist" state.
There are two parts to setting it up:
Customize how it looks in the Mage admin.
Add it to your theme by placing a small snippet wherever you want the button to appear.
Before you start
ℹ️ Prerequisite
The Mage app embed must be enabled in your theme for the button to render. In your Shopify admin go to Online Store → Themes → Customize → App embeds and make sure Mage Loyalty is toggled on.
Customize the appearance
In your Mage Loyalty admin, go to Loyalty Pages → Wishlist Add Button. You'll see a live preview on the right while you edit.
Appearance
Add to wishlist text — label shown when the product is not yet on the wishlist (default: Add to Wishlist).
In wishlist text — label shown when the product is already on the wishlist (default: In Wishlist).
Type — choose between a square Button or a rounded Pill.
Size — Small or Large preset.
Width — Standard (fits the text) or Full width (matches the surrounding container).
Enable icon — adds a heart icon to the left of the button text. The heart inherits the text colour and fills in when wishlisted.
Font size — override the size preset's default font size (10–24 px).
Background, border and text colour — set the button's colours. Hover automatically lightens or darkens the background and border; the text colour stays the same.
Advanced
Disable Customizer Styles — removes all inline styles so the button relies entirely on your own theme CSS.
Click Save when you're done. Changes apply to every button on your storefront immediately. You can also click Reset to defaults at any time to revert.
Add Button Setup
To make the button appear on your storefront, add this snippet wherever you want it to show up — inside product content, below the price, alongside Add to Cart, or anywhere your theme renders the product object.
<mage-wishlist-add-button product-id="{{ product.id }}"></mage-wishlist-add-button>✅ Tip
When placed on a product page, the button automatically adapts to the customer's currently selected variant if the product has variants available.
There are two ways to add it to your theme.
Option 1: Add via the Theme Customizer (no code)
This is the easiest option if your theme supports adding blocks to product pages.
Go to Online Store → Themes → Customize.
Open a product page in the customizer.
Click Add block inside the product information area and choose Custom Liquid.
Paste the snippet above into the Custom Liquid box.
Drag the block to where you want the button to appear (e.g. below the price or next to Add to Cart) and click Save.
ℹ️ Note
Not every theme exposes a Custom Liquid block in the product information area. If you can't find one, use Option 2 below.
Option 2: Add by editing the theme code
Use this option if your theme doesn't support a Custom Liquid block in the right place, or you want full control over where the button sits.
Go to Online Store → Themes and click the ⋯ menu next to your live theme, then Edit code.
Open the main product section (commonly
sections/main-product.liquid).Paste the snippet above where you want the button to appear.
Click Save.
⚠️ Tip
We recommend duplicating your theme before editing code, so you can roll back easily if something looks off.
🗨️ Still need help? Reach out to the Mage Loyalty team through our live chat support.