# Wishlist apps

✨This article gives the list of compatible wishlist apps that works with our filter app – along with the guidelines to set up them.

### 🔹**1.** Swym Wishlist Plus

*App URL:* [*https://apps.shopify.com/swym-relay*](https://apps.shopify.com/swym-relay)

**Steps**

1. From your Shopify admin panel, go to **Theme** folder.
2. In the **Action** dropdown, click **Edit code**.
3. Go to the **filter.product.liquid** file.
4. Add the below code snippet to the position you want the Wishlist to appear.

   ```html
   <button class="swym-button swym-add-to-wishlist-view-product product_{{product.id}}" data-swaction="addToWishlist" data-with-epi="true" data-product-id="{{product.id | json}}" data-product-url="{{product.handle}}" data-variant-id="{{product.variants[0].id | json}}"></button>
   ```
5. Click **Save** to finish.

### 🔹**2. Smart Wishlist**

*App URL:* [*https://apps.shopify.com/smart-wishlist*](https://apps.shopify.com/smart-wishlist)

**Steps**

1. From your Shopify admin panel, go to **Theme** folder.
2. In the **Action** dropdown, click **Edit code**.
3. Go to the **filter.product.liquid** file.
4. Add the below code snippet to the position you want the Wishlist to appear.

   ```html
   <span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants[0].id }}"></span>
   ```
5. Click **Save** to finish.

### 🔹**3.** Swish (formerly Wishlist King)

*App URL: <https://apps.shopify.com/wishlist-king>*

**Steps**

1. From your Shopify admin panel, go to **Theme** folder.
2. In the **Action** dropdown, click **Edit code**.
3. Go to the **filter.product.liquid** file.
4. Add the below code snippet to the position you want the Wishlist to appear.

   ```liquid
   <!-- include 'wishlist-button-collection' with '{{ product.id }}' -->
   ```
5. Click **Save** to finish.

### 🔹**4.** Mst: Wishlist

*App URL: <https://apps.shopify.com/i-wishlist>*

**Steps**

1. From your Shopify admin panel, go to **Theme** folder.
2. In the **Action** dropdown, click **Edit code**.
3. Go to the **filter.product.liquid** file.
4. Add the below code snippet to the position you want the Wishlist to appear.

   ```html
   <a class="iWishAddColl iwishcheck" data-variant="{{ product.variants[0].id }}"></" data-product="{{product.id}}" data-ptitle="{{ product.title | escape}}">Add to Wishlist</a>
   ```
5. Click **Save** to finish.

### 🔹**5.** Listr: Wishlist + Reminder

*App URL: <https://apps.shopify.com/wishlist-1>*

**Steps**

1. From your Shopify admin panel, go to **Theme** folder.
2. In the **Action** dropdown, click **Edit code**.
3. Go to the **filter.product.liquid** file.
4. Add the below code snippet to the position you want the Wishlist to appear.

   <pre class="language-liquid" data-overflow="wrap"><code class="lang-liquid">{% assign link_text = {% endraw %}{{ shop.metafields.wishlist.sw_link_text | json}}{% raw %} %}
   {% if link_text == ""%}{% assign link_text = "Add to Wishlist" %}{% endif %}
   {% assign display_option = {% endraw %}{{ shop.metafields.wishlist.display_option | json}}{% raw %} %}
   {% assign cusId  = {% endraw %}{% if customer %}{{ customer.id | json}}{% else %}false{% endif %}{% raw %} %}
   {% if display_option == 'hearticon' %}
   &#x3C;div class="div-wishlist">
   {% if cusId %}
   {% assign all_users = product.metafields.wishlist.UsersList | json %}
   {% if all_users contains cusId %}
   &#x3C;div class="hearted">
   &#x3C;input title="Remove from Wishlist" class="removeFavorite remove_{{product.id}}" id='{{product.id}}' cust_id='{{cusId}}' type='button' value='{{product.metafields.wishlist.TotalUsersWish}}' >
   &#x3C;img src="{{'ajax-loader.gif' | asset_url }}" />
   &#x3C;/div>
   {% else %}
   &#x3C;div class="nothearted">
   &#x3C;input title="Add to Wishlist" class="addToFavorite add_{{product.id}}" id='{{product.id}}' cust_id='{{cusId}}' type='button' value='{{product.metafields.wishlist.TotalUsersWish}}'>
   &#x3C;img src="{{'ajax-loader.gif' | asset_url }}" />
   &#x3C;/div>
   {% endif %}
   {% else %}
   &#x3C;div class="nothearted">
   &#x3C;input title="Add to Wishlist" class="notLoggedIn" id='{{product.id}}' cust_id='' type='button' value='{{product.metafields.wishlist.TotalUsersWish}}'>
   &#x3C;/div>
   {% endif %}
   &#x3C;/div>
   {% elsif display_option == "link" %}
   &#x3C;div class="a-wishlist">
   {% if cusId %}
   &#x3C;a type="anchor" href="javascript:void(0);" id='{{product.id}}' cust_id='{{cusId}}' class="addToFavorite add_{{product.id}}" link_text='{{link_text}}'>{{ link_text }}&#x3C;/a>
   &#x3C;img src="{{'icn_loading.gif' | asset_url }}" />
   {% else %}
   &#x3C;a type="anchor" href="javascript:void(0);" id='{{product.id}}' cust_id='' class="notLoggedIn" link_text='{{link_text}}'>{{ link_text }}&#x3C;/a>
   {% endif %}
   &#x3C;/div>
   {% endif %}
   &#x3C;div class="overlay" style="display:none; background-color: transparent; height: 45px; margin: 6px 0 0 -3px; position: absolute; width: 55px; z-index: 1000;">&#x26;nbsp;&#x3C;/div>
   &#x3C;scripttag src="https://shopiapps.in/wishlistapp/addToWishlist_v3.js" defer="defer" type="text/javascript">&#x3C;/scripttag>
   </code></pre>
5. Click **Save** to finish.

<mark style="color:red;">\*</mark>Please contact our support via <contact@globosoftware.net> to enable the meta fields function to collect data from the Wishlist + Share + Reminder app.

### 🔹**6. Wishlist ‑ Wishify**

*App URL: <https://apps.shopify.com/wishlist-wishify>*

**Steps**

1. From your Shopify admin panel, go to **Theme** folder.
2. In the **Action** dropdown, click **Edit code**.
3. Open the **globo.filter.product.liquid** file.
4. Add the below code snippet to the position you want the Wishlist to appear.

   ```html
   <div class="zoomywishid zoomywishid-{{product.id}}" data-product-id="{{product.id}}" data-handle = "{{product.handle}}" 
   data-image="{{product.featured_image | img_url: "360x"}}" data-variantname="{{product.selected_or_first_available_variant.title}}" data-title="{{product.title}}" data-variant="{{product.selected_or_first_available_variant.id}}" data-price="{{product.selected_or_first_available_variant.price | remove: "." | remove: "," | divided_by: 100.0 }}"></div>
   ```
5. Click **Save** to finish.

### 🔹**7. Wishlist Hero**

*App URL: <https://apps.shopify.com/wishlist-hero>*

**Steps**

1. From your Shopify admin panel, go to **Theme** folder.
2. In the **Action** dropdown, click **Edit code**.
3. Go to the **theme.liquid** file.
4. Add code right above the “\</body”> tag .

   ```javascript
   <script>
   window.addEventListener('globoFilterRenderCompleted', function () {
   document
   .querySelectorAll(".wishlist-hero-custom-button")
   .forEach(function (wishlistButton) {
   var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
   detail: wishlistButton,
   });
   document.dispatchEvent(ev);
   });
   });
   </script>
   ```
5. Click **Save** to finish.

### 🔹**8.** Froonze Loyalty & Wishlist

*App URL: <https://apps.shopify.com/customer-accounts>*

**Steps**

1. From your Shopify admin panel, go to **Theme** folder.
2. In the **Action** dropdown, click **Edit code**.
3. Go to the **theme.liquid** file.
4. Add code right above the “\</body”> tag .

   ```javascript
   <script>
   window.addEventListener('globoFilterRenderCompleted', function () {
   window.frcp.wishlist.attachOnCollection();
   });
   </script>
   ```
5. Click **Save** to finish.

💬 **Need Help?** Contact us at **<contact@globosoftware.net>** – we’re happy to assist! 😊


---

# 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://docs.globo.io/filter/wishlist-apps.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.