This guide provides detailed instructions for integrating the Swym Wishlist feature into your Shopify store using the Maropost Merchandising Cloud (formerly Findify) app. Follow the steps below to seamlessly incorporate wishlist functionality within your 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 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 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 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 YourFriends@Findify .io