š Before You Start
Wishlist requires customer accounts to be enabled on your Shopify store. By default, customers must be logged in to save and view wishlist items. To let logged-out shoppers save items too, turn on Allow guest wishlists under Wishlist, then Settings.
How to Add the Wishlist Block
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 Pages tab, then Home.
Click Add and select Wishlist.
Toggle the Wishlist block on.
Click the Wishlist block to expand its settings.
Configure the fields (see 'Configure the Wishlist Block' below), then save your changes.
ā¹ļø Note
Unless guest wishlists are allowed, the Wishlist block is marked "Logged in only". It then only appears to customers who are signed into their account, and logged-out visitors do 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 Wishlist Hearts | Shows a heart on the product cards in every sidebar product block, so customers can save a product without leaving the sidebar. | Off |
Show Circle Behind Heart | Adds a white circle behind the heart. Shown once Enable Wishlist Hearts is on. | Off |
Active colour | The colour of the heart on a product the customer has saved. | Black |
Inactive colour | The colour of the heart on a product the customer has not saved. | Dark grey |
ā 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
Customers can share a wishlist collection as a link, and there is nothing to turn on. 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.
Under Pages, then Home, in 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
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.
They can copy a shareable link to send a wishlist collection to friends or family.
Clicking a saved product takes them directly to the product page to purchase.
ā¹ļø Note
Unless guest wishlists are allowed, the Wishlist block is only visible to logged-in customers. Customers who are not signed in will not see the block in the sidebar.
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 guests to use the Wishlist without turning it on: guest wishlists are off by default. Turn on Allow guest wishlists under Wishlist, then Settings, if you want logged-out shoppers to save items.
ā ļø 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 under Pages, then Home, in the Account Sidebar.
Confirm the Enable Account Sidebar toggle at the top of the Account Sidebar page is also on.
Confirm the customer is logged in. Unless guest wishlists are allowed, 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.
Related Articles
šØļø 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.