> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bouquet-inc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding a favorite button to collection pages

> Add the code below and enable favorites in your theme to show a favorite button on collection and search result pages.

* data-multilikes-product-button

  Required.
* data-product-id

  Set the product ID.
* data-variant-id

  Set the product variant ID.
* Button text

  Rendered with the text you set in the theme settings, for adding and removing a favorite.

```html theme={null}
<button
	class="multilikes-product-btn"
	data-multilikes-product-button
	data-product-id="{{ product.id }}"
	data-variant-id="{{ product.selected_or_first_available_variant.id }}"
>
	Add to favorites
</button>

```

When the page content is refreshed by filtering or sorting, run the following in your JavaScript afterwards.

```javascript theme={null}
if (typeof window.initProductWishlist === "function") {
	window.initProductWishlist();
}
```

<Warning>
  This is sample code. Where you insert it depends on the existing code in your theme, such as theme.js or custom.js.
</Warning>


## Related topics

- [We want a heart icon on collection pages so customers can favorite from there](/en/apps/multilikes/faq/collection-page-heart.md)
- [Adding a favorite button to the cart page](/en/apps/multilikes/developers/cart-page-button.md)
- [Adding only a favorite button to an existing brand or store list](/en/apps/multilikes/brand-list-button-only.md)