サムネイル

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

目次

はじめに

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

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

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

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

レビューとは?

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

レビューのメリット

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

  • 顧客の信頼を築く

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

  • 製品やサービスの改善

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

  • 売上の増加

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

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

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

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

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

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

Shopify GraphQL App 画面に遷移

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

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
    }
  }
}

GraphQL App エディタに貼り付け

引数

今回は、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"
    }
  ]
}

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

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

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

商品の id を取得

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

レビュー機能追加商品を選択

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

商品 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 を、画像の赤枠の部分に設定してください。

Variables の設定

GraphQL を実行

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

GraphQL の実行

これで商品のメタフィールドにレビューの情報を設定できました。

次に商品ページにて、商品のメタフィールドからレビューの情報を取得して、レビューを表示する処理を追加して下さい。詳しい処理はかなり難しくなるので、ここでは割愛します。

アプリを用いてレビューを実現する方法

Shopify アプリの「シンプルレビュー|お手軽口コミ」を用いて、レビューを導入します。以下の記事を参考に解説していきます。

Shopify にレビュー機能は導入できる?アプリの使い方も解説!

アプリストア画面

「シンプルレビュー|お手軽口コミ」は、Shopify ストアにレビュー機能を導入できるアプリです。

料金:月額 9.99 ドル

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

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

アプリのインストール

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

「シンプルレビュー|お手軽口コミ」アプリストア

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

インストールボタンをクリック

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

アプリをインストール

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

管理画面表示

以上で、アプリのインストールは完了です。

アプリをテーマに追加

以下の2つの機能をテーマに追加します。

  • レビューサマリ表示機能
  • レビュー一覧表示・レビュー投稿機能

「ダッシュボード」ページの「ストアにレビュー機能を表示」セクションから行います。

ストアにレビュー機能を表示セクション

レビューサマリ表示機能を追加

レビューサマリ表示機能を追加したいテーマを選択し、「レビューサマリ表示機能を追加」の「商品ページに追加」ボタンをクリックすると、テーマにレビューサマリ表示機能が追加できます。

アプリをテーマに追加2

レビューの一覧表示・投稿機能を追加

レビューの一覧表示・投稿機能を追加したいテーマを選択し、「レビュー一覧表示・レビュー投稿機能を追加」の「商品ページに追加」ボタンをクリックすると、テーマにレビュー一覧表示・レビュー投稿機能を追加できます。

アプリをテーマに追加3

以上でアプリをテーマに追加できました。

レビュー商品一覧の確認

レビュー商品一覧の確認を行います。左側のサイドバーの「レビュー管理」をクリックして、「レビュー管理」ページに遷移してください。レビュー管理」ページでは、レビューされた商品を一覧で確認できます。

レビューされた商品を一覧で確認

以上でレビュー商品一覧の確認は完了です。

商品にレビューを投稿

商品にレビューを投稿していきます。ストアフロントの商品ページに移動してください。

この際、「シンプルレビュー|レビュー一覧」アプリブロックが追加されていることを確認してください。

アプリブロックが追加されていることを確認

まず、「レビューを投稿する」ボタンをクリックしてください。

レビューを投稿するボタンをクリック

以下のモーダルが表示されます。

モーダル表示

レビュー評価・名前・タイトル・内容を入力して、「投稿」ボタンをクリックしてください。

投稿ボタンをクリック

これでレビューが投稿が投稿されました。

レビューを投稿

以上で商品にレビューを投稿できました。

見た目のカスタマイズ

レビューサマリーとレビュー一覧の見た目のカスタマイズをします。

シンプルレビュー|レビューサマリ

レビューサマリの表示設定をします。
「シンプルレビュー|レビューサマリ」ブロックを選択してください。

シンプルレビュー | レビューサマリブロックを選択

以下の画像は、編集できる箇所を表しています。
スターの色(活性部分)・スターの色(非活性部分)・大きさが編集できます。

編集できる箇所を表示

レビュー件数の色・大きさが編集できます。

レビュー件数の色大きさ編集

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

上下の余白を編集

以上で、レビューサマリの表示設定は完了です。

シンプルレビュー|レビュー一覧

レビュー一覧の表示設定をします。
「シンプルレビュー|レビュー一覧」ブロックを選択してください。

シンプルレビュー | レビュー一覧ブロックを選択

以下の画像は、編集できる箇所を表しています。
タイトルの色を編集できます。

タイトルの色を編集

ベースの色を編集できます。

ベースの色を編集

スターの色(活性部分)・スターの色(非活性部分)を編集できます。

スターの色を編集

レビュー一覧タイトル・レビューをすべて表示するボタンのラベルを編集できます。

ボタンのラベルを編集

表示レビュー数を減らすボタンのラベル・表示レビュー数を減らすボタンのラベル色を編集できます。

レビューを減らすボタンのラベル色を編集

レビューが存在しない時の表示を編集できます。

レビューが存在しない表示を編集

ボーダーの色・最初に表示させるレビュー件数を編集できます。

レビュー件数の編集

レビュー投稿ボタンのカスタマイズをします。
ラベル・ラベルの色・背景色・枠線の色・丸みを編集できます。

レビュー投稿ボタンのカスタマイズ

レビュー投稿ボタンのカスタマイズをします。

ラベル・ラベルの色・背景色・枠線の色・丸みを編集できます。

レビュー投稿ボタンのカスタマイズ

「閉じる」のテキスト・「閉じる」の色を編集できます。

閉じるテキスト編集

以上で、レビュー一覧の見た目のカスタマイズは完了です。

アプリの詳細な使い方については、以下の記事を参考にしてください。

【Shopify アプリ】シンプルレビュー|お手軽口コミについて徹底解説|ご利用ガイド

終わりに

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

レビューを導入することで、製品やサービスの改善や売上の増加などに役に立ちます。ぜひ導入してみてください!

最後まで読んでいただきありがとうございました。

参考記事

おすすめ 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 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

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

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

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

おすすめ記事