【2026年】Shopifyにお気に入り機能を追加する方法｜3つの実装手順を画像付きで徹底解説

はじめに

Shopifyストアにお気に入り（ウィッシュリスト）機能を追加したい
アプリとコード実装、どちらで導入すべきか迷っている
アプリでの具体的な設定手順を、画面を見ながら知りたい
ゲストでも使えて、ログイン後に引き継げる仕組みにしたい

このような方のための記事です。

この記事では、Shopifyにお気に入り（ウィッシュリスト）機能を追加する方法を、コード実装・アプリ・外注の3つの手法で比較しながら解説します。そのうえで、実際に自分でウィッシュリストアプリを開発している立場から、アプリでの導入手順を管理画面のスクリーンショット付きで7ステップに分けて徹底解説します。

お気に入り（ウィッシュリスト）機能とは

お気に入り機能とは、顧客がストア内の気になる商品をリストに保存しておける機能です。「ウィッシュリスト」「欲しいものリスト」とも呼ばれます。

ポイントは、Shopifyには標準でこの機能が用意されていないことです。Dawn や Horizon などの標準テーマにもお気に入りボタンは付いていません。そのため、ストアに追加するには何らかの実装が必要になります。

お気に入りボタンを置く場所は、主に次の3つです。

商品詳細ページ（商品を見ている最中に保存）
商品一覧・コレクションページ（一覧から気軽に保存）
専用のお気に入り一覧ページ（保存した商品をまとめて確認）

「今は買わないけれど、後で買うかもしれない」商品を顧客が手元にメモしておけるため、再訪問のきっかけになり、購入の取りこぼしを防げるのが大きな価値です。

なぜお気に入り機能が売上に効くのか

感覚ではなく、データで見ていきましょう。

まず前提として、Shopifyには標準のお気に入り機能がなく、導入しているストアはまだ少数派です。

192,464店舗を調査した海外のデータでは、ウィッシュリストアプリを入れているのは全体の3.2%だけで、96.8%のストアは未導入でした。

トラフィックが大きいほど導入率は上がり、月間5万未満では2.0%、20万〜100万では17.5%まで伸びます。

裏を返せば、規模が小さいうちに導入しておくだけで差別化しやすい施策だということです。

外部記事Best Shopify Wishlist Apps: 192K Store Study

効果の面で確度が高いのが、ゲスト対応です。会員登録を必須にせず、ログイン前でも保存できるようにすると、会員限定型に比べてエンゲージメントが15〜25%高くなるというデータがあります。

そもそも「アカウントを作らされること」を理由にカゴ落ちする買い物客は23%にのぼるとされ、登録の壁を外すこと自体が機会損失を防ぎます。

外部記事Guest Wishlist vs Customer Account Wishlist on Shopify

Shopifyにお気に入り機能を追加する3つの方法

お気に入り機能を追加する手段は、大きく3つに分かれます。それぞれメリットとデメリットがあるので順に見ていきましょう。

方法1. テーマコードで自前実装する

1つ目は、テーマのコードを直接編集して自分で実装する方法です。少し技術的な話になりますが、何をすることになるのかを具体的に見ておきましょう。

データの保存先には、Shopifyのメタフィールドを使うのが一般的です。設計としては次の2階層に分けます。

ストアのメタフィールド：お気に入り機能全体の有効・無効フラグを持たせる
顧客のメタフィールド：その顧客がお気に入り登録した商品IDのリストを持たせる

顧客メタフィールドは、たとえば次のように GraphQL の metafieldsSet ミューテーションで書き込みます。

mutation {
  metafieldsSet(metafields: [
    {
      ownerId: "gid://shopify/Customer/【顧客ID】",
      namespace: "wishlist",
      key: "product_ids",
      type: "json",
      value: "お気に入り商品IDのJSON配列"
    }
  ]) {
    metafields { id key }
    userErrors { field message }
  }
}

ここまでは入り口にすぎません。

実運用に乗せるには、さらに次の実装が必要になります。

商品ページにお気に入りボタンを設置し、クリックで顧客メタフィールドを更新する処理
アカウントページ（または専用ページ）で、保存済み商品IDを読み出して商品カードを描画する処理
追加・削除をリアルタイムに画面へ反映する処理

さらに厄介なのがゲスト対応です。顧客メタフィールド方式はログイン顧客が前提のため、未ログインのお客様にも使わせたい場合は、ブラウザの localStorage に一時保存しておき、ログインしたタイミングでメタフィールドへ統合する、といった二重管理が必要になります。

加えて、テーマをアップデートするたびに追加コードのメンテナンスが発生します。メリットはデザインの自由度が高く月額料金がかからないことですが、「ボタンを置くだけ」では終わらず、運用に耐える形にするには相応の開発工数がかかる、というのが正直なところです。

方法2. アプリを導入する（最短ルート）

2つ目は、Shopify App Storeのアプリを導入する方法です。結論から言うと、多くのストアにとってこれが最短かつ現実的な選択肢になります。

最近のお気に入りアプリは、テーマコードを直接編集しなくても導入できるApp Block（テーマアプリ拡張）に対応しています。テーマエディタ上でブロックを差し込むだけなので、テーマのアップデートで壊れる心配がなく、ノーコードで設置できます。

外部記事About theme app extensions

注意点としては、海外製アプリが多く、管理画面やお客様向けの文言が英語のままだったり、サポートが英語対応だったりするケースがあることです。日本のストアで使うなら、管理画面とストアフロント表示の両方が日本語に対応しているかを確認しておくと安心です。

アプリ同士の細かい比較は別記事にまとめているので、選定段階の方は Shopifyお気に入りアプリの比較記事もあわせてご覧ください。

方法3. 開発会社・パートナーに依頼する

3つ目は、Shopifyパートナーや制作会社に実装を依頼する方法です。完全オリジナルのデザインで作り込みたい、既存アプリでは要件を満たせない、といった場合に向いています。費用はかかりますが、要件にぴったり合ったものを作れるのが強みです。社内にコードを触れる人がいない場合の選択肢にもなります。

結局どの方法を選ぶべきか

判断軸はシンプルで、デザインを一から作り込みたくて開発リソースもあるなら、方法1の自前実装。

独自要件が強く予算も確保できるなら、方法3の外注。

そして「まずは手早く、確実に、運用に耐える形でお気に入り機能を入れたい」なら、方法2のアプリ導入が最適です。

ほとんどの個人・中小規模のストアにとっては、ゲスト対応や分析まで含めて作り込まれたアプリを使うのが、コストと確実性のバランスでもっとも合理的です。ここからは、実際にアプリでお気に入り機能を導入する手順を、画面付きで具体的に見ていきます。

【実践】RYX Wishlistでお気に入り機能を5分で導入する手順

ここでは、自分が開発している日本語ネイティブのお気に入りアプリ RYX Wishlist を例に、導入の流れを最初から最後まで解説します。

App Blockベースなので、テーマコードを編集せずに設置できます。

外部記事日本語で迷わず設定。ゲスト保存・人気度表示・分析・CSV・Flow連携。ノーコード導入 | Shopify App Store

料金は保存20件まで使える Free プラン（0円・カード登録不要）から始められ、開発ストアでも全機能を検証できます。

対応ページは商品詳細・商品一覧・アカウントページ。

所要時間は約5分です。

インストール後、管理画面のセットアップガイドに沿って次の7ステップを進めます。

Step1. App Embedを有効化する

管理画面のセットアップガイドから「App Embedを有効化」の「有効にする」をクリックします。

これでアプリのスクリプトがストアフロントに読み込まれ、お気に入り機能が動作する土台ができます。

Step2. テーマカスタマイザーでお気に入りを有効化する

テーマカスタマイズ画面に移動するので、お気に入りを有効にして「保存」します。テーマ側でお気に入り機能を受け入れる準備が整います。

Step3. 商品詳細にボタンを追加する

ダッシュボードに戻り、「商品詳細にボタンを追加」のセクションから「設定を開く」をクリックします。商品ページにお気に入りボタンを差し込むための画面へ進みます。

Step4. App Blockを配置する

テーマカスタマイズ画面で、商品情報のブロックにお気に入りボタンを追加して「保存」します。ここがApp Blockの本体で、テーマコードを触らずにボタンを設置できる部分です。配置位置はドラッグで調整できます。

Step5. 各種設定を開く

ダッシュボードに戻り、「各種設定をする」のセクションから「設定を開く」をクリックします。

Step6. 表示・ゲスト・デザインを設定する

設定画面では、主に次の3つを調整します。

商品一覧ページでボタンを表示：コレクションページ・商品一覧にもお気に入りボタンを出すかどうかを切り替えます。OFFにすると一覧にはボタンが表示されません。
ゲスト利用許可：会員登録していないお客様にもお気に入りを使わせるかどうか。ONにすると、ゲストで保存した商品がログイン後に自動で引き継がれます（後述するように、ここは基本ONがおすすめです）。
お気に入りページ設定：独立したお気に入り一覧ページの設定です。表示方式（ナビゲーション／フローティングボタン／ブロック追加）や見出し、空のときのメッセージを編集できます。メニューにリンクを追加するだけで、お客様にお気に入り一覧を見せられます。

Step7. セットアップ完了

ダッシュボードに戻ると、セットアップガイドが完了します。最後に必ずストアフロントを開き、お気に入りボタンが表示されていることを確認してください。

ゲストモードは必ずオンにする

導入時にひとつだけ強く意識してほしいのが、ゲストモードです。

前半のデータでも触れたとおり、ログイン前でもお気に入りを使えるようにするだけで、エンゲージメントは大きく変わります。

会員登録という心理的なハードルを挟まずに「とりあえず保存」してもらえるからです。

RYX Wishlist では、ゲストで保存したお気に入りを、その後ログインしたタイミングで会員アカウントへ自動的に引き継ぎます。

自前実装だと二重管理が必要になる部分を、設定ひとつでオンにできるようにしています。

特別な理由がなければ、ゲスト利用許可はONにしておくのがおすすめです。

お気に入りデータを分析して施策に活かす

お気に入りは「設置して終わり」ではなく、データとして使ってこそ価値が出ます。RYX Wishlist の管理画面では、お気に入り関連のデータをダッシュボードで確認できます。

ダッシュボードで見られる主な指標は次の3つです。

お気に入り保存数の推移：日別・週別で保存数のトレンドを把握できます
人気商品ランキング：お気に入りに多く追加されている商品が一目でわかります
ゲスト率：ゲストと会員の保存割合を確認できます

これらのデータは、施策の判断に直結します。人気商品ランキングは、在庫の優先確保やプロモーション対象の選定に使えます。ゲスト率が高ければ、会員登録への導線を見直すサインになります。

さらに、お気に入りデータはCSVでも書き出せます。商品ごとのお気に入り数、ユーザーごとのお気に入りリストを、期間を指定してエクスポートできるので、社内のスプレッドシートや分析ツールに取り込んで、より細かく分析したりチームに共有したりできます。

独自実装テーマでボタンが出ないときの対処

標準テーマ（Dawn / Horizon など）ならここまでの手順でボタンが表示されますが、トップページやコレクションページの商品カードが独自のクラス名で組まれているテーマだと、一覧側のボタンが自動表示されないことがあります。

RYX Wishlist はストアフロントのDOMを走査して商品カードを検出し、お気に入りボタンを挿入しています。

検出に使う標準クラス名は内部に持っていますが、テーマがオリジナルのクラス名を使っていると検出できません。

その場合は、テーマ側に「商品カードはこのクラスです」と教えるスクリプトを1つ追加します。

具体的には、管理画面の「オンラインストア＞テーマ＞コードを編集」から theme.liquid を開き、<head> 〜 </head> の中に次のスクリプトを追加して保存します。

<script>
  window.__wishlistCustomSelectors = [
    '.your-product-card-class',
    '.another-product-card-class'
  ];
</script>

クラス名の調べ方は次のとおりです。

お気に入りボタンを表示したいページをブラウザで開く
商品カード上で右クリック →「検証」（または F12 で開発者ツールを開く）
商品カード全体を囲っている要素のクラス名を確認する
そのクラス名（先頭にドットを付けた形）を上記のリストに記載する

保存後にページを再読み込みすると、独自実装セクションの商品カードにもお気に入りボタンが表示されます。

テーマコードの編集が難しい場合は、コラボレーターアクセスをいただければ設置を代行することも可能です。

コラボレーター申請の手順は Shopifyのコラボレーター申請ガイドを参考にしてください。

2026年に自前実装するなら押さえたい注意点

方法1の自前実装を選ぶ場合、2026年時点では新しい注意点があります。

新しいお客様アカウント（New Customer Accounts）まわりで、お気に入り情報をメタフィールドに持たせる設計をするなら、Customer Account API経由でアクセスするメタフィールドには「定義」と適切な権限が必須になりました。

定義のないメタフィールドは値を返さなくなるため、ここを踏むとお気に入りが取得できないという不具合になります。

外部記事Metafields now require a definition to be accessed through the Customer Account API - Shop...

自前で組む場合は、メタフィールドを必ず定義つきで作成し、Customer Account API の権限を付与しておくことを忘れないようにしてください。

こうした仕様変更への追従コストも、アプリを使うかコードで作るかを判断する材料になります。

さいごに

Shopifyにお気に入り機能を追加する方法は、自前実装・アプリ・外注の3つ。

デザインの自由度を取るなら自前実装、要件特化なら外注ですが、手早く確実に運用へ乗せたいならアプリ導入がもっともバランスの良い選択です。

特にゲスト対応と分析まで含めて考えると、最初からそれらが揃ったアプリを使うほうが、結果的に近道になります。RYX Wishlist は日本語ネイティブで5分から始められるので、お気に入り機能の導入を検討している方は気軽に試してみてください。

ご希望に合わせた実装や設置代行については、お問い合わせからお気軽にご相談ください。