The Mage Loyalty app embed must be enabled on your live Shopify theme before the Wishlist will work on your storefront. If you have not done this yet, see: How to Enable the Mage Loyalty App Embed.
What is the Wishlist?
The Wishlist lets customers save products they want to come back to later. They can add items from any product or collection page, group them into custom collections (for example "Birthday gifts" or "Living room ideas"), and move items into the cart in one click.
Customers can also share a collection with friends or family by sending them a link.
Guests can use the Wishlist out of the box, with their items stored in the browser.
When a guest signs in, their saved items merge into their account automatically.
How to Enable the Wishlist
From your Shopify admin, open the Mage Loyalty app.
In the left menu, click Wishlist.
Click Customise to open the wishlist builder.
At the top of the builder, toggle Wishlist on.
Click Save.
How to Add a Wishlist Link to Your Storefront
The wishlist popup opens any time a customer clicks a link ending in #mage-wishlist.
Most stores add a small heart icon to the navbar so customers can open their wishlist from any page. To set this up:
Decide where you want the trigger. Most stores use a heart icon in the main navbar, next to the cart and account icons.
Edit the link in your store's navigation menu (or theme code) to point to #mage-wishlist. For example: https://your-store.com/#mage-wishlist
Save your changes.
Open your storefront and click the heart to test - the wishlist popup should open.
If you also use the Mage Account Sidebar, you can add a Wishlist block to allow wishlisted items to appear here. This could be used in combination with the wishlist popup, or as a replacement if you prefer.
Customising the Wishlist
The wishlist builder has four tabs:
Tab | What It Controls |
General | Dialog title and the labels you use for "collection" |
Pages | Text for each state of the popup: home, logged-out, and inside a collection |
Design | Colours, border radius, and button styling |
Advanced | Custom CSS, z-index, and the disable customizer styles toggle |
Common Mistakes to Avoid
Enabling the Wishlist before the app embed is active. The Wishlist will not appear on your storefront until the Mage Loyalty app embed is enabled on your live theme. Always complete the app embed step first.
Not clicking Save after toggling the Wishlist on. The toggle alone does not save the change. Click Save before leaving the builder.
Forgetting to add the trigger link. The hearts will appear on your product and collection pages once you enable the Wishlist, but customers will not be able to view their saved items until you add a link or icon pointing to #mage-wishlist.
Troubleshooting
The hearts are not appearing on my product pages
The wishlist hearts must be added independently to enabling the wishlist. Refer to our separate documentation on how to setup the wishlist heart on your product cards.
Confirm the Mage Loyalty app embed is enabled on your current live theme. This is the most common cause. See: How to Enable the Mage Loyalty App Embed.
Check that you clicked Save after enabling the Wishlist toggle.
Open your storefront in an incognito browser window to rule out caching.
Clicking my heart icon does not open the popup
Confirm the link ends in #mage-wishlist and is spelled correctly.
Check that the Wishlist toggle is on inside the Mage app.