Add Wishlist Button to Your Collections Page

Wishlist Hero is enabled by default on your product pages, but it’s generally a good idea to add the button to your Collections pages as well – especially for shoppers on a mobile device, that’s a really low-friction way for them to bookmark their favorite products. Here is how you can enable a Heart icon on the product pictures on your Collection pages:

1. Find the right file from which your product card gets displayed in the collection. Depending on your theme, it will be one of these files

snippets/product-listing.liquid
snippets/products-grid.liquid
snippets/product-grid-item.liquid
snippets/product-card.liquid
snippets/product-listing-item.liquid
snippets/product-loop.liquid
snippets/product-item.liquid
snippets/product-thumbnail.liquid
snippets/product-card-grid.liquid
snippets/product-block.liquid
snippets/product-listing-slider.liquid
snippets/product-thumbnail.liquid
snippets/product-item.liquid
snippets/product-loop-grid.liquid
snippets/snippet-product-item.liquid

Note: If you don’t find any of these files, email apps@revampco.com and we will help you find the right file for your theme.

2. Copy-paste the following snippet in the place where you want to show the button in your code

{% render ‘wishlisthero-collection-product’ with product: product %}

Suggestion : We recommend appending this section before the link of the image.