お気に入り（wishlist）を実装できる日本語対応の Shopify アプリを調査してみた

## はじめに
Shopify では、デフォルトの機能でお気に入り（wishlist）機能をストアに追加することはできません。その為、お気に入り（wishlist）機能を追加するには、Shopify App Store から Shopify アプリをストアにインストールする必要があります。しかし、数多くのお気に入り（wishlist） Shopify アプリの中から最適なアプリを見つけ出すのは時間と労力が必要です。そこで今回は、おすすめのお気に入り（wishlist）Shopify アプリを紹介します！

参考・関連記事
- [Shopifyのおすすめお気に入り（wishlist）アプリ8選を徹底解説](https://unreact.jp/blog/shopify-app-favorite-app-ranking)
- [Shopify でお気に入り（Wishlist）機能を実現する方法を徹底解説！](https://unreact.jp/blog/shopify-blog-how-to-wishlist)
- [Shopify でお気に入り機能は実現できる？アプリの使い方を解説！](https://unblog.unreact.jp/blog/z4occ2h5pc)
- [Shopifyでお気に入り（wishlist）を実装する方法を考察](https://zenn.dev/natsume_katu/articles/00e8a3fb5f27d2)
- [【2024】Shopifyのお気に入り（wishlist）アプリについて調べてみた](https://unblog.unreact.jp/blog/81io2etxdxr)

## おすすめのお気に入り（wishlist）Shopify アプリ

おすすめのお気に入り（wishlist）Shopify アプリは、「[シンプル Wishlist｜お手軽お気に入り](https://apps.shopify.com/wishlist-38?locale=ja)」です。日本語に対応しており、比較的安価なのがおすすめのポイントです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/3e7b3de6-726b-3aca-b281-992719c8a7fa.png)

### 概要
シンプル Wishlist｜お手軽お気に入りは、Shopify ストアに簡単にお気に入り機能を導入することができるアプリです。商品数やお気に入り数に基づく複雑な課金はなく、月額 9.99 ドルでご利用できます。
 
### 主な機能
 - 商品ページとコレクションページでお気に入り追加ボタンを追加できる
 - マイページやその他のページに、お気に入りリストを表示できる
 - 商品数、お気に入り数に上限がない（※一顧客あたり50商品まで）
 - アプリ管理画面で各商品のお気に入り数を確認できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/1f7b3ea0-601a-0572-f70b-0750088c4833.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/237b50ff-9936-d183-5d42-4f5f7864f01b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/b185b6b2-0c73-a0e5-eceb-f0e7f218be45.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/c035db0b-fd3b-710e-8114-325c7efaa74c.png)


### 「シンプル Wishlist｜お手軽お気に入り」の追加方法

「[シンプル Wishlist｜お手軽お気に入り](https://apps.shopify.com/wishlist-38?locale=ja)」からアプリをインストールします。

「インストール」ボタンをクリックします。

![スクリーンショット 2024-08-23 142300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/28305e66-c97e-8c89-d63a-ef29821ce376.png)

「インストール」ボタンをクリックします。

![スクリーンショット 2024-08-23 142539.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/35d0a738-04bd-bc0c-a353-7be0513def6d.png)

こちらのアプリ管理画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/ef5c1b48-4257-e768-0a81-f481375c6c2b.png)

これでアプリのインストールは完了です。

アプリの有効化を行います。

ポップアップの「アプリを有効化する」ボタンをクリックします。

![スクリーンショット 2024-08-23 143024.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/6d2dc569-1376-b207-2f3e-13e4db1251ad.png)

以下の画面に遷移します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/cdf1bb73-d5f0-5a34-ec9f-7b797dc61d18.png)

「有効」に変更し、「保存する」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/07f7ef9f-e8a5-a22f-6120-b8806d211c7a.png)

画面下部に「お気に入り機能を有効化しました」というトーストが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/e4799593-eaaf-6d54-70af-f8b6e3731e29.png)

これでアプリの有効化は完了です。

ストアにお気に入り（wishlist）の App Block を導入していきます。

「シンプル Wishlist｜お手軽お気に入り」には、3 つの App Block があるので、それぞれ追加していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/62701d23-3009-23ce-7089-b996230d96bd.png)

「商品ページに追加」ボタンをクリックします。

クリック後、商品ページに遷移し、App Block が表示されます。

もし、以下のようなエラーが出た場合は、手動で App Block を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/69a1abb7-f8b3-e357-c51b-2d5f41bc3d82.png)

「ブロックを追加」から「お気に入りボタン」の App Block を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/7c16f1b4-84fb-5052-74c4-eaf06f643391.png)

そうすると、お気に入り（wishlist）ボタンの App Block が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/669307f2-3cba-7e79-fa5b-ccfb761f98fb.png)

通常のセクションと同様にお気に入り（wishlist）ボタンの文言やデザインをカスタマイズできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/556adeb2-b8ab-9a39-9812-f135d3fd090d.png)

お気に入り（wishlist）ボタンの各設定項目について説明します。

「お気に入りボタンの高さ」でボタンの高さ、「お気に入りボタンの最大幅」でボタンの幅、「お気に入りボタンの文字の大きさ」でボタン内の文字のフォントサイズ、「お気に入りボタンの文字の位置」でボタン内の文字の位置を調整できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/d2d8a299-04db-d39e-51d2-23f2e0ae14a3.png)


「ボタン（未お気に入り時）」の設定でお気に入りに登録されていない商品のお気に入り（wishlist）ボタン
のスタイルを変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/9cf8f344-9cba-7856-fbbf-d5d1b9690161.png)

「ハートアイコンの色」でアイコンの色、「お気に入りボタンの文字」でボタンの文字、「お気に入りボタンの文字色」でボタンの文字の色、「お気に入りボタンの背景色」でボタンの背景色、「お気に入りボタンの枠線の太さ」でボタンの枠線の太さ、「お気に入りボタンの枠の色」でボタンの枠線の色、「お気に入りボタンの枠線の丸み」でボタンの枠線の丸みを調整できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/35f78f60-6c01-fa84-0dd6-f9ad17209e57.png)

「ボタン（お気に入り時）」の設定でお気に入りに登録されている商品のお気に入り（wishlist）ボタン
のスタイルを変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/4cf4332f-1fa1-f0a5-de21-39852e45ff8a.png)

「ハートアイコンの色」でアイコンの色、「お気に入りボタンの文字」でボタンの文字、「お気に入りボタンの文字色」でボタンの文字の色、「お気に入りボタンの背景色」でボタンの背景色、「お気に入りボタンの枠線の太さ」でボタンの枠線の太さ、「お気に入りボタンの枠の色」でボタンの枠線の色、「お気に入りボタンの枠線の丸み」でボタンの枠線の丸みを調整できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/13429f59-1a44-5925-48b4-72bc78b3f006.png)

「ログインポップアップ設定」で未ログイン時にお気に入りボタンを押した際に表示されるポップアップのスタイルを変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/e7f96cf2-9458-128d-a9d2-a5ccf0e57a3e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/c35e85e4-3d7f-f132-b794-a2f7c48b1a71.png)


「お気に入り数上限ポップアップ設定」でお気に入り数上限に達した状態（50 商品）でお気に入りボタンを押した際に表示されるポップアップのスタイルを変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/a464aae9-e470-7be6-ad3e-e68e41baba52.png)

「余白設定」でお気に入りボタンの上下の余白を変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/13876afe-7b4d-f9db-e355-3fd21bfc2d4f.png)

これで、商品ページにお気に入り（wishlist）ボタンの追加は完了です。

次に、マイページにお気に入り商品一覧の App Block を追加します。

管理画面に戻り、「アカウントページに追加」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/89246fbf-5bdb-64e7-dc70-8839aea2f331.png)

お気に入り商品一覧の App Block が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/94b83e96-e152-7fb4-1efd-c4a27c04aaf6.png)

もしエラーが表示された場合は、「セクションを追加」から「お気に入り一覧」選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/9ccd71a2-98c7-b3b9-2927-4829cb69f264.png)

お気に入り一覧も文言やデザインをカスタマイズできます。

「見出し設定」でお気に入り一覧の見出しのスタイルを変更できます。

「見出しの文字」で見出しの文言、「見出しの文字の大きさ（パソコン時）」でデスクトップ時のフォントサイズ、「見出しの文字の大きさ（スマホ時）」でスマホ時のフォントサイズ、「見出しの文字下の余白（パソコン時）」でデスクトップ時の見出しの下の余白、「見出しの文字下の余白（スマホ時）」でスマホ時の見出しの下の余白を調整できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/48ffbe8d-cc1d-5326-9ccc-ced6e53f59fa.png)

「テーブル設定」でお気に入り一覧のテーブルのスタイルを変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/691e95a2-cd4e-4566-ce64-43b67e48623d.png)


「文字の色」で文言の文字色、「枠線の色」でお気に入り一覧の枠線の色、「お気に入り商品が 0 個時のメッセージ」でお気に入りに商品が登録されていないときの文言、「未ログイン時のメッセージ」で顧客がログインしていないときの文言を変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/c81c2840-0578-12bb-d3e7-5f902823b040.png)

「ハートアイコンボタン設定」でお気に入り一覧のテーブルのハートアイコンのスタイルを変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/2348e038-87bc-a6d4-a5c3-59543e4f040a.png)

「アイコンの大きさ」でアイコンの大きさ、「アイコンの色（未お気に入り時）」で未お気に入り時のアイコンの色、「アイコンの色（お気に入り時）」でお気に入り登録時のアイコンの色を変更できます。　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/8b6620f1-f0d4-2501-faa8-f75cf0688704.png)

「余白設定」でお気に入り一覧の上下の余白を調整できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/ca4c8292-757b-523b-ac29-3bd0c4e4d3a8.png)


これで、マイページにお気に入り一覧の追加は完了です。

最後に、コレクションページにハートアイコンボタンを追加します。

アプリ管理画面に戻り、「ハートアイコンボタンを追加」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/d34ab49c-389b-5124-42ff-da26e4f3a49f.png)

チェックが付きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/6730af1c-a615-f35e-0cc1-b552a53983cf.png)

チェックがつくと、コレクションページでハートアイコンボタンが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/c7d50fba-73c6-7112-6e76-2896cf766593.png)

ハートアイコンボタンも文言やデザインをカスタマイズできます。

「ハートアイコンボタン設定」でハートアイコンボタンのスタイルを変更できます。

「アイコンの色（未お気に入り時）」でお気に入りに登録されていないときのアイコンの色、「アイコンの色（お気に入り時）」でお気に入りに登録されているときのアイコンの色、「アイコンの位置（左右）」でハートアイコンの左右の位置、「アイコンの位置（上下）」でハートアイコンの上下の位置、「アイコンの上部余白」、「アイコンの左右余白」、「アイコンの下部余白」でアイコンの余白を変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/7ce7bfa3-ef3d-4ec2-163b-41a1df85b4ad.png)

「ログインポップアップ設定」「お気に入り数上限ポップアップ設定」で各ポップアップの文言を変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/fe713173-2dc7-034d-be1c-688033f944f4.png)

これで、コレクションページにお気に入り一覧の追加は完了です。

いくつか商品をお気に入りに追加すると、管理画面のお気に入り商品一覧に商品が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/c7ddf7e2-2ce7-15d4-e0f3-19234c6fe426.png)



## まとめ
今回は、お気に入り（wishlist）を実装できる日本語対応の Shopify アプリを紹介しました。
お気に入り（wishlist）機能は、Shopify のデフォルト機能やコーディングでの実装が難しいため、アプリをインストールするしかありません。皆さんの工数を少しでも削減できればと思います。


## 参考・関連記事
- [Shopifyのおすすめお気に入り（wishlist）アプリ8選を徹底解説](https://unreact.jp/blog/shopify-app-favorite-app-ranking)
- [Shopify でお気に入り（Wishlist）機能を実現する方法を徹底解説！](https://unreact.jp/blog/shopify-blog-how-to-wishlist)
- [Shopify でお気に入り機能は実現できる？アプリの使い方を解説！](https://unblog.unreact.jp/blog/z4occ2h5pc)
- [Shopifyでお気に入り（wishlist）を実装する方法を考察](https://zenn.dev/natsume_katu/articles/00e8a3fb5f27d2)
- [【2024】Shopifyのお気に入り（wishlist）アプリについて調べてみた](https://unblog.unreact.jp/blog/81io2etxdxr)