Shopify ストアでレビューを実現する方法を徹底解説！
目次
はじめに
今回は、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: メタフィールドが関連づけられるリソースの IDtype: 保存するデータの型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 を取得します。
ストアの管理画面の左側の「商品管理」をクリックしてください。
レビュー機能を導入したい商品を選択してください。
以下のページの 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 を、画像の赤枠の部分に設定してください。
GraphQL を実行
実行ボタンをクリックして GraphQL 実行してください。
これで商品のメタフィールドにレビューの情報を設定できました。
次に商品ページにて、商品のメタフィールドからレビューの情報を取得して、レビューを表示する処理を追加して下さい。詳しい処理はかなり難しくなるので、ここでは割愛します。
アプリを用いてレビューを実現する方法
Shopify アプリの「シンプルレビュー｜お手軽口コミ」を用いて、レビューを導入します。以下の記事を参考に解説していきます。
Shopify にレビュー機能は導入できる？アプリの使い方も解説！
「シンプルレビュー｜お手軽口コミ」は、Shopify ストアにレビュー機能を導入できるアプリです。
料金：月額 9.99 ドル
※開発ストアは無料で使用できます。
それでは、実際に解説していきます。
アプリのインストール
まずは、アプリをインストールしていきます。以下のリンクにアクセスしてください。
以下の画面に遷移します。「インストール」ボタンをクリックしてください。
「インストール」ボタンをクリックすると以下の画面に遷移します。「インストール」ボタンをクリックして、アプリのインストールを行いましょう。
以下の管理画面が表示されます。
以上で、アプリのインストールは完了です。
アプリをテーマに追加
以下の２つの機能をテーマに追加します。
- レビューサマリ表示機能
- レビュー一覧表示・レビュー投稿機能
「ダッシュボード」ページの「ストアにレビュー機能を表示」セクションから行います。
レビューサマリ表示機能を追加
レビューサマリ表示機能を追加したいテーマを選択し、「レビューサマリ表示機能を追加」の「商品ページに追加」ボタンをクリックすると、テーマにレビューサマリ表示機能が追加できます。
レビューの一覧表示・投稿機能を追加
レビューの一覧表示・投稿機能を追加したいテーマを選択し、「レビュー一覧表示・レビュー投稿機能を追加」の「商品ページに追加」ボタンをクリックすると、テーマにレビュー一覧表示・レビュー投稿機能を追加できます。
以上でアプリをテーマに追加できました。
レビュー商品一覧の確認
レビュー商品一覧の確認を行います。左側のサイドバーの「レビュー管理」をクリックして、「レビュー管理」ページに遷移してください。レビュー管理」ページでは、レビューされた商品を一覧で確認できます。
以上でレビュー商品一覧の確認は完了です。
商品にレビューを投稿
商品にレビューを投稿していきます。ストアフロントの商品ページに移動してください。
この際、「シンプルレビュー｜レビュー一覧」アプリブロックが追加されていることを確認してください。
まず、「レビューを投稿する」ボタンをクリックしてください。
以下のモーダルが表示されます。
レビュー評価・名前・タイトル・内容を入力して、「投稿」ボタンをクリックしてください。
これでレビューが投稿が投稿されました。
以上で商品にレビューを投稿できました。
見た目のカスタマイズ
レビューサマリーとレビュー一覧の見た目のカスタマイズをします。
シンプルレビュー｜レビューサマリ
レビューサマリの表示設定をします。
「シンプルレビュー｜レビューサマリ」ブロックを選択してください。
以下の画像は、編集できる箇所を表しています。
スターの色（活性部分）・スターの色（非活性部分）・大きさが編集できます。
レビュー件数の色・大きさが編集できます。
上下の余白を編集できます。
以上で、レビューサマリの表示設定は完了です。
シンプルレビュー｜レビュー一覧
レビュー一覧の表示設定をします。
「シンプルレビュー｜レビュー一覧」ブロックを選択してください。
以下の画像は、編集できる箇所を表しています。
タイトルの色を編集できます。
ベースの色を編集できます。
スターの色（活性部分）・スターの色（非活性部分）を編集できます。
レビュー一覧タイトル・レビューをすべて表示するボタンのラベルを編集できます。
表示レビュー数を減らすボタンのラベル・表示レビュー数を減らすボタンのラベル色を編集できます。
レビューが存在しない時の表示を編集できます。
ボーダーの色・最初に表示させるレビュー件数を編集できます。
レビュー投稿ボタンのカスタマイズをします。
ラベル・ラベルの色・背景色・枠線の色・丸みを編集できます。
レビュー投稿ボタンのカスタマイズをします。
ラベル・ラベルの色・背景色・枠線の色・丸みを編集できます。
「閉じる」のテキスト・「閉じる」の色を編集できます。
以上で、レビュー一覧の見た目のカスタマイズは完了です。
アプリの詳細な使い方については、以下の記事を参考にしてください。
【Shopify アプリ】シンプルレビュー｜お手軽口コミについて徹底解説｜ご利用ガイド
終わりに
今回は、Shopify ストアで商品のレビューを実現する方法を解説しました。
レビューを導入することで、製品やサービスの改善や売上の増加などに役に立ちます。ぜひ導入してみてください！
最後まで読んでいただきありがとうございました。
参考記事
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
