サムネイル

Shopify でお気に入り(Wishlist)機能を実現する方法を徹底解説!

今回は、Shopify でお気に入り(Wishlist)機能を導入する 2 つの方法について解説していきます。
1 つ目は、メタフィールドを用いたコーディングでお気に入り(Wishlist)機能を導入する方法です。
2 つ目は、アプリを用いてお気に入り(Wishlist)機能を導入する方法です。

それぞれの方法について詳しく解説していきます。

目次

お気に入り(Wishlist)機能とは?

お気に入り機能とは、顧客が Shopify ストア内の商品をお気に入りリストに追加できる機能です。この機能は、「ウィッシュリスト(Wishlist)」、「ブックマーク」としても知られています。

この機能を利用することで、現時点では購入を見送るものの、将来的に興味がある商品をリスト化しておくことが可能です。

今回は、以下の記事を参考にしています。

お気に入り(Wishlist)機能のメリット

お気に入り機能を導入するメリットは下記になります。

  • ショッピング体験の向上

お気に入り(Wishlist)機能により、顧客はサイトへの再訪問時に簡単に以前に興味を持った商品を見つけ出すことができ、これがショッピング体験の向上に寄与します。また、求めている商品を発見できないことによるサイト離脱のリスクを軽減する効果もあります。

  • 売上アップに繋がる

お気に入り(Wishlist)機能により、顧客はサイトへの再訪問時に簡単に以前に興味を持った商品を見つけ出すことができ、購買意欲の向上に繋がります。

  • 在庫管理の効率化

お気に入りリストの情報は、在庫管理にも大きなメリットをもたらします。

たとえば、特定の商品が多数の顧客によってリストへ追加される場合、その商品に対する高い需要が見込まれます。

お気に入りリスト売り切れや過剰在庫のリスクを減らし、より効率的なストア運営を実現できます。

メタフィールドを用いたコーディングでお気に入り(Wishlist)機能を導入する方法

まずは、メタフィールドを用いたコーティングでお気に入り(Wishlist)機能を導入する方法について解説します。

今回は、GraphQL を用いてメタフィールドを作成していきます。

Shopify GraphQL App」にアクセスしてください。「Shopify GraphQL App」はストア上で GraphQL を使用できるように Shopify が用意しているアプリです。

上記の Install の部分に Shopify の開発ストアの URL を入力し、Select all をクリックして、「インストール」ボタンを押すと、Shopify の開発ストアに 「Shopify GraphQL App」をインストールすることができます。

ストアのメタフィールドにセット販売の情報を定義する

ストアのメタフィールドにお気に入り機能の情報を設定する

ストアのメタフィールドにお気に入り機能の情報を設定します。

以下の画像は、今回実装する GraphQL コードです。Mutation の部分と Variables の部分を順に解説していきます。

GraphQL の実行画面

まずは、Mutation の部分です。以下のコードをそのまま貼り付けてください。

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      key
      namespace
      value
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
      code
    }
  }
}

metafields ブロックには、登録されたメタフィールドの情報が入ります。
今回は、keynamespacevalue を指定して登録されたメタフィールドの情報が正しいものか確認できるようにしています。

userErrors ブロックには GraphQL の実行中に発生したエラーに関する情報が入ります。

次に、Variables の部分です。

完成形のコードがこちらです。

{
  "metafields": [
    {
      "key": "wishlist_setting",
      "namespace": "wishlist_app",
      "ownerId": "gid://shopify/Shop/67358163174",
      "value": "{\"status\": \"enabled\"}",
      "type": "json"
    }
  ]
}

各設定項目について詳しく見ていきましょう。まず、メタフィールドの keynamespace です。今回は、keywishlist_settingnamespacewishlist_app を指定しています。

次に、ownerId を設定します。以下の GraphQL クエリを実行して shop の id を取得してください。

{
  shop {
    id
  }
}


============================================
実行後のレスポンス

{
  "data": {
    "shop": {
      "id": "gid://shopify/Shop/67358163174"
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 1,
      "actualQueryCost": 1,
      "throttleStatus": {
        "maximumAvailable": 2000,
        "currentlyAvailable": 1895,
        "restoreRate": 100
      }
    }
  }
}

ownerId に、取得した shop の id を設定してください。

次に、value にお気に入り機能に必要な情報を設定します。これには、お気に入り機能が有効かどうかの値が含まれます。

今回は、以下の json データを文字列にエスケープしたものを設定します。

{
  status: 'enabled';
}

上記で作成した Variables を、「Shopify GraphQL App」に設定してください。

右側の実行ボタンをクリックして、GraphQL を実行してください。

GraphQL の実行画面

顧客のメタフィールドにお気に入り商品の情報を設定する

次に、顧客のメタフィールドにお気に入り商品の情報を設定します。

以下の画像は、今回実装する GraphQL コードです。Mutation の部分と Variables の部分で順に解説します。

GraphQL の実行画面

まずは、Mutation の部分です。ストアのメタフィールドを設定したときと同じコードを設定してください。

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      key
      namespace
      value
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
      code
    }
  }
}

次に、Variables の部分です。

完成系のコードがこちらです。

{
  "metafields": [
    {
      "key": "wishlist_product_ids",
      "namespace": "wishlist_app",
      "ownerId": "gid://shopify/Customer/7623442890982",
      "value": "{\"product_ids\": [\"8362227794150\", \"8362227663078\"]}",
      "type": "json"
    }
  ]
}

各設定項目について詳しく見ていきましょう。まず、メタフィールドの key と、namespace です。
今回は、key に、wishlist_product_idsnamespace に、wishlist_app を指定しています。
次に、ownerId を設定します。gid://shopify/Customer/XXXXXXXXXXXXXXXX に該当する顧客の id を設定してください。

value にお気に入り登録したい商品の id を設定します。今回は、以下の json データを文字列にエスケープしたものを設定します。

  {
    "product_ids":["8362227794150","8362227663078"]
  }

上記で作成した Variables を、「Shopify GraphQL App」に設定してください。

右側の実行ボタンをクリックして、実行してください。

GraphQL の実行画面

これで、顧客のメタフィールドにお気に入り商品の情報を設定できました。

次に、アカウントページで、顧客のメタフィールドにお気に入り商品の id が存在する場合、それらのお気に入り商品を表示する処理を追加してください。また、商品ページでお気に入り機能が有効である場合には、お気に入り登録ボタンを表示する処理も実装してください。この処理の詳細は複雑になるため、ここでは具体的な説明を省略します。

ここまででコーディングを用いてセット販売を行う方法は終了です。

アプリを用いてお気に入り(Wishlist)機能を導入する方法

Shopify アプリの「シンプル Wishlist |お手軽お気に入り」を用いて、お気に入り(Wishlist)機能を導入していきます。以下の記事を参考に解説していきます。

Shopify でお気に入り機能は実現できる?アプリの使い方を解説!

シンプル Wishlist |お手軽お気に入り

「シンプル Wishlist |お手軽お気に入り」は、Shopify ストアでお気に入り(Wishlist)機能を簡単に実現できるアプリです。

料金:月額 9.99 ドル(7 日間の無料体験)

※開発ストアでは無料で使用できます。

それでは、実際に解説していきます。

アプリをインストール

まずは、アプリをインストールしていきます。
以下のリンクにアクセスしてください。

「シンプル Wishlist |お手軽お気に入り」アプリストア

以下の画面に遷移します。「インストール」ボタンをクリックしてください。

アプリのインストール画面

以下の画面に遷移します。「インストール」ボタンをクリックして、アプリをインストールしましょう。

アプリをインストールする

以下の管理画面が表示されます。

アプリの管理画面

アプリの有効化

アプリを有効化します。左側のサイドバーの「お気に入り設定」をクリックして、「お気に入り設定」ページに遷移してください。

お気に入り設定画面

「お気に入り機能の有効化」セクションで、お気に入り機能の有効化・無効化を設定できます。

お気に入り機能の有効化・無効化設定

「有効」を選択して、「保存する」ボタンクリックしましょう。

お気に入り機能を有効化する

テーマにお気に入り機能を追加

「テーマにお気に入り機能を追加」セクションでテーマにお気に入り機能を追加していきます。

テーマにお気に入り機能を追加する

アプリを追加したいテーマを選択して、「商品ページに追加」ボタンをクリックすることで、商品ページにお気に入り機能を追加できます。

アプリを商品ページに追加する

「アカウントページに追加」ボタンをクリックすることで、アカウントページにお気に入りリストを追加できます。

アプリをアカウントページに追加する

「ハートアイコンボタンを追加」ボタンをクリックすることで、ハートアイコンボタンを追加できます。

ハートアイコンをボタンを追加する

見た目のカスタマイズ

商品ページ・コレクションページ・アカウントページにて見た目のカスタマイズをします。

商品ページ

商品ページに移動してください。

以下の画像は編集できる箇所を表しています。

お気に入りボタンの高さ・最大幅・文字の大きさ・文字の位置を編集できます。

テーマエディタのお気に入りアプリの設定項目

未お気に入り時のボタンの編集をします。ハートアイコンの色・文字・文字の色・背景色・枠線の太さ・枠線の色・枠線の丸みを編集できます。

テーマエディタのお気に入りアプリの設定項目

お気に入り時のボタンの設定をします。ハートアイコンの色・文字・文字の色・背景色・枠線の太さ・枠線の色・枠線の丸みを編集できます。

テーマエディタのお気に入りアプリの設定項目

ログインポップアップの本文・ボタンの色を編集できます。

テーマエディタのお気に入りアプリの設定項目

上部の余白・下部余白を編集できます。

テーマエディタのお気に入りアプリの設定項目

コレクションページ

コレクションページに移動してください。
左側の埋め込みアプリアイコンをクリックして、埋め込みアプリを表示しましょう。

テーマエディタのお気に入りアプリの設定項目

下矢印ボタンをクリックして、カスタマイズメニューを表示しましょう。

テーマエディタのお気に入りアプリの設定項目

以下の画像は編集できる箇所を表しています。

ハートアイコンボタン設定をします。アイコンの大きさ・色・位置・上部余白・左右余白を編集できます。

テーマエディタのお気に入りアプリの設定項目

ログインポップアップの本文・文字を編集できます。

テーマエディタのお気に入りアプリの設定項目

アカウントページ

アカウントページに移動してください。

以下の画像は編集できる箇所を表しています。

見出し設定をします。見出しの文字、文字の大きさ(パソコン時・スマホ時)、文字の下部余白(パソコン時・スマホ時)を編集できます。

テーマエディタのお気に入りアプリの設定項目

文字の色・枠線の色を編集できます。

テーマエディタのお気に入りアプリの設定項目

お気に入り商品が 0 個時のメッセージを編集できます。

テーマエディタのお気に入りアプリの設定項目

ハートアイコンボタンの編集ができます。

テーマエディタのお気に入りアプリの設定項目

上部余白(パソコン時・スマホ時)、下部余白(パソコン時・スマホ時)の編集ができます。

テーマエディタのお気に入りアプリの設定項目

最後に

今回は、Shopify でお気に入り(Wishlist)機能を導入する 2 つの方法について解説しました。

少しでも、お役に立てれば幸いです。ありがとうございました。

参考記事

おすすめ Shopify アプリ

シンプルブログタグ絞り込み|お手軽タグ一覧挿入のアイコン

シンプルブログタグ絞り込み|お手軽タグ一覧挿入

シンプルなブログ絞り込みアプリ。ストアにタグによるブログ絞り込み機能を簡単に導入できます。

シンプル会員商品割引|お手軽ログイン商品セール設定のアイコン

シンプル会員商品割引|お手軽ログイン商品セール設定

シンプルな日本製の商品割引アプリ。ログインしている顧客を対象とした商品割引を簡単に実現できます。

シンプルボリュームディスカウント|お手軽まとめ買い割引のアイコン

シンプルボリュームディスカウント|お手軽まとめ買い割引

商品毎に、割引テーブルに応じたまとめ買い割引を行えます。

シンプルノベルティ|お手軽ギフト特典のアイコン

シンプルノベルティ|お手軽ギフト特典

シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。

シンプルおひとり様一点限りの購入制限設定のアイコン

シンプルおひとり様一点限りの購入制限設定

シンプルな日本製のおひとり様一点限りの購入制限アプリ。商品毎に、おひとり様一点限りの購入制限を行えます。

シンプル期間限定セール|お手軽バーゲンセールのアイコン

シンプル期間限定セール|お手軽バーゲンセール

「シンプル期間限定セール|お手軽バーゲンセール」は、ストアの全商品に対して期間限定セールを簡単に実現できるアプリです。

シンプルVIP会員商品割引|お手軽VIP商品セール設定のアイコン

シンプルVIP会員商品割引|お手軽VIP商品セール設定

シンプルな日本製の条件に応じた商品割引アプリ。特別な顧客を対象とした商品割引を簡単に実現できます。

シンプル決済カスタマイズ|お手軽条件ごとの決済方法のアイコン

シンプル決済カスタマイズ|お手軽条件ごとの決済方法

シンプルな日本製の決済カスタマイズアプリ。チェックアウト画面で、特定の条件に基づいて、決済方法の非表示を行えます。

シンプル配送カスタマイズ|お手軽条件ごとの配送方法のアイコン

シンプル配送カスタマイズ|お手軽条件ごとの配送方法

シンプルな日本製の配送カスタマイズアプリ。指定した条件下で特定の配送方法を非表示にできます。

シンプルクラウドファンディング|お手軽自社クラファンのアイコン

シンプルクラウドファンディング|お手軽自社クラファン

シンプルなクラウドファンディングアプリ。商品毎にクラウドファンディングを実現できます。

シンプル会員初回注文割引|お手軽初回ログインセール設定のアイコン

シンプル会員初回注文割引|お手軽初回ログインセール設定

シンプルな日本製の条件に応じた注文割引アプリ。ログインしている顧客を対象とした初回購入時の注文割引を簡単に実現できます。

シンプル顧客タグ注文割引|顧客タグ BtoB 割引のアイコン

シンプル顧客タグ注文割引|顧客タグ BtoB 割引

シンプルな日本製の注文割引アプリ。顧客タグに応じて注文を割引したり、無料にしたりできます。

シンプル会員初回送料割引|お手軽初回ログイン送料無料のアイコン

シンプル会員初回送料割引|お手軽初回ログイン送料無料

シンプルな日本製の条件に応じた送料割引アプリ。ログインしている顧客を対象とした初回購入時の配送料割引を簡単に実現できます。

シンプル会員送料割引|お手軽ログイン送料無料のアイコン

シンプル会員送料割引|お手軽ログイン送料無料

シンプルな日本製の会員配送料割引アプリ。ログイン状態に応じて配送料を割引できます。

シンプル会員注文割引|お手軽ログインセール設定のアイコン

シンプル会員注文割引|お手軽ログインセール設定

シンプルな日本製の注文割引アプリ。顧客のログイン状態に応じて注文を自動割引できる。

シンプルセット商品在庫連携|お手軽セット商品管理の自動化のアイコン

シンプルセット商品在庫連携|お手軽セット商品管理の自動化

シンプルな日本製のセット商品在庫連携アプリ。在庫連携したセット商品販売を簡単に実現できます。

シンプルVIP注文割引|お手軽VIP会員セール設定のアイコン

シンプルVIP注文割引|お手軽VIP会員セール設定

シンプルな日本製の条件に応じた注文割引アプリ。特別な顧客を対象とした注文割引を簡単に実現できます。

シンプル延長保証|お手軽保証付き商品販売のアイコン

シンプル延長保証|お手軽保証付き商品販売

シンプルな保証付与アプリ。商品毎に保証付与ができます。

シンプルVIP送料割引|お手軽VIP会員送料無料のアイコン

シンプルVIP送料割引|お手軽VIP会員送料無料

シンプルな日本製の条件に応じた送料割引アプリ。特別な顧客を対象とした配送料割引を簡単に実現できます。

シンプル追従カート|追従購入ボタン(Buy Button)のアイコン

シンプル追従カート|追従購入ボタン(Buy Button)

シンプルな追従カートアプリ。ストアに追従カートを簡単に導入できます。

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料のアイコン

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料

シンプルな日本製の送料割引アプリ。顧客タグに応じて配送料を割引したり、無料にしたりできます。

シンプルパンくずリスト|お手軽 Breadcrumbsのアイコン

シンプルパンくずリスト|お手軽 Breadcrumbs

カスタマイズ性の高いパンくずをストアに表示できる!

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事