Swym

This guide provides detailed instructions for integrating the Swym Wishlist feature into your Shopify store using the Findify app. Follow the steps below to seamlessly incorporate wishlist functionality within your Findify-powered search, merchandising, and recommendations.

Steps for Integration

1. Create a Snippet: swym-custom

First, create a new snippet in your Shopify theme named swym-custom. Add the following code to the snippet:

<script defer>
  function swymCallbackFn(swat){
    // your API calls go here
    document.addEventListener("swym:collections-loaded", function(){
      swat.initializeActionButtons("<<Collections Grid PARENT Selector >>");
    })
  }
  if(!window.SwymCallbacks){
    window.SwymCallbacks = [];
  }
  window.SwymCallbacks.push(swymCallbackFn);
</script>

Important: Replace <<Collections Grid PARENT Selector >> with your specific search or collection grid selector. For example, if you are using the default Findify products section, you would replace it with .findify-products-section.

2. Include the swym-custom Snippet in Your Theme

Next, you need to include the swym-custom snippet in your theme.liquid file. To do this, add the following line of code:

{% include 'swym-custom' %}

This inclusion ensures that the Swym wishlist functionality is loaded across your Shopify store.

3. Add Swym Button to Findify Product Card Template

To allow users to add products to their wishlist directly from the product cards, add the following code to your findify-product-card.liquid template:

<button
    data-product-id={{ id | json }}
    data-variant-id={{ product.variants[0].id }}
    aria-label="Add to Wishlist"
    data-with-epi="true"
    class="swym-button swym-add-to-wishlist-view-product product_{{id}}"
    data-swaction="addToWishlist"
    data-product-url="{{ shop.url }}{{ product_url }}"
    style="position: absolute; top: 10px; left: 10px; z-index: 4"
  >
</button>

This code snippet adds a wishlist button to each product card, making it easy for customers to save products to their wishlist.

4. Add a Custom Event to findify-grid-search.liquid

Finally, to ensure that the Swym wishlist buttons are initialized correctly after Findify search results load, you need to add a custom event in the findify-grid-search.liquid file. Insert the following code at the end of the onFindifySearchDone function, right after the productCardAnalytics('#findify-product-grid') line (typically found around line 153):

document.dispatchEvent(new CustomEvent("swym:collections-loaded"));

This dispatches an event that Swym listens for, allowing it to reinitialize the wishlist buttons after each search.

For further assistance or inquiries, feel free to contact us at [email protected].