Supply is a free theme for Shopify Stores which can easily showcase and filter large inventories. In this article we shall explain the steps involved in configuring the Smart Wishlist on stores using Supply theme. This applies to both Blue and Light versions of Supply.
You must be logged in to Shopify Admin of your store. Developers are advised to go through App Setup Guide in case of any confusion.
Wishlist Button on Product Pages
Open sections/product-template.liquid and add the following code after closing </button> tag. If sections/product-template.liquid is not present, add the code to templates/product.liquid
<div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>
Wishlist Button on Collection Pages
Open snippets/product-grid-item.liquid and add the following code inside <div> with class product-item–price.
<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>
Link to Wishlist page
The best and recommended way is to add a link pointing to My Wishlist page in the navigation menu. Read Steps to add a link to My Wishlist page in the Navigation 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. In such cases, please follow the steps below.
Open sections/header.liquid and add the following code snippet after the <span> containing customer_register_link.
On older versions of supply, where sections is not present, the code has to be added to layout/theme.liquid
<span class="site-header--meta-links medium-down--hide"><a href="/a/wishlist" id="smartwishlist_desktop_link">Wishlist</a></span>
The above link is not visible on mobile devices. Therefore, we shall add a link also to the mobile menu.
Open snippets/site-nav.liquid and add the following code snippet just before the closing </ul> tag.
<li class="customer-navlink large--hide"><a href="/a/wishlist" id="smartwishlist_mobile_link" title="My Wishlist">My Wishlist</a></li>
User Account Integration
Open layout/theme.liquid and add the following code snippet after opening <body> tag or before closing </body> tag.
<input type="hidden" name="sw_customer_id" id="sw_customer_id" value="{% if customer %}{{ customer.id}}{% else %}0{% endif %}" />
Once done, go to Apps => Smart Wishlist => User Accounts and check the box titled “Enable User Account Integration” and click Save.