How to add Wishlist Button on Collection Pages?

Collection pages are very important for any E-Commerce Store as they display a galaxy of products together thereby arousing the interest of the customers. Our records state that around 30% of Wishlist activities of any Store originate from collection pages.

In this article, we shall explain how to add to Wishlist button on collection pages. Unlike product pages, it is not easy to locate the source for collection pages. Our experience says that it varies widely from theme to theme. Locating it involves a bit of trial & error, where we look for the keyword “price” in any of the following files present under snippets section. Often your theme will have 1-2 of the following files:

  • product-item.liquid
  • product-thumbnail.liquid
  •  product-grid-item.liquid
  • product-block.liquid
  • product-images.liquid
  • product-loop.liquid
  • product-swatch.liquid

1: In your Shopify Admin Panel, visit Online Store => Themes => Edit HTML/CSS

2: Under Snippets look for any of the above files and if present and click to open the file in editor. Search for the term “price” and if found, add the following code snippet near the closing </p> or </span> tags

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

3. Click the Save button at the top. 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.

Most themes display each product as one item on Collection pages. As a special case, if your theme displays a product as multiple times on a given collection page, the above code won’t work. Please read this article to deal with such cases.

Customizations

Most of the customizations of Wishlist button is derived from the wishlist button on product pages. This has been done to ensure uniformity across wishlist buttons on your store

The only additional customization available for collection pages is the size of wishlist button.

1: Open Apps => Smart Wishlist =>Configure Appearance => Collection Page.

2: Wishlist Icon Size: Use this to set the size of wishlist icon on collection pages, if you want it to be different from those on product pages. Valid values must be accompanied by units as in CSS. For e.g. 10px, 5%, 0.2 em etc.

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 obstructs the dtisplay and creates confusion. Your customers are never affected by it

 

 

Common Issues

Following issue have been identified to appear while using the app on certain themes. We have found fixes to them too. In case you face these issues, please contact us.

1. Wishlist Icon not visible

2. Adding one item to Wishlist removes another from it on Collection Pages

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.