hiro 
shopifyで作ったECサイトに商品レビュー機能を導入したい。具体的な方法を教えて欲しい
こんなことを考えている人はいませんか？
この記事を読むことで以下が分かります。
・アプリを利用してshopifyに商品レビュー機能を導入する方法
・レビュー機能アプリ「Product Reviews」をカスタマイズする方法
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、ブログを書いたりして生活しています。
先日こんなツイートをしました。
「Product Reviews」という無料アプリを使えば、shopifyに商品レビュー機能を導入できます。
レビューはやっぱり重要で、商品＆サイトの信頼性を担保してくれます。ただ、投稿フォームが英語なので日本語化する必要あり。
あと、テーマファイルも弄る必要あり。https://t.co/wDEpRTeld3— hiro_hitoritabi (@hiro_hitoritabi) May 12, 2020
この記事では上記のツイートを掘り下げます。
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」をクリックします。
アプリの設定画面の右上にある「setting」をクリックします。
すると、細かいカスタマイズ画面に移ります。
色々項目はありますが、「Review listing text」と「Review form text」の項目を編集することで、最低限の日本語化ができます。
| Review listing text | レビュー表示エリアを編集できる |
|---|
| Review form text | レビュー投稿フォームを編集できる |
|---|
たとえば、Review listing text＞Review headline にはデフォルトで「Customer Reviews」と入っています。
これは、フロントでは以下のエリアに対応しています。
なので、この部分を「Customer Reviews」から「商品レビュー」に変えると、フロントも以下のように変わります。
この要領で他のエリアも日本語化した状態が以下です。
まずは投稿フォーム。
続いてレビュー表示エリア。
レビュースコアバッジを表示させる方法
レビューのスコアバッジというのは以下の★のことを指します。
これを商品一覧ページ（shopifyでは「コレクションページ」と呼ばれます）などに表示させることができます。
それぞれの方法は公式ヘルプの以下にまとめられています。
レビュー機能アプリ「Product Reviews」をカスタマイズする方法
アプリの設定画面（下記参照）では、様々なカスタマイズが可能です。
本記事で紹介したテキストの日本語化をはじめ、五段階評価の★の色も変えることができます。デフォルトは黒なので、オレンジ色とかにしたいですね。
「Product Reviews」のカスタマイズ方法については、shopify公式ヘルプの以下のページにまとめられています。
まとめ
この記事のポイントをまとめます。
shopifyでは「Product Reviews」という無料のアプリを使って、商品レビューの機能を簡単に導入することができます。
導入手順は以下です。
[box02 title=”POINT”]
- 「Product Reviews」をインストールする
- テーマファイルを編集する
- 日本語対応を行う
[/box02]
なお、導入においてはテーマファイル（product-template.liquid）の編集が必要です。間違ってコードを消さないようにご注意ください。
関連するshopify公式ヘルプページは以下です。
今回はここまで！
チャオ！
