Custom Wishlist Button

NOTE: We are currently in the process of migrating to a new version of our platform (V3). To learn how to figure out which version you are on, click here. This article is on a feature that is currently only on the older version of our platform (V2) and will be made available soon for our V3 users.

Intended Audience : Agency / Software Developers / Shopify Experts

NOTE: In order to use a custom button. Please contact our support team 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 implemented by a developer with knowledge of your eCommerce platform 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.

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

Step 1 – Generate and set product metadata for Swym APIs

Before adding this snippet above the custom button HTML code in the theme file, you will need to create and add a new snippet called swym-product-view on your shopify theme files. This is outlined in this article here.

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

NOTE: It is best to include it at the product-template level, which will automatically include it on every product page

Step 2 – Add two attributes to your custom button element

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

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

Step 3 – Add two classes to your custom button element

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

This ensures the button’s state is managed by Swym, i.e. added or not added. 

Your custom button code should now look like this:

{% 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)

The Swym wishlist feature 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 following code upon 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 Swym Admin to disable the default app injected button.

Still not working?

  • Your first objective is to avoid disruption to your users: disable the Swym Wishlist app (Shopify Apps > Swym Wishlist Plus  > Wishlist Plus > Disable App)
  • Next, go ahead and create a support ticket via Swym Admin with any helpful info and we’ll follow up 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!

Let's discuss your needs!