# 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! 😊