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

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.

   <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. Open the globo.filter.product.liquid file.

6. Add the following code to the first code line.

   {% comment %}Do not edit this file{% endcomment %}

2. Smart Wishlist

App URL: 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.

   <span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants[0].id }}"></span>

5. Open the globo.filter.product.liquid file.

6. Add the following code to the first code line.

   {% comment %}Do not edit this file{% endcomment %}

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.

   <!-- include 'wishlist-button-collection' with '{{ product.id }}' -->

5. Open the globo.filter.product.liquid file.

6. Add the following code to the first code line.

   {% comment %}Do not edit this file{% endcomment %}

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.

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

5. Open the globo.filter.product.liquid file.

6. Add the following code to the first code line. {% comment %}Do not edit this file{% endcomment %}

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.

   {% 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' %}
   
   <div class="div-wishlist">
   
   {% if cusId %}
   
   {% assign all_users = product.metafields.wishlist.UsersList | json %}
   
   {% if all_users contains cusId %}
   
   <div class="hearted">
   
   <input title="Remove from Wishlist" class="removeFavorite remove_{{product.id}}" id='{{product.id}}' cust_id='{{cusId}}' type='button' value='{{product.metafields.wishlist.TotalUsersWish}}' >
   
   <img src="{{'ajax-loader.gif' | asset_url }}" />
   
   </div>
   
   {% else %}
   
   <div class="nothearted">
   
   <input title="Add to Wishlist" class="addToFavorite add_{{product.id}}" id='{{product.id}}' cust_id='{{cusId}}' type='button' value='{{product.metafields.wishlist.TotalUsersWish}}'>
   
   <img src="{{'ajax-loader.gif' | asset_url }}" />
   
   </div>
   
   {% endif %}
   
   {% else %}
   
   <div class="nothearted">
   
   <input title="Add to Wishlist" class="notLoggedIn" id='{{product.id}}' cust_id='' type='button' value='{{product.metafields.wishlist.TotalUsersWish}}'>
   
   </div>
   
   {% endif %}
   
   </div>
   
   {% elsif display_option == "link" %}
   
   <div class="a-wishlist">
   
   {% if cusId %}
   
   <a type="anchor" href="javascript:void(0);" id='{{product.id}}' cust_id='{{cusId}}' class="addToFavorite add_{{product.id}}" link_text='{{link_text}}'>{{ link_text }}</a>
   
   <img src="{{'icn_loading.gif' | asset_url }}" />
   
   {% else %}
   
   <a type="anchor" href="javascript:void(0);" id='{{product.id}}' cust_id='' class="notLoggedIn" link_text='{{link_text}}'>{{ link_text }}</a>
   
   {% endif %}
   
   </div>
   
   {% endif %}
   
   <div class="overlay" style="display:none; background-color: transparent; height: 45px; margin: 6px 0 0 -3px; position: absolute; width: 55px; z-index: 1000;">&nbsp;</div>
   
   <scripttag src="https://shopiapps.in/wishlistapp/addToWishlist_v3.js" defer="defer" type="text/javascript"></scripttag>

5. Open the globo.filter.product.liquid file.

6. Add the following code to the first code line.{% comment %}Do not edit this file{% endcomment %}

Please contact our support via [email protected] 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 following code to the first code line.{% comment %}Do not edit this file{% endcomment %}

   <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>

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 .

   <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>

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 .

   <script>
   window.addEventListener('globoFilterRenderCompleted', function () {
   window.frcp.wishlist.attachOnCollection();
   });
   </script>

💬 Need Help? Contact us at [email protected] – we’re happy to assist! 😊