A Link to the Wishlist Page is a crucial part of any Wishlist Setup. It helps the user in accessing the Wishlist Page. A Link can be added in following 3 different ways.
1. Smart Link: It is a sticky link which can be added automatically at a fixed location on the page.
2. Shopify Navigation Link: You can add a link using the Navigation Settings inside the Shopify Admin.
3. Manual Link: Merchants can add a link at appropriate location by editing the theme files.
1. Smart Link
By default the Smart Link shall point to /a/wishlist. If you want to change it, please follow these steps.
Various Options available in this section are explained below.
Display Sticky Link on all pages.
Select this option if you want to display the Smart Link on your store.
Link Text
The text of the hyperlink. You can even add icons to it. for e.g. to add a heart use <i class=”fa fa-heart-o”></i> prior to ‘My Wishlist’. Please don’t use any other HTML.
Text Color
The color of text on the link. You can use hex colors (#fff) or common color names like ‘white’,’yellow’ etc.
Background Color
The Link is displayed as a rectangular button. A background color makes it attractive. You can use hex colors (#0000ff) or common color names like ‘green’,’blue’ etc.
Link Orientation
The orientation of text in the link. Recommended is vertical.
Link Position
This option determines which edge of browser, the link is attached to. You can choose between left or right, whichever location is free.
Reference Base
If you want to displace the link vertically, you can do the same using these settings. You can choose ‘Top’ or ‘Bottom’ as the reference point for calculating the amount of displacement. Think of it as the center of coordinate.
Displacement Value
The amount of displacement calculated from the reference base above. It should always be a positive value.
Let’s explain this with examples:
Target Position: Left of screen, slightly above the middle.
Required Values:
Link Position: Left
Reference Base:bottom
Displacement Value:60%
Target Position: Right of screen, slightly above the bottom.
Required Values:
Link Position: Right
Reference Base:bottom
Displacement Value:10%
2. Item Counter
The Item Counter is used to display the total number of items present in the Wishlist. This is very similar to the Notifications Counter shown on most social networks like Facebook, Twitter, Google+ etc. This Badge Counter is automatically displayed next to any URL, which points to the Wishlist Page (/a/wishlist by default).
A live demo of both types of Wishlist Counters can be found here (Please add an item to the wishlist to see badge in action)
OPTIONS
Display Wishlist Item counter.
Unselect this option if you do not want to display the Item Counter. It is recommended to keep it selected.
Text Color
The text color of Item Counter. You can use hex colors (#fff) or common color names like ‘white’,’yellow’ etc.
Background Color
The background color of Item Counter. You can use hex colors (#fff) or common color names like ‘white’,’yellow’ etc.
Padding
A padding gives circular look the Counter. If it doesn’t look properly circular on your store, you can adjust the padding to give it proper shape. It can be specified in 3 different formats, as per the CSS standards. It has been explained below with examples.
Padding: 2px
Interpretation:
Padding top 2px
Padding right: 2px
Padding bottom: 2px
Padding left: 2px
Padding: 2px 6px
Interpretation:
Padding top 2px
Padding right: 6px
Padding bottom: 2px
Padding left: 6px
Padding: 2px 6px 1px 4px
Interpretation:
Padding top 2px
Padding right: 6px
Padding bottom: 1px
Padding left: 4px