hiro 
Shopifyで作ったECサイトに商品レビュー機能を導入したい。具体的な方法を教えて欲しい。
こんなことを考えている人はいませんか？
この記事を読むことで以下が分かります。
・アプリを利用してShopifyに商品レビュー機能を導入する方法
・レビュー機能アプリ「Product Reviews」をカスタマイズする方法
この記事を書いている私は大阪在住のフリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、ブログを書いたりして生活しています。
先日こんなツイートをしました。
この記事では上記のツイートを掘り下げます。
Shopifyで作ったECサイトに商品レビュー機能を導入する方法
ECサイトにおいて商品レビュー機能は重要です。
商品やサイトの信頼性を担保してくれますし、CVR（コンバージョンレート）の向上、返品率軽減が期待できます。また、お客様の声は商品改善の宝庫です。
Shopifyでは「Product Reviews」という無料のアプリを使って、商品レビューの機能を簡単に導入することができます。
導入手順は以下。
順番に解説していきます。
「Product Reviews」をインストールする
まずは「Shopifyのアプリストア」にアクセスし、「Product Reviews」で検索をかけます。
何件かHITするのですが、赤で囲んだアプリが「Product Reviews」です。これをクリックします。
アプリの紹介ページに移動するので、「Add app」をクリックします。
アプリの利用は無料です。
インストールページへと移るので「アプリをインストール」をクリックします。
もし、自分のサイトにまだログインをしていない場合は、一度ログインページが表示されます。
インストールはこれで完了です。
このあとはテーマファイルを少し編集して、レビューエリアを商品詳細ページに表示させます。
テーマファイルを編集する
インストールが完了すると以下の画面が表示されます。
ここには、レビューエリアを表示させるための手順が書かれています。
アプリをインストールしただけでは駄目で設定が必要なのですね。
アプリは日本語対応していないため、すべてが英語表記です。書かれている内容は、「テーマファイルを編集してくださいね」的なことです。
それでは画像付きで解説します。
なお、公式ヘルプの「Product Reviewsアプリを使用する」にも解説があります。
まずは、管理画面から オンラインストア＞テーマ を選択します。
続いて アクション＞コードを編集する を選択します。
すると、以下のような「テンプレートファイルを編集する」という画面に変わります。
左にあるサイドメニューの中にある「Sections」を開きます。
その中にある「product-template.liquid」を開きます。
（↓）のようなコードがたくさん書かれた画面が表示されると思います。
この画面で検索（ctl+F）バーを開き、 {{ product.description }} を検索します。すると、以下のように検索がHITします。
この {{ product.description }} の下にある「</div>」の下に、以下のコードを貼り付けます。
<div id="shopify-product-reviews" data-id="{{product.id}}">
{{ product.metafields.spr.reviews }}
</div>貼り付けた状態がこちら。
最後に「保存する」を押します。
「Asset saved」と表示されれば終了です。
これで商品ページにレビューエリアが表示されるようになりました。
実際に商品ページを見てみると、商品説明のエリアに下に「CUSTOMER REVIEWS」という商品レビューのエリアが表示されていることがわかります。
「Write a review」を押して、試しにレビューを書いてみました。
フロントでは以下のように表示されます。
ただ、このままではレビュー投稿フォームやフロントでの表示が英語です。
次はこれを日本語化していきます。
Product Reviewsの日本語対応を行う
「Product Reviews」をインストールしてテーマファイルを編集することで、商品ページにレビュー一覧とレビュー投稿フォームを設置できます。
ですが、このままだと表記が英語なんですよね。
これを日本語に変えていきます。
アプリの管理画面を開く
まずは、ダッシュボード＞アプリ管理を押下。
インストール済みのアプリ一覧が表示されます。
一覧の中から「Product Reviews」をクリックします。
アプリの設定画面の右上にある「setting」をクリックします。
すると、細かいカスタマイズ画面に移ります。
「Review listing text」と「Review form text」の項目を編集して日本語化を行います。
| Review listing text | レビュー表示エリアを編集できる |
| Review form text | レビュー投稿フォームを編集できる |
たとえば「Review listing text」の「Review headline」にはデフォルトで「Customer Reviews」と入っています。
これは、フロントでは以下のエリアに対応しています。
なので、この部分を「Customer Reviews」から「商品レビュー」に変えると、フロントも以下のように変わります。
この要領で他のエリアも日本語化をしていきます。
「Review listing text」を日本語に翻訳する
「Review listing text」を日本語に翻訳していきます。
以下の例はあくまで一例です。
- Review listing text
| 項目名 | 英語（デフォルト） | 日本語（翻訳） |
|---|---|---|
| Review headline | Customer Reviews | 商品レビュー |
| 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}}件の{{ product.reviews_count | pluralize: ‘レビュー’, ‘レビュー’ }} |
| Pagination ‘next’ label | Next & raquo; （※実際に入力する際は「&」と「r」の間の半角スペースをなくしてください） | 次へ & raquo; （※実際に入力する際は「&」と「r」の間の半角スペースをなくしてください） |
| Pagination ‘previous’ label | & laquo; Previous （※実際に入力する際は「&」と「l」の間の半角スペースをなくしてください） | & laquo; 前へ （※実際に入力する際は「&」と「l」の間の半角スペースをなくしてください） |
| Report as inappropriate | Report as Inappropriate | 不適切なレビューとして報告する |
| Reported as inappropriate message | This review has been reported | 不適切なレビューとして報告しました |
| Author information | {{ review.author }} on {{ review.created_at | date: ‘%b %d, %Y’ }} | 投稿者：{{ review.author }}さん 投稿日：{{ review.created_at | date: ‘%Y 年 %m 月 %d 日’ }} |
「Review form text」を日本語に翻訳する
「Review form text」を日本語に翻訳していきます。
以下の例はあくまで一例です。
- Review form text
| 項目名 | 英語（デフォルト） | 日本語（翻訳） |
|---|---|---|
| Author’s email | メールアドレス | |
| Help message | john.smith@example.com | your@email.com |
| Type | required | optional （※デフォルトはメールアドレスの入力が必須（required）なので、任意（optional）に変更） |
| Author’s name | Name | ニックネーム |
| Help message | Enter your name | ニックネームを記入してください |
| Type | required | required （※デフォルトは投稿者名の入力が必須（required）なのですが、ここは変えずにそのまま） |
| Review form title | Write a review | （※空欄にする） |
| Review rating | Rating | 評価 |
| Review title | Review Title | タイトル |
| Help message | Give your review a title | 一番伝えたいポイントをご記入ください |
| Review body | Body of Review | 本文 |
| Help message | 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! | 入力内容をご確認ください。 |
| Badge with no reviews | No reviews | まだ商品レビューはありません |
| Badge with 1 or more reviews | {{product.reviews_count}} {{ product.reviews_count | pluralize: ‘review’, ‘reviews’ }} | {{product.reviews_count}}件の{{ product.reviews_count | pluralize: ‘レビュー’, ‘レビュー’ }} |
日本語への翻訳が終わった状態はこちら
レビュー表示エリア（Review listing text）と投稿フォームエリア（Review form text）の日本語への翻訳が終わった状態はこちらです。
フロントではこのように表示されます。
- レビュー表示エリア（Review listing text）
- 投稿フォームエリア（Review form text）
レビュースコアバッジを表示させる方法
レビューのスコアバッジというのは以下の★のことを指します。
これを商品一覧ページ（shopifyでは「コレクションページ」と呼ばれます）などに表示させることができます。
それぞれの方法は、公式ヘルプの以下にまとめられています。
レビュー機能アプリ「Product Reviews」を更にカスタマイズする方法
アプリの設定画面（下記参照）では、様々なカスタマイズが可能です。
たとえば「Auto publish」は「Disabled」にして、投稿されたレビューが自動で表示されないようにした方が良いです。
この設定を行うことで、投稿されたレビューの公開が手動になります。
事前に内容をチェックして、公序良俗に反するコメントやお客様にとって有益でないレビューなどがないかを確認できるようになります。
また、五段階評価の★の色も変えることができます。
デフォルトは黒なので、オレンジ色（プラスの感情を与える色）とかにしたいですね。
「Product Reviews」のカスタマイズ方法については、shopify公式ヘルプの以下のページにまとめられています。
Shopifyの理解・学習に役立つ方法まとめ
Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。
- デイトラで学ぶ
デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。「Shopify EC構築コース」では、HTML/CSSの基礎からWordPressのオリジナルテーマ制作までを学ぶことができます。サポート体制も充実しており、Slackでプロのエンジニアによるアドバイスやフィードバックを受けることができます。
- 本で学ぶ
「商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは？という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。
2021年くらいからShopifyの日本語教材も充実してきました。
下記の2冊もおすすめです。
- 動画で学ぶ
Udemyの「Shopifyでクライアントのストアを作る人のための講座
」がオススメです！ 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。
【Udemyがセール中（2022年4月13日（水）まで！】
対象コースが ￥1,700から。
2022年4月13日（水）まで！【Udemy】セール中のShopifyの講座一覧を見る >>
まとめ
この記事のポイントをまとめます。
Shopifyでは「Product Reviews」という無料のアプリを使って、商品レビューの機能を簡単に導入することができます。
導入手順は以下です。
- Product Reviews をインストールする
- テーマファイルを編集する
- 日本語対応を行う
なお、導入においてはテーマファイル（product-template.liquid）の編集が必要です。間違ってコードを消さないようにご注意ください。
Product Reviewsのインストールはこちらです。
関連するShopify公式ヘルプページは以下です。
今回の記事はここまでです。