In this article we shall explain how to setup the Smart Wishlist app on your Shopify Store. The approx time required to complete this varies between 10 minutes to 30 minutes, depending on the store and on the proficiency of the developer.
Before you begin, please keep the following in mind:
If you face any issues during any step of wishlist setup, make sure you read Common Issues and Fixes. You can also contact us by raising a ticket. Our Team is always ready to configure the app on your store for FREE. Our experts are really hands-on in configuring it on most of the themes.
Terms used in this page
Merchant Console: The location of App’s Settings inside your Shopify Admin. It can be accessed at Apps => Smart Wishlist in your Shopify Admin.
My Wishlist page: This is the page where the Wishlist can be viewed. For 99% stores, this would be located at the relative path of /a/wishlist. For e.g. if your store is www.example.com, then the My Wishlist page can be found at www.example.com/a/wishlist
Let’s begin the setup:
Following steps are involved in Smart Wishlist setup on any Shopify Store. If you have completed any of these, you may skip to the next.
1. Add the Smart Wishlist snippet to product pages.
2. Customize the appearance of Wishlist button.
3. Customize the appearance of My Wishlist page.
4. Add a link pointing to My Wishlist page.
1. Product Pages
The first step involves adding Wishlist button on Product pages. This is accomplished by adding the following Smart Wishlist snippet to product pages. In most cases, it has to be added to product.liquid or product-form.liquid
<div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>
You can place it anywhere in the liquid file, however the recommended location to add this snippet is next to ‘Add to Cart’ button or below it.
If enough space is not available near the “Add to Cart” button, you may place it near product price.
1: In your Shopify Admin Panel, visit Online Store => Themes => Edit HTML/CSS
2: Under Templates look for product.liquid and click to open the file in editor.
3: Place the above code near the Add to Cart Button.
4: Click Save button on the top.
5: Open any product page in your Shopify store, you should find the heart shaped Wishlist button near Add to Cart button. If you click it, the items gets added to the Wishlist.
6: However, it would need adjustment in terms of color, size etc, which can be easily done from Merchant Console.
Tip: If you cannot locate Add to Cart button, search for the term ‘cart’ inside the file. Often this button is made up of <input> or <submit> elements.
If you cannot find Add to Cart Button inside templates/product.liquid or snippets/product-form.liquid, perhaps your theme developer has placed it elsewhere. In such cases, look for all referenced snippets in product.liquid and open the corresponding liquid file. If you still can not find it, please contact our Support Staff.
issues
1. Wishlist button (heart icon) not getting displayed
2. Tooltip overshadows the heart icon and you are unable to click it.
2. Customize appearance
Our Wishlist button has two components, icon and tooltip. The default icon is heart while the tooltip is a small element displayed on top of it when you hover over the icon. By default, the tooltip carries the texts “Add to Wishlist” when the product is added to Wishlist and “Remove from Wishlist” when the product is not added to the Wishlist.
Often the appearance of Wishlist button needs to be customized to integrate seamlessly into your store’s look and feel. This can be easily done using Merchant Console.
1: Open Apps => Smart Wishlist => Configure Appearance => Product Page.
2: Wishlist icon colors:
There are two color options, Wishlist Icon default colorand Wishlist Icon hover color.
Wishlist Icon default color is the default color of wishlist when the product has not been added to the wishlist and when the mouse has not been hovering over it. We recommend that you should probably leave it unaltered.
Wishlist icon hover coloris the color of wishlist button when you hover over it. It is also the color of wishlist icon when the product has been added to the wishlist. We recommend that you should change it the the background color of your Add to Cart button.
3: Tooltip: The tooltip also has two colors, border color and background color.
Tooltip background color: We recommend that you set it to the background color of your “Add to Cart” button.
Tooltip border color:We recommned that you keep it as the same as Tooltip background color.
You may customize the text inside Tooltips.
Add to Wishlist text: You can change it to “Add to Bag”, “Add to Basket”, “Add to Likes” or anything you want.
Remove from Wishlist: You can change it to “Remove from Bag”, “Remove from Basket”, “Remove from Likes”or anything you want.
By default, the texts contain a HTML hyperlink <a href=”/a/wishlist”>Wishlist</a>. This link enables your users to visit the My Wishlist page directly from here. It is recommended to keep it intact. In case you do not want to keep the hyperlink, just remove the <a> and </a> tags around the “Wishlist”.
3. My Wishlist Page
My Wishlist page is where the user can view the Wishlist. In this section we shall customize this page.
Few important points to note:
1. The contents of My Wishlist page are not stored on your shop’s theme files. It is served directly from our servers and it blends into your store using Shopify App Proxy.
2. By default, this page can be found at the relative path of /a/wishlist. To visit , browse to www.yourstore.com/a/wishlist. It works the same even if your store is hosted on myshopify domain for e.g. yourstore.myshopify.com/a/wishlist
3. This page borrows its header and footer from those of other ‘pages’ of your store. Only the main body content is served from our server.
1: Open Apps => Smart Wishlist => Configure Appearance => Wishlist Page
2: You can change the page title by modifying “Wishlist Title Text” under Page Typography.
3: You can change the text displayed when no items are present in the Wishlist by changing “Empty Wishlist notification Text”
4: Under the Button section, you can modify the text and background color of several buttons present on the wishlist page.
4. Link
The app provides a link to My Wishlist page in the tooltip. However, it is recommended to place a link to this page in the page header or menu.
The easiest way is to add a link in your navigation menu.
1. In Shopify Admin, browse to Online Store => Navigation
2. Click on the Edit Menu link for the menu displayed at the top of your store.
3. Under Menu Items, click on Add Menu Items
4, Use the following values without quotes, Name =”Wishlist”, Link =”Web Address”, Path =”/a/wishlist” and click Save Menu.
Sometimes, there is not enough space in the menu. In such cases you may prefer adding the link somewhere else in the page header.
5. Badge Item Counter
Badge Item counter displays the total number of items present in the wishlist. It is enabled by default on all stores and is always displayed adjacent to any link pointing to “/a/wishlist” page. Therefore to enable all you need is to place a link pointing to My Wishlist page ( /a/wishlist) anywhere on the page.
Suggested Reading: How to setup Wishlist Counter on your Shopify Store?
Collection pages
Wishlist button can also be added next to each product item on collection/catalog pages of your Shopify Store. This is an optional but recommended step. Read How to add Wishlist button to products on Collection Pages.
User Account INTEGRATION
This is another optional feature which allows your users to associate their wishlist to their User Accounts on your Store. This enables them to edit Wishlist from any device/browser. Read What is User Account Integration and how it works?
Common Issues
Following issue have been identified to appear while using app on certain themes. We have found fixes to them too. In case you face these issues, please contact us.
- Wishlist page scrolls horizontally
- Modals/Popup are not displayed on Wishlist page
- Product items are not displayed properly on Wishlist page
- The size of product images are too big or small on Wishlist page
- Product title overlaps the price on Wishlist page
Need more help?
Please visit our Knowledge Base to read more about fine-tuning your Wishlist install. It also lists common issues and their fixes and several other articles.