Navigate to your theme and click Actions > Edit code
Find the file that renders your product tile
Usually, a file named collections-template.liquid contains this file as an include to render products on Collections pages.
It can be identified as it contains the code
{% include 'product-card-grid'%}or sometimes as
{% render 'product-card-grid'%}
The above product-card-grid file is an example of a file that renders the product tiles on your Collections based on your theme/dynamic section. The file name may vary across different themes.
Wishlist Button Code
Once you’ve identified the name of the file that renders the product tiles on your Collections pages, we need to add our wishlist button code.
<button
type="button"
aria-label="Add to Wishlist"
class="swym-button swym-add-to-wishlist-view-product product_{{ product.id }}"
data-with-epi="true"
data-swaction="addToWishlist"
data-product-id="{{ product.id }}"
data-variant-id="{{ product.selected_or_first_available_variant.id | default: product.variants[0].id }}"
data-product-url="{{ shop.url | append: product.url }}">
</button>
We recommend that you add the code below the price in your product tile.
You can find the optimal location to insert the wishlist button code by inspecting the element of any product on the Collections page followed by searching for its tag.
Note: Searching for product- inside the collections-template.liquid file usually yields the file name that contains your collections product tile code on the majority of themes.
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
Collection pages that have infinite loading / dynamic scrolling
You can follow our troubleshooting guide to find the code required to initialize the Wishlist button based on a custom event. Make sure to uncomment the second method given in listener snippet.
Frequently Asked Questions
I have multiple variants for a product. Will the wishlist collections button on collections pages work with variants?
Yes. Wishlist Plus works at a variant level and will give your customers the option to choose the exact variant they want added to their wishlist.
The button is visible on the collections tiles but am not able to click it.
This usually happens when our wishlist button’s z-index value is lower than the neighboring elements. To fix this, simply inspect the button on your browser’s dev console, click the + button in the CSS tab and add z-index: n; where n is a number higher than the z-index of the neighboring elements. It’s a good idea to start with 1 and move upwards till the button becomes clickable. Once you have a suitable z-index value, simply copy the CSS code from the dev console and add it to your store’s theme.CSS or theme.SCSS file.
Can I customize the position and appearance of the wishlist button?
Yes. You can do so by inspecting our button elements on your browser’s dev console and making the required CSS changes. Once that is done, simply copy and paste the CSS code into your store’s theme.CSS or theme.SCSS file.
Why does the wishlist collections button load after the collections tiles have loaded?
Wishlist Plus is designed to load after the critical components of your store have loaded, ensuring that it doesn’t impact the performance / speed of your store.
I’m unable to find the files that render my store’s collections pages.
Our Support team is more than happy to help implement our wishlist button on your store’s collections pages. Please reach out to us at [email protected] and one of us will surely help you. However, please also note that support for implementation is available on our paid plans only, as the implementation takes a considerable amount of our dev time.
I have implemented the collections button and am receiving an error message when trying to add a product.
Our Wishlist EPI button uses certain liquid product attributes such as {{product.id}}, which translate to Product ID, Variant ID and Variant URL to process data.
However, the names of these identifiers can vary across themes. For example, a few themes will have {{card_product.id}} instead.
Notice that the keyword product is replaced with card_product. Kindly check your theme files to locate these tags and replace them accordingly in the EPI button codes. If you’re unable to find the correct attribute tags, please reach out to us at [email protected] and we’ll surely assist you.