【商品レビュー機能】Product Reviewsの使い方【Shopify公式アプリ】

こんにちは！個人でShopifyを使ったオンラインショップ構築をしていますたかぼー(@taka_forward)です。

お客様から「レビュー機能を実装したい!」という声をいただくので、Shopifyの公式アプリ：Product Reviewsを使ったやり方をまとめてました。

ぺんぎん

商品のレビュー機能をShopifyサイトに付けたいんですが、、。

ぺんぎん

この記事を読めば、Amazonレビューのような機能をShopifyサイトにつけることができますよ〜！

商品レビューアプリ：Product Reviewsとは？？

Shopifyの公式が提供している「商品レビューアプリ」です。アプリのインストール→コードを追加→表記を（英語→日本語）変更するだけでレビュー機能が使えるようになる優れものです。一部の有料テーマ(例：Motion)だとすでにコードがテーマ内に入っているのでアプリをインストールして有効化するだけで使えちゃいます。（しかもレイアウトがかっこいい！）

Product Reviewsの使い方

ここから「アプリのインストール→コードを追加する→表記を（英語→日本語）変更する」のやり方のそれぞれについてみていきましょう。

Product Reviewsのインストール

①管理画面の「アプリ管理」からアプリストアにアクセスし
②「Product Reviews」と検索し、詳細画面から「Add app」→（ページ遷移）→（そのまま）「アプリをインストール」でインストールが完了します。

コードの変更

①編集ファイルを見つけましょう

「アプリをインストール」を押すと、こちらの画面が表示されます。

この画像の指示にそって操作していきます。（この画面は最後の機能有効化にもう一度使うので、ここからの作業は別タブでやることをおすすめします！）

1. 以下のコードをコピーする

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

2. 「Shopifyの管理画面」→「オンラインストア」→「テーマ」→「アクション内、コードを編集する」をクリックします。

コードが大量に書かれたファイルが表示されたかと思います。

3. sectionsフォルダ内のproduct-template.liquidファイルをクリック

これで編集するファイルまでたどり着けました。あとはコードを追加するだけです。

②コードを追加しましょう

※説明通りにやった場合

説明をみると、「{{ product.description }}</div>の後にコピーしたコードを貼り付けてください。」と書いてあるのでそのようにやっていきます。

※Narrativeテーマの場合

画像の指示通りだと、「{{ product.description }}</div>の後にコピーしたコードを貼り付けてください。」とあったのでやってみましたが、Narrativeテーマだとパソコンで閲覧した時に、レイアウトが崩れました。そのため、「②コードを追加→③機能の有効化」の後に画面の表示を確認されることをおすすめします。

※Narrativeテーマの場合、118行目に貼り付ければOKです！（完成コードはこちら↓）

<div class="product__share-wrapper small--hide">
<div class="product__share">
{% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: featured_media %}
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
{% comment %}
------------------------------------------------------------------------------
Product Share Buttons
------------------------------------------------------------------------------
{% endcomment %}

※Supplyテーマの場合

コードとしてすでに実装されているので、「オンラインストアのカスタマイズ」から機能の有効化をチェックするだけで実装が完了します！（Motionテーマもこの方法です）

③機能の有効化をして完了

アプリをインストールしたページの1番した、「Verify and continue」を押して完了です！

ここまでの操作でこのようなメニューが表示されているかと思います。

画面表記を（英語→日本語）に変更する

これで商品レビュー機能の実装は完了しました。

ただ、全て英語になってしまっているので日本語に変更しないといけません。。。アプリの画面から英語で書かれているので大変だと思うのですが、頑張って直していきましょう。（変更文全て記載してますので下記読んでもらえればコピペで実装可能です）

①編集場所

「アプリ管理」→「Product Reviews」→「Settings」で画面を表示させます。

この画面をみるといろいろ書いてあるのですが、1つずつみていきましょう。

②編集内容（ローカライズしたテキスト付き）

Auto Publish

レビューを受け取った際に自動で表示させるかどうかを選択します。

Enabled: スパムでない場合、自動でレビューを表示します

Disabled: 手動によるレビューの表示

Email settings

レビューを受け取った際にメール通知を受け取るかどうかを設定します。（受け取る場合チェックボックスをクリックし、メールアドレスを記入します。）

Star icon color

レビューに表示させる星の色を変更します。

Theme color: テーマに使用している本文の色を設定します

Custom color: 任意の色を設定します

Review listing layout

最初に表示されるレビュー件数の画面の見た目を調整します。

Show reviews on load: レビューがある場合最初からレビューの内容を表示させます（チェックしない場合、画面クリックでレビューの詳細を表示）

Border color: 枠線の色を変更します

Divider color:レビュー内容とタイトルの間にある線の色を変更します

Padding: 枠内の周りの間隔を調整します

Reviews per page(Value between 2 to 100): 1ページあたりに表示させるレビュー数を設定します

Review listing text

最初に表示されるレビュー件数の画面のテキストを変更します。

Review headline: タイトル

（英語）Customer Review（日本語）商品レビュー

Write a review link: クリックでレビュー記載するフォーマットを表示

（英語）Write a review（日本語）レビューを書く

Review summary with no reviews: レビューがない時に表示させる文言

（英語）No reviews yet（日本語）まだレビューがありません

Review summary with 1 or more reviews: レビュー数の合計を表示

（英語）Based on {{product.reviews_count}} {{ product.reviews_count | pluralize: ‘review’, ‘reviews’ }}

（日本語） 合計{{product.reviews_count}} 件のレビュー

→実際の表示は「合計4件のレビュー」となります。

Pagination ‘next’ label: 「次へ」のラベル設定

（英語）Next &raquo; （日本語）次へ &raquo;

※&aquo; は「»」です

Pagination ‘previous’ label: 「前へ」のラベル設定

（英語）&laquo; Previous （日本語）&laquo; 前へ

※&laquo; は「«」です

Report as inappropriate: レビューが不適切だった場合の「報告ボタン」

（英語）Report as Inappropriate （日本語）不適切なレビューとして報告する

Reported as inappropriate message: 「報告ボタン」を押した時に出るメッセージ

（英語）This review has been reported （日本語）不適切なレビューとして報告を受けました。ありがとうございました。

Author information: レビューの記載情報

（英語）<strong>{{ review.author }}</strong> on <strong>{{ review.created_at | date: ‘%b %d, %Y’ }}</strong>
（日本語）投稿日： {{ review.created_at | date: “%Y年%m月%d日” }} 投稿者：{{ review.author }}

→実際の表示は「投稿日： 2020年7月13日 投稿者：たかぼー」となります。

※太字にしたい場合、<strong></strong>で囲ってください。

Review form text

レビューをかくフォーム画面のテキストを変更します。

Show review form on load: チェックした場合、最初からレビューを表示させます。

Author’s email: 投稿者のメールアドレス

（英語）Email（日本語）メールアドレス

Help message(補助テキスト。placeholder):（初期）john.smith@example.com（設定）任意のアドレスを設定してください。ストアに関係あるものだとベターです。

Type: 項目を「required（必須）」「optional（任意）」「hidden（不要）」から選べます

Author’s name: 投稿者の名前

（英語）Name（日本語）お名前

Help message(補助テキスト。placeholder):（初期）Enter your name（設定）任意の名前を設定してください。ストアに関係あるものだとベターです。

Type: 項目を「required（必須）」「optional（任意）」「hidden（不要）」から選べます

Author’s location: 投稿者の場所（初期設定：hidden（表示なし））

設定する場合、Author’s nameと同じように設定していきます。

Review form title: タイトル

（英語）Write a review （日本語）レビューを書く

Review rating: 評価

（英語）Rating （日本語）評価（総合評価などでもいいと思います）

Review title: レビューに記載するタイトル

（英語）Review Title （日本語）タイトル

Help message(補助テキスト。placeholder):（初期）Give your review a title（設定）タイトルを入力してください。

※僕はここのHelp messageを空欄にすることもあるのですが、送信に必須の項目になります。

Review body: レビューに記載する本文

（英語）Body of Review （日本語）本文

Help message(補助テキスト。placeholder):（初期）Write your comments here（設定）レビューを入力してください。

Submit button: 送信ボタン

（英語）Submit Review （日本語）送信する

Success message: 送信成功時に出るメッセージ

（英語）Thank you for submitting a review! （日本語）レビューの送信ありがとうございました。

Error message: 送信失敗時に出るメッセージ

（英語）Not all the fields have been filled out correctly!

（日本語）1：名前・メルアドを必須項目にしている場合

申し訳ありませんが、レビューを送信できませんでした。お手数ですが全ての項目にご記入の上、再度「送信」をお願いできませんでしょうか？

（日本語）２：名前・メルアドを任意項目にしている場合

申し訳ありませんが、レビューを送信できませんでした。お手数ですが、タイトルをご記入の上再度「送信」をお願いできませんでしょうか？

※せっかくレビューを書いてくれたのに「送信失敗」でレビュー書くのを諦めてしまわれるのはもったいないので、このメッセージは丁寧に記載しましょう。

Badge text

Badge with no reviews: レビューがない時に出るメッセージ

（英語）No reviews （日本語）まだレビューがありません

Badge with 1 or more reviews: レビューがある時に出るメッセージ

（英語）{{product.reviews_count}} {{ product.reviews_count | pluralize: ‘review’, ‘reviews’ }} （日本語）合計{{product.reviews_count}} 件のレビュー

ここまでの編集お疲れ様でした。完了したら「Save」で保存して完了です！

Product Reviewsリリース後の運用について

これで「機能の実装」と「見た目の調整」が終わり、使えるようになりました。これで終わりなのですが、運用について触れてこの記事を終わりにしたいと思います。

レビューを書いてもらうようにする

「レビュー機能を実装したのに、レビューが全くない…」という状態では寂しいので、「過去に購入してくれたお客さん」にレビューをしてもらうようにお願いしましょう。

レビューに返信をする

レビューをもらったら返信をすることで、お客さんへの信頼度をアップすることも大事だと思います。

返信方法は、「管理画面ログイン」→「アプリ管理」→「Product Reviews」→「レビューの詳細を表示」からreply to reviewへの入力で返信ができます。

Product Reviewsや商品レビューアプリに関するよくある質問

Shopifyアプリに関する記事はこちら！

アプリの選定、実装、サイト構築のご相談などありましたらお気軽にお問い合わせください！

お問い合わせはこちら！

ビジネスを開始し、成長させて、拡大する – Shopify

オンラインビジネスや小売ビジネスを自分の思い通りに構築できます。どこでも販売でき、いつでもサポートが受けられます。初日でも1,000日目でも、Shopifyがすべてをカバ…

www.shopify.jp