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

1. Log in to your Shopify admin dashboard.
2. Navigate to Online Store > Themes > Customize.
3. In the Theme Editor, click on App embeds.
4. Enable Wishlist Hero.

Step 2: Create socialshopwave-widget-fave.liquid Snippet

1. In your Shopify admin dashboard, go to Online Store > Themes > Actions > Edit code.
2. Under Snippets, click Add a new snippet and name it socialshopwave-widget-fave.
3. 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

1. Open the findify-product-card.liquid file located under Snippets.
2. 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

1. Check if the CSS class .findify-product-card has the style position: relative;.
2. 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].