Skip to main content

Adding the Wishlist to a Dedicated Page

Show the Wishlist directly on its own page instead of in a popup, using a Custom Liquid block in your theme.

Written by Kris James

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.

Showing the Wishlist on a Page Instead of a Popup

By default, the Wishlist opens as a popup when a customer clicks a wishlist link or heart icon. If you would rather the wishlist lives on its own page, you can do that too.


Before You Start

Prerequisite
The Wishlist must be enabled before the page block will show anything. In your Mage Loyalty admin, go to Wishlist → Wishlist Popup → Customise and toggle the Wishlist on, then click Save. For the full steps, see the Wishlist - Overview & Enabling article.

You will also need a theme that supports Custom Liquid sections. Almost all modern Shopify themes do.


Step 1: Create a Dedicated Page

  1. From your Shopify admin, go to Online Store → Pages.

  2. Click Add page.

  3. Give the page a title, for example Wishlist or My Wishlist. You can leave the content area empty.

  4. Click Save.

This gives you a clean page that you can point the Wishlist at in the next step.


Step 2: Add the Wishlist Block

Next you will add a small Custom Liquid block to your new page through the theme editor.

  1. Go to Online Store → Themes, then click Customise on your live theme.

  2. Using the page selector at the top of the editor, navigate to the page you just created.

  3. In the left panel, click Add section (or Add block) and choose Custom Liquid.

  4. Paste the following into the Custom Liquid box & Save:

<div id="mage-wishlist-block"></div>

Open the page on your storefront and the Wishlist will now appear directly on it.

Tip
The block must use exactly id="mage-wishlist-block". Do not change or rename the id, and only add it once per page.


Linking Customers to Your Wishlist Page

How customers reach the page is completely up to you. Most stores simply add a link or a heart icon to their navigation that points to the new page URL (for example /pages/wishlist).


How It Behaves

  • The Wishlist shows inline on the page, with no popup overlay.

  • On this page, the popup will not open. The page itself is the wishlist.

  • It uses the same content and design as your Wishlist Popup. The title, labels, colours, and any custom CSS you have set all carry over. There are no separate settings to manage.

  • Logged-out customers see your sign-in prompt on the page, the same prompt used in the popup.


Common Mistakes to Avoid

Adding the block before enabling the Wishlist. If the page is blank, the most likely cause is that the Wishlist is switched off. Enable it under Wishlist → Wishlist Popup → Customise first.

Adding the block more than once. Only place a single mage-wishlist-block on the page. Adding it twice can cause the Wishlist to render more than once.


FAQ

Can I keep the popup and use a page at the same time?

Yes. The page shows the Wishlist inline, while the popup continues to work on every other page. If you only want the page, simply do not link to the popup from your other pages.

Do I style the page separately from the popup?

No. The page follows the same design settings and custom CSS as your Wishlist Popup, so anything you change in the builder applies to both.

Can I add the block to an existing page instead of a new one?

Yes. You can place the block anywhere you can add a Custom Liquid section. A dedicated page is usually the cleanest option, but it is not required.


Still need help?
If your Wishlist page is not showing as expected, reach out to the Mage Loyalty team through live chat and we will be happy to help.

Did this answer your question?