What the Wishlist Heart is

The wishlist heart is a small button you can drop onto product cards and product pages so shoppers can save items to their Mage wishlist with one click. It fills in when the product (or selected variant) is on the customer's wishlist and unfills when it's removed.

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 heart to appear.

Before you start

ℹ️ Prerequisite

The Mage app embed must be enabled in your theme for the heart 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 Heart. You'll see a live preview on the right while you edit.

Appearance

Active colour — the fill/stroke when the product is wishlisted.
Inactive colour — the stroke when the product is not wishlisted.
Icon size — heart width and height (16–64 px).
Show circle background — render the heart inside a circular container. Useful when overlaying on product images. Set the circle colour and padding (0–32 px) once enabled.

Advanced

Disable Customizer Styles — removes all inline styles so the heart relies entirely on your custom CSS.
Custom CSS — drop in your own rules using the .mage-wishlist-heart__* classes and --mage-heart-* variables. See the reference table below.

Click Save when you're done. Changes apply to every heart on your storefront immediately.

Heart Button Setup

To make hearts appear on your storefront, you need to add a small snippet wherever you want one to show up. You can do this two ways.

Snippets

Product card (collection pages, search results, featured products)

<mage-wishlist-heart product-id="{{ product.id }}"></mage-wishlist-heart>

Fills when any variant of the product is on the wishlist.

Product page (with variant picker)

<mage-wishlist-heart product-id="{{ product.id }}" variant-id="{{ product.selected_or_first_available_variant.id }}"></mage-wishlist-heart>

Fills only for the selected variant.

✅ Tip

When the product-page snippet is used, the heart automatically adapts to the customer's currently selected variant — switching states as they change colour, size, etc.

Option 1: Add via the Theme Customizer (no code)

This is the easiest option if your theme supports adding blocks to product cards or product pages.

Go to Online Store → Themes → Customize.
Open the page you want to add the heart to (e.g. a collection page for the product card, or a product page).
Click Add block or Add section inside the product card / product information area and choose Custom Liquid.
Paste the relevant snippet from above into the Custom Liquid box.
Drag the block to where you want the heart to appear and click Save.

ℹ️ Note

Not every theme exposes a Custom Liquid block on product cards. 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 Custom Liquid blocks in the right place, or you want full control over where the heart sits.

Go to Online Store → Themes and click the ⋯ menu next to your live theme, then Edit code.
For the product card, open the file that renders product cards (commonly snippets/card-product.liquid or similar in your theme).
For the product page, open the main product section (commonly sections/main-product.liquid).
Paste the appropriate snippet from above where you want the heart to appear.
Click Save.

⚠️ Tip

We recommend duplicating your theme before editing code, so you can roll back easily if something looks off.

CSS classes & variables reference

If you're using the custom CSS field (or styling from your theme stylesheet), these are the targets the heart exposes.

Selector / Variable	What it targets
`mage-wishlist-heart`	The custom element wrapper.
`.mage-wishlist-heart__btn`	The button itself.
`.mage-wishlist-heart__btn--active`	The button when the item is on the wishlist.
`.mage-wishlist-heart__btn--with-text`	The button when it includes accompanying text.
`.mage-wishlist-heart__btn svg`	The heart icon (SVG).
`.mage-wishlist-heart__text`	The label text next to the heart.
`--mage-heart-active`	Active (filled) colour.
`--mage-heart-inactive`	Inactive (unfilled) colour.
`--mage-heart-size`	Width and height of the heart icon.
`--mage-heart-circle-bg`	Background colour of the circle (when enabled).
`--mage-heart-circle-padding`	Padding inside the circle.
`--mage-heart-circle-radius`	Corner radius of the circle.

🗨️ Still need help? Reach out to the Mage Loyalty team through our live chat support.

Setting Up the Wishlist Heart Button