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
From your Shopify admin panel, go to Theme folder.
In the Action dropdown, click Edit code.
Go to the filter.product.liquid file.
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>
Click Save to finish.
🔹2. Smart Wishlist
App URL: https://apps.shopify.com/smart-wishlist
Steps
From your Shopify admin panel, go to Theme folder.
In the Action dropdown, click Edit code.
Go to the filter.product.liquid file.
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>
Click Save to finish.
🔹3. Swish (formerly Wishlist King)
App URL: https://apps.shopify.com/wishlist-king
Steps
From your Shopify admin panel, go to Theme folder.
In the Action dropdown, click Edit code.
Go to the filter.product.liquid file.
Add the below code snippet to the position you want the Wishlist to appear.
<!-- include 'wishlist-button-collection' with '{{ product.id }}' -->
Click Save to finish.
🔹4. Mst: Wishlist
App URL: https://apps.shopify.com/i-wishlist
Steps
From your Shopify admin panel, go to Theme folder.
In the Action dropdown, click Edit code.
Go to the filter.product.liquid file.
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>
Click Save to finish.
🔹5. Listr: Wishlist + Reminder
App URL: https://apps.shopify.com/wishlist-1
Steps
From your Shopify admin panel, go to Theme folder.
In the Action dropdown, click Edit code.
Go to the filter.product.liquid file.
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;"> </div> <scripttag src="https://shopiapps.in/wishlistapp/addToWishlist_v3.js" defer="defer" type="text/javascript"></scripttag>
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
From your Shopify admin panel, go to Theme folder.
In the Action dropdown, click Edit code.
Open the globo.filter.product.liquid file.
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>
Click Save to finish.
🔹7. Wishlist Hero
App URL: https://apps.shopify.com/wishlist-hero
Steps
From your Shopify admin panel, go to Theme folder.
In the Action dropdown, click Edit code.
Go to the theme.liquid file.
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>
Click Save to finish.
🔹8. Froonze Loyalty & Wishlist
App URL: https://apps.shopify.com/customer-accounts
Steps
From your Shopify admin panel, go to Theme folder.
In the Action dropdown, click Edit code.
Go to the theme.liquid file.
Add code right above the “</body”> tag .
<script> window.addEventListener('globoFilterRenderCompleted', function () { window.frcp.wishlist.attachOnCollection(); }); </script>
Click Save to finish.
💬 Need Help? Contact us at [email protected] – we’re happy to assist! 😊
Last updated