When you display Wishlist button, it is recommended to place a link pointing to the Wishlist page, somewhere on the store. There are 3 types of Wishlist links and you can choose any one of them.
- Smart Link
- Link in Navigation Menu
- Custom Link
For the rest of the tutorial, we shall assume that the URL of the link is default /a/wishlist. In case the URL is different on your store, please substitute accordingly.
Smart Link
- In the Shopify Admin, navigate to Apps => Smart Wishlist => Configure Appearance => Wishlist Link
- Select the box labeled Display Smart Link on all pages.
- Click Save.
- Visit the storefront and refresh the page twice. A link pointing to the Wishlist page shall automatically appear on the left of the page. You can also customise the link using various options provided.
- Note that there is no option for URL. This is because the URL is automatically inherited from Settings. This article explains how to change the URL
Link in Navigation Menu
1. In Shopify Admin, browse to Online Store => Navigation
2. In the list of menus displayed, click on the menu which is being displayed in the header of your store. For e.g. Main Menu
3. Under Menu Items, click on Add Menu Item
4. A popup shall appear. Under Link, enter the relative path for the wishlist page /a/wishlist. Under Name, enter whatever you want the link to be called. Click Add
5. Click Save .
Custom Link
Sometimes, there is not enough space in the navigation menu. In such cases you may prefer adding the link somewhere else. However, this requires editing the liquid files and manually adding HTML code to it. You should ask your Developer to follow the below steps. You can also contact our Support Team for this purpose.
Here’s a breakdown of how to add wishlist link to your Shopify store’s header.
Steps
- Access Theme Editor:
- From your Shopify admin, go to Online Store -> Themes.
- Click on Actions next to your active theme and select Edit Code.
- Locate the Header File:
- Look in the Sections folder for a file named header.liquid. This is the most likely location, but your theme might have a different structure.
- Find the Menu Code:
- Within the header.liquid file, locate the code that controls your header’s navigation menu. It will often have <nav>, <ul>, and <li> HTML tags.
- Create a New Link:
- Follow this code structure as an example:
<a href="/a/wishlist">Wishlist</a>
<a href="/a/wishlist"><i class="fa fa-heart-o"></i></a>
- Replace /a/wishlist with the actual URL of wishlist page, in case you have changed it
- Apply appropriate CSS to adjust the appearance
- Save Changes:
- Click “Save” in the theme editor.
Important Notes:
- Theme Variations: The specific structure of your Shopify theme will impact the exact location and code adjustments needed. Some themes may have more user-friendly settings within the theme customizer to add links without direct code editing.