Search Knowledge Base by Keyword

Custom Wishlist Button

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 implementing a custom button may not work as expected, there is a backend setting to be updated for this to be enabled without disruption to 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 withing our  snippet as below. You would need to add this snippet above the custom button HTML code in the theme file.

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

Note: Best 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 as below.

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

Step 4 – Detect and update on variant change. (optional and based on themes.)

Swym Wishlist operates by default at the variant level, i.e. if a 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 is 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.

Let's discuss your needs!

Let's discuss your needs!