> For the complete documentation index, see [llms.txt](https://wishlist.nativeappco.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wishlist.nativeappco.com/install-and-setup/theme-setup/add-code-snippet-to-collection-grid.md).

# Add code snippet to collection grid

Insert our code snippet to your product grid item to add our wishlist buttons to your collection grid.

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

{% hint style="info" %}
This requires some edits to your theme code. If you need help, please [Contact Us](mailto:undefined).
{% endhint %}

## Instructions

1. **Access Your Theme Files**:
   * In your Shopify admin, go to **Online Store** > **Themes**.
   * Find your published theme, and click **Actions** > **Edit Code**.
2. **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.
3. **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:

     ```liquid
     <wishlist-button class="position-absolute top-right" data-variant-id="{{ card_product.variants | map: "id" | join: "," }}"></wishlist-button>
     ```
4. **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.
5. **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!

<figure><img src="https://1134778209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMp2ekCAtVgFUnsQlGWfX%2Fuploads%2Fqk95YrS3LTPuCgSUiLRb%2Fimage.png?alt=media&amp;token=74fb98ba-1329-46f9-9c76-662b82f35b8c" alt=""><figcaption></figcaption></figure>