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.

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

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

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

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

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 contact@globosoftware.net to enable the meta fields function to collect data from the Wishlist + Share + Reminder app.

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>

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>

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>