Setup steps for Smart Wishlist on Brooklyn Theme of Shopify

Brooklyn is a free theme for Shopify Stores tailor-made for modern apparel e-commerce stores. In this article we shall explain the steps involved in configuring the Smart Wishlist on stores using Brooklyn theme. 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 Smart Wishlist Snippet to Product Pages of Brooklyn theme of Shopify
Adding Smart Wishlist Snippet to Product Pages of Brooklyn theme of Shopify

Wishlist Button on Collection Pages

Open snippets/product-grid-item.liquid and add the following code before the closing </a>

<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>

Adding Smart Wishlist snippets to Collections pages of Brooklyn theme of Shopify
Adding Smart Wishlist snippets to Collections pages of Brooklyn 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/drawer-menu.liquid and add the following code snippet after the <li> containing customer_register_link.

On older versions of Brooklyn, where sections is not present, the code has to be added to layout/theme.liquid

<li class="mobile-nav__item mobile-nav__item--secondary"><a href="/a/wishlist" id="smartwishlist_mobile_link" title="My Wishlist">Wishlist</a></li>

Add Link to Drawer Menu in Brroklyn theme
Add Link to Drawer Menu in Brooklyn theme

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

Code for User Account Integration of Smart Wishlist on Brooklyn theme
Code for User Account Integration of Smart Wishlist on Brooklyn theme

 

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.