About
Globo is the company specializing in website design and development in Vietnam.
18 Khuc Thua Du Street, HN
globosoftware
[email protected]
Follow Us
  • No products in the cart.

Wishlist apps

You are here:
Estimated reading time: 2 min
In this article

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

1. 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. 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. Wishlist @ $2

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. Wishlist + Share + 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. Customer Accounts Concierge

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>
Was this article helpful?
Dislike 4
Views: 1964