# Wishlist Icons

1. Most 3rd party wishlist apps use standard HTML tags and classes to activate the Wishlist button.
2. This HTML tag can be added to the Frenzy Product Card to activate the Wishlist button.
3. In case you find any issues during the integration, feel free to reach out to Frenzy Support.

### Growave Wishlist Icons Example

Add the following code to the Frenzy Product Card.

```
<div class='ssw-faveiticon sswfaveicon[[id]]'><i data-product-id='[[id]]' data-count='0' class='ssw-icon-heart-o ssw-fave-icon ssw-wishlist-element ssw-not-synch' title='Add to Wishlist' data-params='{product_id: [[id]], event:"fave_button", page:"product_profile"}'></i><span class='faves-count'>...</span></div>
```

### Wishlist Plus Example

Add the following code to the Frenzy Product Card.

```
<div data-status="0" class="frenzy_wishlist_icon"></div>
```

Add the following to the `window.FrenzyProductGridChangeCallBack` function.

```
const varint_id = data.product_id_variant.split("_");
html.querySelector('.frenzy_product_item').classList.add("FrenzyProductId_"+data.product_id);
html.querySelector('.frenzy_product_price_meta').setAttribute("data-variantid",varint_id[1]);

var product_id_variants = data.product_id_variant.split('_');
var product_id = data.product_id;
var product_id_variant = product_id_variants[1];
const product_handle = data.org_prod_url.split("?");
const product_url = window.location.origin + '/products/'+product_handle[0];

var wishlist_btn = '<button data-with-epi="true" class="tw-z-10 app_btn_wsh wishlist-btn swym-loaded swym-button-collection swym-button swym-add-to-wishlist-view-product product_'+product_id+'" data-swaction="addToWishlist" data-product-id="'+product_id+'" data-variant-id="'+product_id_variant+'" data-product-url="'+product_url+'"></button>';
  setTimeout(function(){
  if(document.querySelectorAll('.frenzy_product_item[data-id="'+data.sku+'"]').length > 0){
    document.querySelectorAll('.frenzy_product_item[data-id="'+data.sku+'"]').forEach(function(this_click){
      if(this_click.querySelector('.frenzy_wishlist_icon').getAttribute('data-status') == "0"){
       this_click.querySelector('.frenzy_wishlist_icon').innerHTML = wishlist_btn;
      this_click.querySelector('.frenzy_wishlist_icon').setAttribute('data-status',"1"); 
      }
    })
  }
},800);
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://docs.frenzy.ai/shopify-app/configuring-product-card/wishlist-icons.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.