Wishlist button elelemnt has two states: active and inactive. Active state is used when the product is already in the wishlist and inactive state is used when the product is not in the wishlist. We create these two states by adding two diffrent icons to the button. One for active state and one for inactive state.

​
Steps

1

Wishlist Button

Add a empty div/custom element inside a product card. This will be the wishlist button.
2

Wishlist Button - Attributes

Add the following attribute to the wishlist button:
looop=wishlist_button
3

Wishlist Button - Inactive

Add a icon to the wishlist button. This icon will be used when the product is not in the wishlist. Then add the following attribute to the icon:
looop=wishlist_button-inactive
4

Wishlist Button - Active

Add a icon to the wishlist button. This icon will be used when the product is in the wishlist. Then add the following attribute to the icon:
looop=wishlist_button-active