Shopify でお気に入り（Wishlist）機能を実現する方法を徹底解説！

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

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

お気に入り（Wishlist）機能とは？
お気に入り（Wishlist）機能のメリット
メタフィールドを用いたコーディングでお気に入り（Wishlist）機能を導入する方法
- ストアのメタフィールドにお気に入り機能の情報を設定する
- 顧客のメタフィールドにお気に入り商品の情報を設定する
アプリを用いてお気に入り（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 ブロックには、登録されたメタフィールドの情報が入ります。
今回は、key・namespace・value を指定して登録されたメタフィールドの情報が正しいものか確認できるようにしています。

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

次に、Variables の部分です。

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

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

各設定項目について詳しく見ていきましょう。まず、メタフィールドの key と namespace です。今回は、key に wishlist_setting、namespace に wishlist_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_ids、namespace に、wishlist_app を指定しています。
次に、ownerId を設定します。gid://shopify/Customer/XXXXXXXX の XXXXXXXX に該当する顧客の id を設定してください。

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

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

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

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

GraphQL の実行画面

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

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

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