Add Wishl to your Collection Pages

This document is included as a courtesy to aide developers in customizations related to Wishl. You should be familiar with HTML and liquid to implement the changes listed below.

Adding Wishl's adder icons to your collection pages and other product grids is possible. Just follow the steps below.

Wishlist buttons/links on the collections page will only add (or reflect the presence of) each product's first variant to the wishlist. These buttons will have the same display settings as determined by your preferences.

To confirm you have the latest version of the wishl-wishlist.liquid snippet installed in your theme, click Install Snippet from the app's theme installation page.
Using the theme editor, find and open the relevant collections template (often templates/collection.liquid).
In this file, find the product loop. For most themes, you'll find an {% include 'snippet-name' %} tag that calls a snippet to render a product within a grid. In your theme, this snippet may be named 'product-grid', 'product-listing', 'product-loop', or possibly something else altogether. We'll call this the "product loop" for the purposes of these instructions.
Open the "product loop" snippet, and insert {% include 'wishl-wishlist', wishl_adder: 'atomic' %} where you would like the icon to show. To display the icon and text, insert {% include 'wishl-wishlist', wishl_adder: 'atomic_with_text' %}
Save the product loop snippet and confirm your changes by previewing a collection page in your shop.

For some shop themes, you'll also start seeing the Wishl adder button in your home page product grids and related products right away after the one change above. Otherwise, find the appropriate snippet (e.g. related-products.liquid) and add the code in step 4.