When a merchant signs up for the Swym Wishlisht+ app, he/she may use the dashboard its tools to place a “Add to Wishlist” button on their product page. Certain time, store owners may wish to use a button pre-loaded to their theme. This custom button may blend better with the rest of their store.

If you wish to use the existing button and incorporate the functionalities of the Wishlist+ app onto it, it can be done in the following way:

 Step1: Locate the liquid containing the button 

  1. In the admin console, go to Online Store > theme 

  2. Choose the Current theme/ Production theme

  3. Click on Action> Edit Code (Refer Image1)

Image1

Step2: Include the following piece of code to your liquid file

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


Step3: Add the following piece of code to your button, before the end of the button tag.

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



Step4: To this, now add and an extra button class as below: 

“product_{{product.id}}”


Once you finish the above four steps, the custom button on your theme will now behave as a “Add To Wishlist” button. You can also make appearance changes when the product is added to wishlist by adding css for a .swym-added class for your button. This will affect only the CSS, not the text inside the button. For updating the text in the button, the content needs to be enclosed within spans. eg:

<button><span class="swym-wishlist-cta"> Add to wishlist </span></button>

The added state CTA can be configured via dashboard. You can reach out to the support team to disable the default button.

NOTE: This doesn't support changing variants, i.e. wishlist action is bound to the default variant of the product.