Intended Audience : 
Agency / Software Developers / Shopify Experts


Please note : In order to use a custom button. Please contact support to change the settings in our backend to enable the feature for your store, and to disable the default button injection.


This is an advanced feature and it is recommended to be handled by a developer with knowledge of Shopify theme editor and languages, such as HTML, CSS, Javascript and Liquid templating as required. 


Shopify  - Liquid based themes (from the Shopify theme store)


Disclaimer:  Hiding the default button and implement a custom button may not work as expected, there is a backend setting to be updated for this to enabled without disruption on your theme.


Note : Please ensure all the below attributes are met in your custom button, for it work as expected.


There are just four steps to include our button to the product page :



Step 1 - Generate and set product metadata for Swym APIs. This is easily available as a snippet like below.

{% include 'swym-product-view', product: product %}


NoteBest to include it at the product-template level, which will automatically include it on every product page


Step 2 - Add below attributes to your custom button element 

data-swaction="addToWishlist" 

data-product-id="{{product.id | json}}"


Note: This ensures Swym will initialize the action on the button for the given product.id


Step 3 - Add below classes to your custom button element.


product_{{product.id}}  swym-add-to-wishlist


Note : This is to ensure the button's state is managed from Swym - i.e. added or not added. 


After doing the above steps, your custom button code should look like below.

{% include 'swym-product-view', product: product %}
<button class="swym-add-to-wishlist product_{{product.id}}" data-swaction="addToWishlist" data-product-id="{{product.id | json}}"></button>



Step 4 - Detect and update on variant change. (optional_

Swym Wishlist operates by default at the variant level, i.e. if user changes the variant, the wishlist button action gets associated to the currently selected variant. Depending on your theme you may have to call the below code on detection of a variant change


function swymCallbackFn(swat) {

    // your API calls go here 

    // detect variant change event

    // Based on your theme code - this event detection may be different - this is only a SAMPLE implementation
    document.addEventListener("variantChange", function(event) {

        var variantId = event.detail.variant.id; /* the current selected variant id */

        window.triggerSwymVariantEvent(variantId);

        swat.initializeActionButtons(".product-page-wishlist-grid"); /* parent container of the where the button is rendered */

    });

}


if (!window.SwymCallbacks) {

    window.SwymCallbacks = [];

}

window.SwymCallbacks.push(swymCallbackFn);

/* Called when swym is loaded! */



Finally, contact support ( support@swymcorp.com) / from the Swym Dashboard  to disable the  default app injected button.


Still not working?

First thing first - to avoid disruption to your users, disable the Swym Wishlist app (Shopify Apps > Swym Wishlist Plus  > Wishlist Plus > Disable App)

Next up, go ahead and create a support ticket via the dashboard with any helpful info and we’ll follow up with you to get you setup.




SwymCallbackFn Reference : 

  1.  variantChange  :  the custom event that is triggered on each variant change.

  2.  event.detail.variant.id : . variant id of the selected product, sent with the custom event.

  3. .product-page-wishlist-grid :  the parent container CSS selector of the button.

  4. swymCallbackFn : callback function that is called when swym is loaded.

  5. window.triggerSwymVariantEvent(variantId) : triggers the change of the variant event.

  6. swat.initializeActionButtons(".parent-container")  updates/ notifies all the swym buttons inside the provided CSS Selector.