Adding the Wishlist Launch Point to your Shopify Site’s Header Menu

Created by Subham Choudhury, Modified on Mon, 24 Jun at 1:43 PM by Subham Choudhury

TABLE OF CONTENTS

Option 1: Heart icon as a launch point in the header menu
- Option 1A: Themes that use font-awesome
- Option 1B: Themes that do not use font-awesome [Recommended]
If you’d like to do this in your store, you can take a look at this video below:
Option 2: Wishlist text link as a launch point in the header menu
Option 3: Upload an image/Use a custom SVG icon and link the Wishlist page to it
Frequently Asked Questions

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 1A: Themes that use font-awesome

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 with 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>

Option 1B: Themes that do not use font-awesome [Recommended]

1. Identify the nav bar liquid file with the account and cart code. 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. We have included some default CSS styling, please feel free to edit/remove the styles as per the rest of the header menu buttons

HTML

<a href="#swym-wishlist" class="swym-wishlist">
<i aria-hidden="true" focusable="false" role="presentation" class="icon icon-swym-wishlist"></i>
</a>

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: '\f08a';
}

If you’d like to do this in your store, you can take a look at this video below:

Identify the nav bar liquid file with the account and cart code. Based on the theme, it varies, and here are some of the files that we have seen the code 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.

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 Shopify Help Center.

Option 3: Upload an image/Use a custom SVG icon and link the Wishlist page to it

From the Shopify admin console:

1. Upload an 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 the 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 shared below

For using a custom SVG

<a href="#swym-wishlist" class="swym-wishlist">
  <svg>........</svg>
</a>

For using an image as the icon

<a href="#swym-wishlist" class="swym-wishlist">
  <img src=  "<<Replace With URL from Step 1>>">
</a>

Alter 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

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, please email us and we’ll be happy to help.

Frequently Asked Questions

How do we find the liquid file to place our header icon code?

We use a Chrome extension called Shopify Theme Search (Fast) to search within Liquid files. However, there are several other options available that you can consider. Please note that this tool is not an official recommendation; it is simply one we have found to be easy and convenient.

For Option 1B, the heart is an unfilled icon, how can we use a filled heart icon for the store?

For the unfilled heart icon, the current code has a CSS property called "content" with a value '\f08a'. Kindly change it to '\f004' to use the filled heart icon.

How can we show the number of items in a user's wishlist or the wishlist header counter?

We have a step-by-step guide with the code snippets that can help you enable the wishlist header counter for your store.

Where can we find the SVG icon HTML code?

You can find free SVG icons on multiple open-source websites. These resources offer a wide range of icons that you can use for your store. Here are a couple of examples of SVG code for your reference:

<a href="#swym-wishlist" class="swym-wishlist">
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="28" height="28">
    <path d="M11.926 18.874c4.609-4.015 8.176-7.694 8.176-10.661 0-2.151-1.577-3.713-3.75-3.713-1.898 0-3.477 1.393-4.426 2.989C10.977 5.893 9.398 4.5 7.5 4.5c-2.173 0-3.75 1.561-3.75 3.713 0 2.967 3.567 6.646 8.176 10.661z" stroke="black" stroke-width="1.2" stroke-miterlimit="10"></path> 
  </svg>
</a>

<a href="#swym-wishlist" class="swym-wishlist">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="22" height="22" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1; "transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
          <path d="M 64.44 12.016 c 5.225 0 10.136 2.035 13.831 5.729 c 7.626 7.626 7.626 20.035 0 27.662 l -19.44 19.44 L 45 78.677 L 31.169 64.846 l -19.44 -19.44 c -7.626 -7.626 -7.626 -20.035 0 -27.662 c 3.694 -3.694 8.606 -5.729 13.831 -5.729 c 5.225 0 10.136 2.035 13.831 5.729 l 1.367 1.367 L 45 23.354 l 4.242 -4.242 l 1.367 -1.367 C 54.304 14.05 59.216 12.016 64.44 12.016 M 64.44 6.016 c -6.541 0 -13.083 2.495 -18.073 7.486 L 45 14.869 l 0 0 l 0 0 l -1.367 -1.367 C 38.642 8.511 32.101 6.016 25.56 6.016 S 12.477 8.511 7.486 13.502 c -9.982 9.982 -9.982 26.165 0 36.147 l 19.44 19.44 c 0 0 0 0 0.001 0 L 45 87.163 l 18.073 -18.073 c 0 0 0 0 0 0 l 19.44 -19.44 c 9.982 -9.982 9.982 -26.165 0 -36.147 C 77.523 8.511 70.982 6.016 64.44 6.016 L 64.44 6.016 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" /></g>
</svg> 
</a>