Steps to configure Smart Wishlist on Supply Theme of Shopify

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>

Adding Code to Product pages on Supply theme of Shopify
Adding Code to Product pages on Supply theme of Shopify

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>

Adding Code to Collection pages on Supply theme of Shopify
Adding Code to Collection pages on Supply theme of Shopify

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>

Adding a link to Wishlist page in Supply theme of Shopify
Adding a link to Wishlist page in Supply theme of Shopify

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>

Adding a link to Wishlist page in mobile menu of Supply theme of Shopify
Adding a link to Wishlist page in mobile menu of Supply theme of Shopify

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 %}" />

Adding a link for User Account Integration in Supply theme of Shopify
Adding a link for User Account Integration in Supply theme of Shopify

Once done, go to Apps => Smart Wishlist => User Accounts and check the box titled “Enable User Account Integration” and click Save.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.