This is an advanced feature that requires knowledge of your eCommerce platform theme editor and languages, such as HTML, CSS, Javascript and Liquid templating as required.
This tutorial will help you set up a custom wishlist button for Liquid-based Shopify themes
The following attributes added to your custom button are used to wire the button to the "Add to Wishlist" functionality:
class="swym-button swym-add-to-wishlist" data-with-epi="true" data-swaction="addToWishlist" data-product-id="{{ product.id }}" data-variant-id="{{ product.variants[0].id }}" data-product-url="{{ shop.url }}{{ product.url }}"e.g.
Explanation:
Class: Swym’s classes to detect the button and apply logic
With epi: A flag for Swym’s internal logic
Swaction: Swym action
Product ID: ID of the product on the page
Variant ID: Variant ID of the product on the page (we are choosing 1st variant by default)
Product URL: A query param free URL of the product on the page
Replace {{ product.id }}’s “product” keyword with any other keyword if your store has modified it.
Save your file and refresh your product page to see if your custom button is functional now. To do that, simply click on it and it will try to add your product to the wishlist.
Please note that this takes care of variant change logic as well, as long as the variant ID is populated as a query parameter in the product page's URL. So your button should automatically be initialized upon variant change detected by Swym on the product page.
Also, make sure you have applied proper styling of ‘added’ vs ‘non-added’ looks of your button. You can rely on the swym-added class on your button to determine if the button is in a wishlisted state or not.
Scenario 1: Modifying a Single Custom Icon with CSS
This approach is ideal if you have a single icon and want to change its appearance (e.g., color, background) when an item is added to the wishlist, based on CSS alone.
Logic: The .swym-added class is applied to your button's container when the item is wishlisted. By targeting this class in your CSS, you can define a different style for the "added" state.
Example: Let's say your default icon has a pink background. To change it to red when the item is wishlisted, you would use the following CSS:
CSS
.my-custom-wishlist-button.swym-added .wishlist-icon {
fill: red;
}
HTML
<button class="my-custom-wishlist-button swym-button swym-add-to-wishlist"
data-with-epi="true"
data-swaction="addToWishlist"
data-product-id="{{ product.id }}"
data-variant-id="{{ product.variants[0].id }}"
data-product-url="{{ shop.url }}{{ product.url }}"
>
<svg class="wishlist-icon" aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 512 512">
<path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.2 24.3 104.7 15.9 49.9 62.6c-62.8 53.6-66.8 147.9-9.8 200.7l200.9 184.2c61.9 57.1 126.9 83.2 177.2 83.2 50.4 0 115.4-26 177.2-83.2l200.9-184.2c57-52.8 53-147.1-9.8-200.7z"/>
</svg>
</button>
Scenario 2: Toggling Between Two Different Icons
This approach is useful if you have separate icons for the "unfilled" (not wishlisted) and "filled" (wishlisted) states. Instead of changing the color of a single icon, you'll hide and show different icons based on the wishlist status.
Logic: You can use CSS to control the visibility of the two icons.
The
swym-addedclass is present when an item is wishlisted.The
:not(.swym-added)selector is used to target the button when it is not wishlisted.
Example: Let's assume you have a container with two child icons: .swym-icon-unfilled (for the empty state) and .swym-icon-filled (for the wishlisted state). The following CSS will toggle their visibility correctly.
CSS
/* When the button has the 'swym-added' class, hide the unfilled icon */ .swym-button.swym-added .swym-icon-unfilled {
display: none;
}
/* When the button does NOT have the 'swym-added' class, hide the filled icon */
.swym-button:not(.swym-added) .swym-icon-filled {
display: none;
}HTML Example: In this example, the display: none; rule will be applied or removed automatically.
HTML
<button
class="swym-button swym-add-to-wishlist"
data-with-epi="true"
data-swaction="addToWishlist"
data-product-id="{{ product.id }}"
data-variant-id="{{ product.variants[0].id }}"
data-product-url="{{ shop.url }}{{ product.url }}"
>
<svg class="swym-icon-unfilled"
height="24px" viewBox="0.0 0 1792.0 2048"
width="auto"
>...</svg>
<svg class="swym-icon-filled"
viewBox="0 0 512 512" height="24px" width="auto"
>...</svg>
</button>
When the user clicks the button and the item is wishlisted, the .swym-added class will be added to the <button> element. This will trigger the first CSS rule, hiding the unfilled icon and revealing the filled one.
Ready to use code snippet (PDP/Product Pages)
<style>
#custom-wishlist-button.swym-added .wishlist-icon {
fill: red;
}
#custom-wishlist-button {
background: unset !important;
}
</style>
<button id="custom-wishlist-button" class="swym-button swym-add-to-wishlist"
data-with-epi="true"
data-swaction="addToWishlist"
data-product-id="{{ product.id }}"
data-variant-id="{{ product.variants[0].id }}"
data-product-url="{{ shop.url }}{{ product.url }}"
>
<svg
class="wishlist-icon"
aria-hidden="true"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
width="24px"
>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</button>
Still not working?
To avoid disruption to your users, use our default button by referring to this help article.
You can always reach out to us at [email protected]. If you're already on our messenger, simply say "talk to an agent," and Fin will connect you with a member of our team who can provide further assistance.