# Add code snippet to 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="/files/VzpGMxBI5Lx5A0BqL5FK" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wishlist.nativeappco.com/install-and-setup/theme-setup/add-code-snippet-to-collection-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.