Categories
< All Topics
Print

Adding the Wishlist icon to your Header Menu

The Wishlist Hero 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.

If you’d like to do this on your store, you can follow the steps outlined in this article.

There are two 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

It is quite easy to enable the heart icon to the site’s header menu. 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

  1. 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
  2. Insert the code below at the place where you’d want the font-awesome heart icon to appear
{% render ‘wishlisthero-header-icon.liquid’ %}

Option 2: Wishlist text link as a launch point in the header menu

  1. go to the file snippets/wishlisthero-header-icon.liquid  and remove the line with the <i> anchor and replace it with the word you want.
  2. 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
  3. Insert the code below at the place where you’d want the font-awesome heart icon to appear

{% render ‘wishlisthero-header-icon.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 in the file snippets/wishlisthero-styles.liquid, 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.

While we’ve tested these steps extensive, there are some themes where some styling changes might be needed to seamlessly integrate the Wishlist Hero 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 contact us and we’ll be happy to help.

 

Previous Add to Wishlist Button Placement
Next Customize the Location of the Floating Wishlist Button