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. Click Save to finish.

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

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

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

    {% 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. Click Save to finish.

*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 below code snippet to the position you want the Wishlist to appear.

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

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

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

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

Last updated