You can integrate Wishlist Hero with Merchandising Cloud to add wishlist and saved items functionality to your product cards and search results. This integration enables customers to bookmark products for later consideration, supporting a more flexible shopping journey that accommodates both immediate and deferred purchase decisions.
Wishlist Hero integration provides a comprehensive saved items solution that helps improve customer retention by giving shoppers an organized way to track products they're interested in. This functionality encourages customers to return to your store, reduces purchase pressure, and provides you with valuable data about product popularity and customer intent.
Our Wishlist Hero integration allows Shopify users to enhance their store with interactive wishlist functionalities. Follow the steps below to seamlessly integrate Wishlist Hero into your Shopify store using Liquid.
To start, you must have already downloaded the Wishlist Hero app from the Shopify App Store.
Step 1: Enable Wishlist Hero in App Embeds
- Log in to your Shopify admin dashboard.
- Navigate to
Online Store > Themes > Customize. - In the Theme Editor, click on
App embeds. - Enable Wishlist Hero.
Step 2: Create socialshopwave-widget-fave.liquid Snippet
- In your Shopify admin dashboard, go to
Online Store > Themes > Actions > Edit code. - Under
Snippets, click Add a new snippet and name it socialshopwave-widget-fave. - Copy and paste the following code into the
socialshopwave-widget-fave.liquid file:
{% unless buttonMode %} {% assign buttonMode = 'icon_only' %}{% endunless %}{% unless buttonView %} {% assign buttonView = 'Collection' %}{% endunless %}{% unless buttonClass %} {% assign buttonClass = 'wishlisthero-floating' %}{% endunless %}{% assign image = product.featured_image %}{% assign name = product.title %}{% capture url %}https://{{shop.domain}}{{product.url}}{% endcapture %}{% for var in product.variants %} {% if product.selected_or_first_available_variant.id == var.id %} {% if var.image and var.image.src %} {% assign image = var.image.src %} {% endif %} {% if var.url %} {% assign url = var.url %} {% endif %} {% if var.name %} {% assign name = var.name %} {% endif %} {% endif %}{% endfor %}<div data-wlh-id="{{product.id}}" data-wlh-link="{{url}}" data-wlh-variantid="{{product.selected_or_first_available_variant.id}}" data-wlh-price="{{product.selected_or_first_available_variant.price | remove: '.' | remove: ',' | divided_by: 100.0 }}" data-wlh-name="{{name | strip_html }}" data-wlh-image="{{image | img_url: '1024x'}}" class="wishlist-hero-custom-button {{ buttonClass }} {{ buttonClass }}-{{ product.id }}" data-wlh-mode="{{buttonMode}}" data-wlh-view="{{buttonView}}" style="left: auto;"></div><script async="" type="text/javascript"> var buttonInfo = { ButtonClassElement: "{{ buttonClass }}-{{ product.id }}", ProductId: "{{product.id}}", ProductLink: "{{url}}", ProductVariantId: "{{product.selected_or_first_available_variant.id}}", ProductPrice: {{product.selected_or_first_available_variant.price | remove: '.' | remove: ',' | divided_by: 100.0 }}, ProductTitle: '{{name | strip_html }}', ProductImage: "{{image | img_url: '1024x'}}", ButtonMode: "{{buttonMode}}", WishlistHash: "{{buttonView}}" }; WishListHero_SDK.InitializeAddToWishListButton(buttonInfo)</script>
Step 3: Include the Snippet in findify-product-card.liquid
- Open the
findify-product-card.liquid file located under Snippets. - Add the following code snippet where you want the Wishlist Hero button to appear:
{% capture the_snippet_fave %}{% render 'socialshopwave-widget-fave', product: product, variantId: current_variant.id %}{% endcapture %} {% unless the_snippet_fave contains 'Liquid error' %} {{ the_snippet_fave }} {% endunless %}
Step 4: Verify CSS for .findify-product-card
- Check if the CSS class
.findify-product-card has the style position: relative;. - If not present, add the following style in your CSS file:
CSS
.findify-product-card { position: relative;}
Conclusion
You have now successfully integrated Wishlist Hero into your Shopify store. Ensure all changes are saved and thoroughly test the integration across different pages to verify functionality.
For further assistance or inquiries, feel free to contact us at support@maropost.com
Related Articles
Wishlist Integrations:
- Smart Wishlist - Alternative wishlist solution
- iWish - Another wishlist integration option
- Swym - Wishlist and saved items functionality
- Growave - Combined engagement features
Analytics: