How to add Wishlist buttons to Search Results Page?

Smart Wishlist supports Wishlist buttons on Search Results pages. Before you begin, enable the wishlist button on collection pages. If the wishlist buttons are not displayed on search result pages, then only you need proceed with following steps.

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

2. Open the template which is used to display the Search Results. It could be either of the following files depending on the theme.

  • snippets/search-result-grid.liquid
  • templates/search.liquid

3. Locate the code for displaying price and add the following code at the location you want the Wishlist button to appear.

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

Once added, the Wishlist button shall start appearing on Search Results page also. Notice how the above code is slightly different from that for collection pages. The product has been replaced by item.

If you want to display the wishlist button on the top of product image, jump to the section titled Display buttons over product image on Setup guide for collection pages.

Leave a Reply

Your email address will not be published.