< All Topics

Add Wishlist icon in collection view

How do I place the Wishlist Hero icon on product cards in collection view?

  1. On you store admin screen, Go to “Online store” > “Themes
  2. Check the theme you want to edit, and click on the “Actions” button, then on “Edit Code
  3. 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
  4. 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 Or default to display as per configuration from page. b. buttonClass : Controls the class for the overall container, this defaults to wishlisthero-floating , which is how the button is floating on the top right of the product card. hint: You can use wishlisthero-floating mycustomClass to apply additional styles
  5. Save and check how the card looks, you can edit the styles used in snippets/wishlisthero-styles.liquid