Shopify ストアでレビューを実現する方法を徹底解説！

はじめに
レビューとは？
レビューのメリット
メタフィールドを用いたコーディングでレビューを実現する方法
- 「Shopify GraphQL App」のインストール
- 商品のメタフィールドにレビューの情報を設定する
アプリを用いてレビューを実現する方法
終わりに

はじめに

今回は、Shopify ストアで商品のレビューを実現する方法について解説していきます。

この記事では、以下の読者を対象にしています。

商品のレビューの機能の概要が知りたい
コーティングで商品のレビューを実現する方法を知りたい
アプリで商品のレビューを実現する方法を知りたい

それでは解説していきます。

レビューとは？

オンラインストアを運営するうえで、レビューは非常に重要な役割を果たします。レビューとは、消費者が商品やサービスを使用した後に残すフィードバックや評価のことを指します。レビューは、他の顧客が購入前に商品やサービスについて情報を得るのに役立ちます。

レビューのメリット

レビューはただのフィードバック以上の価値を持っています。顧客だけでなく、ビジネスオーナーにとっても多くのメリットがあります。

顧客の信頼を築く

レビューは潜在的な顧客にとって、製品やサービスの品質を判断する重要な手がかりとなります。実際の使用者からの正直な意見は、新しい顧客がその商品やサービスを信頼する上で大きな役割を果たします。

製品やサービスの改善

顧客からのフィードバックは、製品やサービスの欠点を指摘し、改善の機会を提供します。ビジネスオーナーはレビューを分析し、顧客のニーズに応じて適切な調整を行うことができます。

売上の増加

ポジティブなレビューは、購入を検討している他の顧客に対する強力な推奨効果を与えるため、売上の向上に寄与します。

メタフィールドを用いたコーディングでレビューを実現する方法

Shopify のメタフィールドを用いたコーディングで商品のレビューを実現する方法を解説します。

「Shopify GraphQL App」のインストール

まず、GraphQL を用いてメタフィールドを作成するために、「Shopify GraphQL App」をインストールする必要があります。

まずは、「Shopify GraphQL App」にアクセスして以下のページに遷移します。このアプリは Shopify が提供するもので、ストア上で GraphQL を使用できるようにします。

次に、アプリのページで「Install」セクションを見つけ、Shopify の開発ストアの URL を入力します。

最後に、「Select all」をクリックし、その後に「インストール」ボタンを押すことで、Shopify の開発ストアにアプリをインストールします。

以上で、「Shopify GraphQL App」のインストールは終了です。

商品のメタフィールドにレビューの情報を設定する

商品のメタフィールドに、レビューの情報を設定します。メタフィールドの設定には GraphQL の Mutation を使用します。

Mutation の設定

GraphQL の Mutation を用いてメタフィールドを設定します。以下のコードを GraphQL App のエディタに貼り付けます。

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

引数

今回は、metafieldsSet API を用いてメタフィールドの値を作成または更新します。以下の引数が必要です。

key: メタフィールドを一意に識別するキー
namespace: メタフィールドを分類するための名前空間
ownerId: メタフィールドが関連づけられるリソースの ID
type: 保存するデータの型
value: 実際に保存されるデータの内容

戻り値

Mutation の実行結果として、metafields ブロック内のメタフィールドの詳細情報と、userErrors ブロック内のエラーに関する情報が返却されます。

metafields ブロック内には以下のデータが含まれます。

key: メタフィールドの一意識別子。メタフィールドを識別するためのキー
namespace: メタフィールドが属する名前空間
value: メタフィールドに設定された具体的な値
createdAt: メタフィールドが作成された日時
updatedAt: メタフィールドが最後に更新された日時

userErrors ブロック内には以下のデータが含まれます。

field: エラーが発生した入力フィールド
message: エラーの内容を説明するメッセージ
code: エラーを特定するためのコード

Variables の設定

Variables セクションには、メタフィールドに設定する具体的な情報を記述します。

設定完了後のコードの例がこちらです。

{
  "metafields": [
    {
      "key": "review_data",
      "namespace": "review_app",
      "ownerId": "gid://shopify/Product/8362227794150",
      "value": "{\"reviews\": [{\"id\": 1, \"reviewer\": \"田中\", \"star\": 3, \"title\": \"デザインが良かった\", \"content\": \"見た目のデザインが良く気に入っています。\", \"reviewed_datetime\": \"2023-10-10\", \"reply\": \"ありがとうございます。\", \"replied_datetime\": \"2023-10-11\"}, {\"id\": 2, \"reviewer\": \"佐藤\", \"star\": 1, \"title\": \"デザインが良くない\", \"content\": \"見た目のデザインが良くなかった。\", \"reviewed_datetime\": \"2023-10-10\", \"reply\": \"貴重なご意見をありがとうございます。\", \"replied_datetime\": \"2023-10-11\"}]}",
      "type": "json"
    }
  ]
}

各設定項目について見ていきましょう。このコードでは、メタフィールドの key は review_data に、namespace は review_app を指定しています。これらはメタフィールドを識別するための重要なパラメータです。

次に ownerId です。ownerId は、メタフィールドが関連づけられる Shopify のリソースを指します。まず、商品の id を取得します。

ストアの管理画面の左側の「商品管理」をクリックしてください。

商品の id を取得

レビュー機能を導入したい商品を選択してください。

以下のページの URL の末尾の数字が商品 id です。

gid://shopify/Product/XXXXXXXXXX の XXXXXXXXX に取得した商品の id を設定してください。

次に、value にレビューの情報を設定します。今回は、以下の JSON データを文字列形式に変換したものを設定します。

{
  reviews: [
    {
      "id": 1,
      "reviewer": "田中",
      "star": 3,
      "title": "デザインが良かった",
      "content": "見た目のデザインが良く気に入っています。",
      "reviewed_datetime":　2023-10-10
      "reply": "ありがとうございます。",
      "replied_datetime": 2023-10-11
    },
    {
      "id": 1,
      "reviewer": "佐藤",
      "star": 1,
      "title": "デザインが良くない",
      "content": "見た目のデザインが良くなかった。",
      "reviewed_datetime":　2023-10-10
      "reply": "貴重なご意見をありがとうございます。",
      "replied_datetime": 2023-10-11
    }
  ]
}

上記で作成した Variables を、画像の赤枠の部分に設定してください。