Add Wishlist icon in collection view
How do I place the Wishlist Hero icon on product cards in collection view?
- On you store admin screen, Go to "Online store" > "Themes"
- Check the theme you want to edit, and click on the "Actions" button, then on "Edit Code"
- Now, we need to find the product card snippet, this differs from one theme to another, Possible places we have seen it in '
snippets/product-card.liquid
' , 'snippets/product-grid-item.liquid
', 'snippets/product-list-item.liquid
' or 'snippets/grid-item.liquid
' - Edit the product card snippet you find, and place the following code snippet within the container have the product image at the very top.
{% render 'wishlisthero-collection-product' with product: product %}
Other optional parameters you can pass to the snippet: a. buttonMode : controls how the button is displayed, by default this is an icon only. Possible options:button_with_icon
,button_only
,text_only
,icon_only
,text_with_icon
Ordefault
to display as per configuration from page. b. buttonClass : Controls the class for the overall container, this defaults towishlisthero-floating
, which is how the button is floating on the top right of the product card. hint: You can usewishlisthero-floating mycustomClass
to apply additional styles - Save and check how the card looks, you can edit the styles used in
snippets/wishlisthero-styles.liquid