> ## 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.

# 商品一覧ページへのお気に入りボタンの追加に関して

> 以下のコードを入れ、テーマのお気に入り機能を有効化することで、コレクション/検索結果ページ上でお気に入りボタンを表示できます。

* data-multilikes-product-button

  設定してください。
* data-product-id

  商品のIDを設定します。
* data-variant-id

  商品バリエーションのIDを設定します。
* ボタンテキスト

  テーマ設定で指定したテキスト（お気に入り追加テキスト/お気に入り削除テキスト）で表示します。

```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 }}"
>
	お気に入りに追加
</button>

```

絞り込み適用/並び替え適用でページ内容が更新された場合、更新後のJavaScriptで以下を実行してください。

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

<Warning>
  本コードはあくまでサンプルとなります。

  コード挿入する箇所はテーマのtheme.js、custom.jsなどの既存のコードによって変更されますので予めご了承くださいませ。
</Warning>


## Related topics

- [商品一覧ページ上にハートマークをおいて、お気に入り登録をしたい](/apps/multilikes/faq/collection-page-heart.md)
- [カートページへのお気に入りボタンの追加に関して](/apps/multilikes/developers/cart-page-button.md)
- [特定の商品のみ、マイページからカートに追加できないようにしたい](/apps/multilikes/faq/restrict-add-to-cart.md)