In this article, we shall try to explain the various options available on the Wishlist Button Settings of Smart Wishlist found in Shopify Admin.
1. Button Type:
There are 3 types of Buttons available for displaying wishlist button on individual Product Pages.
Type 1: Icon Only
Type 2: Icon + Label
Type 3: Icon + Label + Background
The Type 1 button is actually an Icon (Heart Outline by default). It changes to a different icon (Filled Heart by default) when the item gets added to the Wishlist.
The Type 2 Button displays an Icon followed by a Label. The icon is same as in Type 1 above. The Label can be a text (default is Add to Wishlist ), which can change to another text (default is Remove from Wishlist).
The Type 3 Button consists of an Icon, a label and a definite background color. It resembles the look and feel of the Add to Cart button.
NOTE: Depending on the Button Type you choose, the options available on the Settings Page vary.
NOTE: For items on all other pages viz. Collection, Search Results and Cart Pages, only Type 1 Wishlist button is available.
2. Button Icon
An Icon is integral part of Wishlist buttons. You need to specify two icons for a wishlist button.
1. Wishlist Icon (when the item is not added to wishlist)
2. Wishlist icon (when the item has been added to wishlist)
By default, Icon #1 is Heart Outline and Icon #2 is Filled Heart. However both icons can also be same. Using our GUI, You can choose between 15 icons for Icon #1 and Icon #2 each.
Custom Icons
You can also use any custom icons for Wishlist. This can be font awesome icons, glyphicons or any custom defined icon present in your theme. For this, please select the option Use a custom icon for Wishlist button. This will display 2 new input boxes:
1. Icon class name (when the item is not added to Wishlist)
This is the icon displayed when item has not been added to Wishlist. You need to specify the Icon Class here. To use fontawesome, enter the class name in the format fa fa-icon for e.g. fa fa-circle-o. If you use a theme defined icon, please enter the CSS class name of your custom icon.
2. Icon class name (when the item has been added to Wishlist)
This is the icon displayed when item has been added to Wishlist. Everything else remains the same as above.
NOTE: Selecting this option would override the icons specified using the GUI above. Therefore, if you want to revert to the 15 icons available with GUI, you need to unselect it.
3. Button Label
It is a text displayed next to the Icon in Wishlist button. Similar to the icon, it can be changed to indicate a different Wishlist State i.e whether item has been added to the Wishlist or not.
The Button label is part of Button Types 2 and 3. This is not applicable for collection and other pages.
There are 3 options:
1. Label Text (when item is not added to Wishlist)
By default this is Add to Wishlist
2. Label Text (when item has been added to Wishlist)
By default this is Remove from Wishlist
3. Font
By default it is inherit i.e. the font family specified for the
element. You can change it to any available font.
4. Button Color
This section is used to specify the color of Wishlist buttons. Depending on the Button type you choose, the available options in this section change.
Following options are available for all 3 button types. For Button Types 1 and 2, these options work for product and collection pages alike. For Button Type 3, these options are used to specify the color of button on collection pages.
1. Wishlist Button color (when item is not added to Wishlist)
The color of icon and label, when the item has not been added to the Wishlist.
2. Wishlist Button color (when item has been added to Wishlist)
The color of icon and label, when the item has been added to the Wishlist.
Following options are for Button Type 3 only and are displayed only when you select the Button Type 3. Again, this works only for Product pages. For collection and other pages, the above options shall always be used.
1. Text color
The color of icon and label for both Wishlist states alike. By default it is #ffffff (white).
2. Background color
The background color for both Wishlist states alike. By default it is #37478e (dark blue).
5. Button Dimensions
This section is used to specify the size of Wishlist buttons.
5.1. Product Pages:
Depending on the Button type you choose, the available options in this section may change.
Icon Font Size
The Size of icon of Wishlist button. This shall remain same irrespective of Wishlist State. For Type 1, we recommend that you keep it large (more than 20 px). For type 2 and 3, we recommend that you keep it around 15px.
Label Font Size
The Size of label of Wishlist button. This shall remain same irrespective of Wishlist State. We recommend that you keep it small (around 15px).
Button Width Desktop
This option is available only for Button Type 3. It specifies the width of Wishlist button for both wishlist states. We recommend that you keep it to 200px.
Button Height
This option is available only for Button Type 3. It specifies the height of Wishlist button for both wishlist states. We recommend that you keep it to 50px.
Button Border Radius
This option is available only for Button Type 3. It specifies the border radius of Wishlist button for both wishlist states. We recommend that you keep it to 4px. This gives a slight curvature to the edges of Wishlist button. If you make it 0px, the buttons would be fully rectangular.
Mobile Settings
1. Optimize Wishlist button on mobile devices.
Selecting this option shall activate the various mobile specific settings, given below.
2. Mobile Screen width (Enter the maximum value)
The maximum screen width, where mobile specific setting shall remain valid. Default is 500px. You need to check the width at which your theme switches from mobile mode to desktop mode and enter the same width here, for optimal performance.
3. Mobile Button Width
The width of wishlist button on mobile devices. By default it is 100%, which means it shall fill the entire available space.
5.2 Other pages
This setting applies to the all other pages including collection, search results and cart page. It would apply to sections like related products or recommended products.
Icon Font Size
The size of Wishlist icon for both wishlist states. We recommend to keep it 15px.
6. Tooltip Settings
A Tooltip displays a message when the cursor is positioned over Wishlist button. It is very similar to the hint displayed when hovering over options in App’s Settings.
1. Display tooltip on Wishlist button on individual product pages.
Select this option if you want to display the tooltip on product pages.
2. Display tooltip on Wishlist button on Collection/Search Results/Cart pages.
Select this option if you want to display the tooltip on Collection/Search Results/Cart pages.
3. Tooltip Position
The suggested position of tooltip on Wishlist button. This option is used when there is sufficient space to display tooltip at that position. Otherwise, the app displays tooltip on the best-fit basis.
4. Tooltip Text (when item is not added to Wishlist)
The text of tooltip when item has not been added to the Wishlist. You may add a HTML hyperlink to it.
5. Tooltip Text (when item has been added to Wishlist)
The text of tooltip when item is added to the Wishlist. You may add a HTML hyperlink to it.
6. Background color (recommended to keep it dark in color)
The background color of the Tooltip.
7. Border size
The width of the borderline circumscribing around the tooltip.
8. Border color
The text color inside Tooltip
9. Font
The Font Family of text inside tooltip.
10. Font Size
The size of text inside tooltip.
11. Tooltip Offset X
If you want to move the tooltip to the right of default position, use a positive offset. If you want to move it left, please use a negative offset.
12. Tooltip Offset Y
If you want to move the tooltip above the default position, use a positive offset (+4px). If you want to move it below, please use a negative offset (-4px)
7. Smart Setup Settings
Use Smart Setup to display Wishlist button on individual product pages.
With Smart Setup you don’t need to place any HTML code in the theme’s liquid files. The Wishlist buttons are displayed automatically on individual product pages at appropriate location smartly determined by the App.
In case you have already placed the App’s HTML Code Snippet, Smart Setup shall use that code instead to display the Wislist button.
NOTE: Smart Setup Works only for single Product Pages. It doesn’t work for category,collection, search results or cart pages.