Wishlist Hero
Findify’s 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
socialshopwave-widget-fave.liquid
Snippet- In your Shopify admin dashboard, go to
Online Store
>Themes
>Actions
>Edit code
. - Under
Snippets
, clickAdd a new snippet
and name itsocialshopwave-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
findify-product-card.liquid
- Open the
findify-product-card.liquid
file located underSnippets
. - 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
.findify-product-card
- Check if the CSS class
.findify-product-card
has the styleposition: relative;
. - If not present, add the following style in your CSS file:
.findify-product-card {
position: relative;
}
Conclusion
You have now successfully integrated Wishlist Hero from Findify 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 [email protected].
Updated 4 months ago