🔗 Before You Start
Wishlist is available on the Growth Plan or higher. You will need to upgrade if you are on a lower plan.
Wishlist requires customer accounts to be enabled on your Shopify store. Customers must be logged in to save and view wishlist items. Guest sessions cannot use the Wishlist.
Why Use Wishlists?
Wishlists keep customers connected to your products even when they are not ready to buy. A customer who saves a product has shown clear purchase intent; they just need the right moment or a nudge.
Reduce lost sales from customers who leave before purchasing
Give customers a reason to return to your store to complete their purchase
Collection sharing turns wishlists into a word-of-mouth tool. Customers share their saved items with friends and family
Pairs naturally with your loyalty program. Customers who are engaged enough to build a wishlist are your best candidates for repeat purchases
Enable the Wishlist Block in the Account Sidebar
The Wishlist block lives inside the Account Sidebar. You need to enable it there before customers can see or use it.
From your Shopify admin, open the Mage Loyalty app.
In the left menu, click Account Sidebar.
Make sure Enable Account Sidebar is toggled on at the top of the page.
Click the Blocks tab.
Find the Wishlist block in the list.
Toggle the Wishlist block on using the switch on the right.
Click the Wishlist block to expand its settings.
Configure the fields (see 'Configure the Wishlist Block' below), then save your changes.
ℹ️ Note
The Wishlist block is marked as "Logged in only". It only appears to customers who are signed into their account. Logged-out visitors will not see the Wishlist section in the sidebar.
Configure the Wishlist Block
Once the Wishlist block is expanded, you can configure the following settings:
Field / Setting | What It Does | Default |
Wishlist Title | The heading displayed above the wishlist in the sidebar. Customers see this when they open the Account Sidebar. | My Wishlist |
Empty State Text | The message shown when a customer has not saved any products yet. | No wishlisted items yet |
Enable Collection Sharing | Allows customers to share their wishlist as a link. When enabled, a share button appears in the customer's wishlist view. | Off |
✅ Tip
Keep the Wishlist Title short and friendly. "My Wishlist", "Saved Items", or "My Favourites" all work well. Avoid anything too generic like "Products". It should feel personal to the customer.
✅ Tip
Enabling Collection Sharing is a low-effort way to generate word-of-mouth. Customers sharing wishlists before birthdays, holidays, or gift-giving occasions can drive new visitors to your store with warm purchase intent.
Reorder the Wishlist Block
You can control where the Wishlist block appears within the Account Sidebar by dragging it to a new position.
In the Blocks tab of the Account Sidebar, look for the drag handle ( ⠿ ) on the left side of the Wishlist row.
Click and drag the block to your preferred position in the list.
Save your changes.
ℹ️ Note
Some blocks are marked as Required and cannot be moved or disabled. The Wishlist block is not required — it can be freely repositioned or turned off at any time.
Add the Heart Button to Your Theme
The heart button is the icon customers click on product pages and collection pages to save a product to their wishlist. Without this step, customers have no way to add products, and the Wishlist block in the sidebar will remain empty.
This step requires editing your Shopify theme templates. If you are not comfortable editing theme code, pass this section to your developer or contact the Mage Loyalty team for assistance.
Basic Snippet
Copy the snippet below and add it to your theme wherever you want the heart icon to appear:
<mage-wishlist-heart product-id="{{ product.id }}"></mage-wishlist-heart>
This renders a heart icon that toggles between outline (not saved) and filled (saved). A toast notification confirms the action.
Adding a text label
To show a text label alongside the heart icon (e.g. "Add to Wishlist"), add the data-show-text attribute:
<mage-wishlist-heart
product-id="{{ product.id }}"
data-show-text="true">
</mage-wishlist-heart>
The text automatically switches between "Add to Wishlist" and "In Wishlist" when toggled. You can customise the text with data-add-text and data-added-text:
<mage-wishlist-heart
product-id="{{ product.id }}"
data-show-text="true"
data-add-text="Save for Later"
data-added-text="Saved!">
</mage-wishlist-heart>
Available Attributes
Attribute | Required | Default | Description |
| Yes | — | The Shopify product ID. Use |
| No |
| Set to |
| No |
| Custom text shown when the product is not wishlisted. |
| No |
| Custom text shown when the product is wishlisted. |
| No |
| Set to |
Where to Place the Snippet
You can add the snippet to any template that has access to the product object. Common placements are:
Product page template: appears on individual product pages
Product card template: appears on collection pages and search results
Featured product sections: appears on the homepage or landing pages
Anywhere else in your theme that renders a product object
How to Add the Snippet
In your Shopify admin, go to Online Store > Themes.
Click Customise on your active theme, or click the three-dot menu ( ⋮ ) and select Edit code.
Open the template file where you want the heart to appear (e.g. product-card.liquid or main-product.liquid).
Paste the snippet in the position where you want the heart icon to render, typically near the product image or the Add to Cart button.
Save the file.
Visit a product page or collection page on your storefront to confirm the heart icon is rendering correctly.
Customising the Appearance
The heart button ships with minimal default styles so it inherits your theme's look. To customise, add CSS to your theme stylesheet. Examples:
CSS Class | Description |
| The heart button container |
| Applied when product is wishlisted |
| Applied when text label is enabled (icon + text layout) |
| The text label span ("Add to Wishlist" / "Added!") |
| The toast notification container |
| Applied when toast is showing |
/* Change heart color */
.mage-wishlist-heart__btn svg {
stroke: red;
}
.mage-wishlist-heart__btn--active svg {
stroke: red;
fill: red;
}
/* Style the text label */
.mage-wishlist-heart__text {
color: #333;
font-size: 12px;
}
/* Adjust icon + text spacing */
.mage-wishlist-heart__btn--with-text {
gap: 8px;
}
/* Style the toast notification */
.mage-wishlist-toast {
background: #333;
color: #fff;
border-radius: 8px;
}
⚠️ Common Mistake
Do not place the snippet in templates that do not have access to the product object. For example, a blog post template or the cart page. The snippet requires {{ product.id }} to be available or the heart button will not render.
What the Customer Experience Looks Like
Once everything is set up, here is what the customer journey looks like end to end:
Customer logs into their account on your storefront.
On any product page or collection page, they see a heart icon next to the product.
Clicking the heart saves the product to their wishlist.
They open the Account Sidebar and navigate to the Wishlist section to see all their saved items.
If Collection Sharing is enabled, they can copy a shareable link to send their wishlist to friends or family.
Clicking a saved product takes them directly to the product page to purchase.
ℹ️ Note
Wishlist items are saved to the customer's account — not their browser. This means their wishlist persists across devices. A customer who saves a product on mobile will see it on desktop too.
Common Mistakes to Avoid
⚠️ Common Mistake
Enabling the Wishlist block but forgetting to add the heart button snippet: The block will appear in the sidebar, but customers will have no way to add products to it. Both steps are required.
⚠️ Common Mistake
Placing the snippet in a template without access to product.id: The heart icon will not render. Always check that the template you are editing has the product object available before adding the snippet.
⚠️ Common Mistake
Expecting guest customers to use Wishlist: Wishlist requires customers to be logged in. If your store has low account registration rates, consider pairing Wishlist with the Signup Bonus earning rule to encourage account creation.
⚠️ Common Mistake
Leaving the Wishlist block enabled without the Account Sidebar enabled — The Wishlist block lives inside the Account Sidebar. If the sidebar itself is toggled off, the Wishlist will not be visible to customers regardless of its own toggle state.
Troubleshooting
The heart button is not appearing on product pages
Check that the snippet has been added to the correct template file in your theme.
Confirm the template has access to {{ product.id }}- if product.id is undefined, the button will not render.
Clear your browser cache and refresh the page.
If you are using a custom or heavily modified theme, reach out to the Mage Loyalty team through our live chat support for direct assistance for theme-specific guidance.
The Wishlist block is not showing in the Account Sidebar
Confirm the Wishlist toggle is on in the Blocks tab of the Account Sidebar settings.
Confirm the Enable Account Sidebar toggle at the top of the Account Sidebar page is also on.
Confirm the customer is logged in. The Wishlist block is only visible to logged-in customers.
A customer saved products but their wishlist appears empty
Confirm the customer is logged into the same account they used when they saved the products.
Check that the Wishlist block is still enabled in the Account Sidebar settings.
If the issue persists, reach out via the Mage Loyalty support chat for investigation.
The Collection Sharing link is not appearing
Confirm Enable Collection Sharing is toggled on in the Wishlist block settings.
The share option only appears when the customer has at least one saved item in their wishlist.
🗨️ Still need help or can’t find the answers you’re looking for? Reach out to the Mage Loyalty team through our live chat support.