Add code snippet to collection grid

You can easily add this Add to Wishlist button anywhere on your site, including on product grid items, in your cart or on your product page.

Our snippet can be used with any search/filter provider such as Algolia, SearchSpring or Boost.

Instructions

Access Your Theme Files:
- In your Shopify admin, go to Online Store > Themes.
- Find your published theme, and click Actions > Edit Code.
Locate Product Grid Code:
- In the Sections or Snippets folder, open the file responsible for your product grid or product cards. Common file names include product-grid-item.liquid, product-card.liquid, or similar.
- If you're not sure which file it is, you can check your theme's documentation or look for templates associated with collections or products.
Insert the Wishlist Button Code:
- Within the code for the product grid item, locate a position where you want the wishlist button to appear.
- Paste the following code snippet within each product card section where you'd like the button:
```
<wishlist-button class="position-absolute top-right" data-variant-id="{{ product.variants | map: "id" | join: "," }}"></wishlist-button>
```
Adjust Button Positioning (Optional):
- The wishlist-button class includes additional position attributes you can adjust to place the button inside the product card.
- Replace "top-right" with one of the following options based on your desired placement:
  - top-right: Top right corner (default).
  - top-left: Top left corner.
  - bottom-right: Bottom right corner.
  - bottom-left: Bottom left corner.
Save and Preview:
- Click Save after making changes.
- Preview your store to ensure the wishlist button appears correctly within each product card.

This should set up the wishlist functionality for your theme!