NOTE: This article is outdated. Please visit our latest Help Documentation for more comprehensive knowledge base and support.
Setting up Smart Wishlist app is a very easy process and anyone with no coding experience can easily do this. However, if you still have any issues, we are ready to help or set it up for you without any extra cost. (Please contact us at support@webmarked.net for any assistance in setup)
Free Setup by our Support Team
We offer free setup to all store owners. You needn't do anything. Our Engineers would automatically visit your store and setup/configure the app, within 24 hours of app install. It usually takes much lesser time. We shall inform you by email when the setup is complete.
Self-Setup by Merchants
If you are willing to setup yourself, we have made a very detailed documentation for the same. We also offer addon support if you needed.
Minimal Setup: A minimal setup requires merely adding the following one-line code to the product.liquid in your active Shopify theme. For most users, this would take less than 60 seconds.
<div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>
Visit any product page and you fill find the Wishlist (♥) icon present there. Clicking the Wishlist icon will add that product item to the wishlist and a second click would remove it from the wishlist. You can later customize the appearance of Wishlist icon from Merchant Console.
Complete Setup: A complete setup of Smart Wishlist requires following tasks to be accomplished:
1. Add the given one-line code to the product.liquid and collection.liquid files in your theme.
2. Add a link to My Wishlist page in Navigation Menu.
3. Enable Wishlist Counter Badge from Merchant Console.
4. Adjust the color, font, size of elements from Merchant Console.
We shall explain each step in detail:
1. Adding Wishlist icon to Product Pages
Once you have installed the app on your store, all you need is to add the following code to the product.liquid file of your active theme in Shopify.
<div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>
The recommended location to add the above code is next to the 'Add to Cart' button on the individual product page.
Step by Step Guide
1.1 In your Shopify Admin Panel, visit Online Store => Themes => Edit HTML/CSS
1.2 Under Templates look for product.liquid and open it by clicking.
1.3 If you want the Wishlist icon to display next to Add to Cart button, search for the term 'Cart' inside it and paste the above code. You can however place it anywhere.
If you don't find the term 'Cart' inside product.liquid, perhaps your theme developer has placed it in some other file. Look for any other file prefixed with 'product' under Templates or Snippets and search for the word 'cart' in it. You would definitely find it in one of these.
1.4 Click Save button on the top.
1.5 Open any product page in your Shopify store, you would find the Wishlist icon with a tooltip titled 'Add to Wishlist'.
1.6 Once you add the item to Wishlist, click on the My Wishlist icon
After this, the Wishlist (heart) icon should start appearing on individual product pages. However, it would need adjustment in terms of color, size etc, which can be easily done from Merchant Console later.
While testing the wishlist on your store, please ensure that you hide/close the Shopify Admin Bar. Sometimes, Shopify admin bar pushes the tooltip below, which creates confusion.
For some themes, it happens that the Heart icon (♥) doesn't appear despite placing the above code. This happens due to overriding of app's CSS by theme's CSS or overlapping by existing elements. In such cases, you can try placing the above code snippets at a different location. If things do not materialize, please contact us at support@webmarked.net or create a ticket here. We would fix your issue within 2-3 hours.
2. Adding Wishlist icon to Collection/Catalog Pages
This is an optional step
Smart Wishlist also supports placing Wishlist (Heart) icon on Collection pages. To enable this, all you need is to place the following code at appropriate location in your theme's collection.liquid (or any other file referenced from it).
<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>
The recommended location to place the above code is next to where price is displayed, however you can choose any location.
Step by Step Guide
1.1 In your Shopify Admin Panel, visit Online Store => Themes => Edit HTML/CSS
1.2 Under Templates look for collection.liquid and open it by clicking.
1.3 If you want the Wishlist icon to display next to price, search for the term 'price' inside it and paste the above code. You can however place it anywhere.
If you don't find the term 'price' inside collection.liquid, perhaps your theme developer has placed it in some other file. Look for any other file prefixed with 'collection' under Templates or Snippets and search for the word 'price' in it. You would definitely find it in one of these.
1.4 Click Save button on the top.
1.5 Open any collection/catalog page in your Shopify store, you would find the Wishlist icon with a tooltip titled 'Add to Wishlist' under each product item.
For some themes, it happens that the Heart icon (♥) doesn't appear despite placing the above codes. This happens due to overriding of app's CSS by theme's CSS or overlapping by existing elements. In such cases, you can try placing the above code snippets at a different location. If things do not materialize, please contact us at support@webmarked.net or create a ticket here. We would fix your issue within 2-3 hours.
While testing the wishlist on your store, please ensure that you hide/close the Shopify Admin Bar. Sometimes, Shopify admin bar pushes the tooltip below, which creates confusion.
Further Reading
How to setup Wishlist Counter on your Shopify Store?
How to add a Link to My Wishlist Page ?
How to add extra CSS to be displayed on your Store?
