Before you proceed with implementing a custom Wishlist button in your header menu using a code snippet, we suggest trying our default Header launch point. It provides a wide range of customization options for icon colors and integration with your theme.
To Enable the Default Header Icon:
Navigate to: Shopify Admin -> Apps -> Wishlist Plus -> Configurations.
Click on: The Features - Ways to Access & Share Wishlist section.
Navigate to: The “Ways to Access & Share Wishlist” settings and click on the Settings button on the "Wishlist page" card.
Under the "Launch form" section, ensure the "Header" radio button is selected.
To Verify the Default Header Counter is Enabled:
The Wishlist counter's visibility is tied to the chosen Launch Point.
For the Header Icon Launch Point: The counter is not self-serve enabled from the Wishlist Plus app configuration. Displaying the counter requires a manual setup or custom integration within your Shopify theme's code to ensure it matches your theme's styling. If the counter is not displaying, please contact Wishlist Plus Support for assistance with theme integration.
Note: The self-serve option to "Show Wishlist Count On Launch Point" is available when the Floating Button is selected as the Launch Point.
If this default Header Icon solution doesn't suit your preference, you can then proceed with implementing a custom header icon using the options below.
The Wishlist Plus app offers a couple of default options for your launch point – you could either add a floating button to a location of your choice on your site, or add a menu item to your site’s navigation menu. While those work well for certain themes, adding the entry point as a clickable button/icon on the header menu is a popular ask from some of our customers based on their site design and layout. The requests frequently ask for the “Wishlist” launch button to be placed between “Account” and “Cart/Bag” like the image below.
There are three options that will help you enable a link to the Wishlist page from your header menu.
Option 1: Heart icon as a launch point in the header menu
1A: Themes that use Font Awesome [Recommended]
It is quite easy to enable the heart icon to the site’s header menu if your Shopify site uses Font Awesome. The heart icon would load with the rest of the assets, without you having to include code for its style to match the rest of the website’s theme.
Follow the steps outlined below to enable a Font Awesome heart icon
Identify the nav bar liquid file that has the code for the account and cart. The liquid file varies based on the theme your site is built with. Here are some of the files that we have seen the code is placed in:
sections/header.liquid
snippets/header-bar.liquid
layout/theme.liquid
Insert the code below at the place where you’d want the Font Awesome heart icon to appear
<a href="#swym-wishlist" class="swym-wishlist">
<i aria-hidden="true" focusable="false" role="presentation" class="fa fa-heart"></i>
</a>
1B: Themes that do not use Font Awesome
1. Identify the nav bar liquid file, which has the code for the account and cart. As mentioned above, it varies, and here are some of the files that we have seen the code could be at:
sections/header.liquid
snippets/header-bar.liquid
layout/theme.liquid
2. If you want the heart icon to show up, insert the code below at the place where you’d want the icon to appear. Please ensure you add the below-mentioned default CSS styling to ensure the button's visibility for themes that do not use Font Awesome.
HTML
<a href="#swym-wishlist" class="swym-wishlist">
<i aria-hidden="true" focusable="false" role="presentation" class="icon icon-swym-wishlist"></i>
</a>
CSS
i.icon-swym-wishlist {
font-family: "swym-font";
font-style: normal;
vertical-align: middle;
}
i.icon-swym-wishlist + span {
vertical-align: middle;
}
i.icon-swym-wishlist:after {
content: "";
font-size: 130%;
line-height: 18px;
text-align: center;
display: inline;
} /*content rendered after swym is ready to avoid showing block/invalid chars*/
.swym-ready i.icon-swym-wishlist:after {
content: "\f004";
}
Option 2: Wishlist text link as a launch point in the header menu
Identify the nav bar liquid file which has the code for the account and cart. Based on the theme, it varies and here are some of the files that we have seen the code be at
sections/header.liquid
snippets/header-bar.liquid
layout/theme.liquid
If you want the text “Wishlist” to show up, just insert the piece of code as shown where you want “Wishlist” to appear. Remember to alter the CSS style of the element to suit your theme and the header menu style.
<a href="#swym-wishlist" class="swym-wishlist">Wishlist</a>
Note that some of these themes have a different mobile liquid file for navigation. Please check the mobile version as well and follow steps 1-3 if the mobile liquid file is different.
Related article: Enabling Menus and Links for your Shopify store from the Shopify Help center
Option 3: Upload an image and link the Wishlist page to it
This approach is handy when you want the header icon to load alongside other header menu items for a seamless visual experience.
By default, our heart icon loads only after the page has fully loaded. We’ve designed it this way to ensure that the Wishlist app never interferes with the page’s initial load performance, which is far more critical for your customers’ experience.
For customers who prefer the Wishlist button to appear faster, we recommend adding your own Wishlist button asset directly to the page and wiring it to our Wishlist functionality.
In short:
You can add an SVG icon directly to the theme file that renders the header menu (commonly header.liquid or header-icons.liquid in most themes).
Wrap the icon in an <a> tag and link it to #swym-wishlist.
Here’s a step-by-step guide to doing this:
1. Upload image of the icon on your site’s ‘Assets’ liquid file, and get the URL address of this image. Ensure the dimension is sized down to suit the other icons in the header
2. Identify the liquid file that houses the code for the header menu. As mentioned previously, we have seen the header menu code can be found in the liquid files below, depending on the theme your site is on:
sections/header.liquid
snippets/header-bar.liquid
layout/theme.liquid
3. Create the code to enable Wishlist launch point using the image on the header menu. Save and view the changes.
Retain the
<div..>class’ code and replace the<a href..>code with the code belowAlter the CSS style of the element, to suit your theme and the header menu style
Then, click ‘Save’ to save the changes made to the liquid file, and view your site in a fresh incognito session to check for the changes
<a href="#swym-wishlist" class="swym-wishlist"> <img src= "<<Replace With URL from Step 1>>"> </a>
Troubleshooting Tips
Verify the placement of the Liquid snippet and accompanying CSS classes if icons are not rendering.
Use precise padding, margins, and display styles in CSS to correct alignment issues.
Clear the cache or check in an incognito browser if recent changes are not visible. For additional guidelines, always test on multiple devices and browsers before publishing the changes.
While we’ve tested these steps extensively, there are some themes where some styling changes might be needed to seamlessly integrate the Wishlist Plus launch button. If you find that to be the case with your site, or if you have any further queries on adding the wishlist link to the header menu, or would like to make any changes, you can always reach out to us at [email protected]. If you're already on our messenger, simply say "talk to an agent," and Fin will connect you with a member of our team who can provide further assistance.