Shopifyで作ったECサイトに商品レビュー機能を導入する方法

shopify

Shopifyで作ったECサイトに商品レビュー機能を導入したい。具体的な方法を教えて欲しい。

こんなことを考えている人はいませんか?

この記事を読むことで以下が分かります。

・アプリを利用してShopifyに商品レビュー機能を導入する方法
・レビュー機能アプリ「Product Reviews」をカスタマイズする方法

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、ブログを書いたりして生活しています。

先日こんなツイートをしました。

「Product Reviews」という無料アプリを使えば、shopifyに商品レビュー機能を導入できます。
レビューはやっぱり重要で、商品&サイトの信頼性を担保してくれます。
ただ、投稿フォームが英語なので日本語化する必要あり。
あと、テーマファイルも弄る必要あり。

この記事では上記のツイートを掘り下げます。

Shopifyで作ったECサイトに商品レビュー機能を導入する方法

ECサイトにおいて商品レビュー機能は重要です。

商品やサイトの信頼性を担保してくれますし、CVR(コンバージョンレート)の向上、返品率軽減が期待できます。また、お客様の声は商品改善の宝庫です。

Shopifyでは「Product Reviews」という無料のアプリを使って、商品レビューの機能を簡単に導入することができます。

導入手順は以下。

Product Reviews」をインストールする
テーマファイルを編集する
日本語対応を行う

順番に解説していきます。

「Product Reviews」をインストールする

まずは「Shopifyのアプリストア」にアクセスし、「Product Reviews」で検索をかけます。

何件かHITするのですが、赤で囲んだアプリが「Product Reviews」です。これをクリックします。

shopify

アプリの紹介ページに移動するので、「Add app」をクリックします。

アプリの利用は無料です。

shopify

インストールページへと移るので「アプリをインストール」をクリックします。

もし、自分のサイトにまだログインをしていない場合は、一度ログインページが表示されます。

shopify

インストールはこれで完了です。

このあとはテーマファイルを少し編集して、レビューエリアを商品詳細ページに表示させます。

テーマファイルを編集する

インストールが完了すると以下の画面が表示されます。

shopify

ここには、レビューエリアを表示させるための手順が書かれています。

アプリをインストールしただけでは駄目で設定が必要なのですね。

アプリは日本語対応していないため、すべてが英語表記です。書かれている内容は、「テーマファイルを編集してくださいね」的なことです。

それでは画像付きで解説します。

なお、公式ヘルプの「Product Reviewsアプリを使用する」にも解説があります。

まずは、管理画面から オンラインストア>テーマ を選択します。

shopify

続いて アクション>コードを編集する を選択します。

shopify

すると、以下のような「テンプレートファイルを編集する」という画面に変わります。

shopify

左にあるサイドメニューの中にある「Sections」を開きます。

shopify

その中にある「product-template.liquid」を開きます。

shopify

(↓)のようなコードがたくさん書かれた画面が表示されると思います。

shopify

この画面で検索(ctl+F)バーを開き、 {{ product.description }} を検索します。すると、以下のように検索がHITします。

shopify

この {{ product.description }} の下にある「</div>」の下に、以下のコードを貼り付けます。

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

貼り付けた状態がこちら。

shopify

最後に「保存する」を押します。

shopify

「Asset saved」と表示されれば終了です。

これで商品ページにレビューエリアが表示されるようになりました。

shopify

実際に商品ページを見てみると、商品説明のエリアに下に「CUSTOMER REVIEWS」という商品レビューのエリアが表示されていることがわかります。

shopify

「Write a review」を押して、試しにレビューを書いてみました。

フロントでは以下のように表示されます。

shopify

ただ、このままではレビュー投稿フォームやフロントでの表示が英語です。

次はこれを日本語化していきます。

Product Reviewsの日本語対応を行う

「Product Reviews」をインストールしてテーマファイルを編集することで、商品ページにレビュー一覧とレビュー投稿フォームを設置できます。

ですが、このままだと表記が英語なんですよね。

shopify

これを日本語に変えていきます。

アプリの管理画面を開く

まずは、ダッシュボード>アプリ管理を押下。

shopify

インストール済みのアプリ一覧が表示されます。

一覧の中から「Product Reviews」をクリックします。

shopify

アプリの設定画面の右上にある「setting」をクリックします。

shopify

すると、細かいカスタマイズ画面に移ります。

「Review listing text」と「Review form text」の項目を編集して日本語化を行います。

Review listing textレビュー表示エリアを編集できる
shopify
Review form textレビュー投稿フォームを編集できる
shopify

たとえば「Review listing text」の「Review headline」にはデフォルトで「Customer Reviews」と入っています。

これは、フロントでは以下のエリアに対応しています。

shopify

なので、この部分を「Customer Reviews」から「商品レビュー」に変えると、フロントも以下のように変わります。

shopify

この要領で他のエリアも日本語化をしていきます。

「Review listing text」を日本語に翻訳する

「Review listing text」を日本語に翻訳していきます。

以下の例はあくまで一例です。

  • Review listing text
項目名英語(デフォルト)日本語(翻訳)
Review headlineCustomer Reviews商品レビュー
Write a review linkWrite a review商品レビューを書く
Review summary with no reviewsNo reviews yetまだ商品レビューはありません
Review summary with 1 or more reviewsBased on {{product.reviews_count}} {{ product.reviews_count | pluralize: ‘review’, ‘reviews’ }}{{product.reviews_count}}件の{{ product.reviews_count | pluralize: ‘レビュー’, ‘レビュー’ }}
Pagination ‘next’ labelNext & raquo;
(※実際に入力する際は「&」と「r」の間の半角スペースをなくしてください)
次へ & raquo;
(※実際に入力する際は「&」と「r」の間の半角スペースをなくしてください)
Pagination ‘previous’ label& laquo; Previous

(※実際に入力する際は「&」と「l」の間の半角スペースをなくしてください)
& laquo; 前へ

(※実際に入力する際は「&」と「l」の間の半角スペースをなくしてください)
Report as inappropriateReport as Inappropriate不適切なレビューとして報告する
Reported as inappropriate messageThis 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 emailEmailメールアドレス
Help messagejohn.smith@example.comyour@email.com
Typerequiredoptional

(※デフォルトはメールアドレスの入力が必須(required)なので、任意(optional)に変更)
Author’s nameNameニックネーム
Help messageEnter your nameニックネームを記入してください
Typerequiredrequired

(※デフォルトは投稿者名の入力が必須(required)なのですが、ここは変えずにそのまま)
Review form titleWrite a review(※空欄にする)
Review ratingRating評価
Review titleReview Titleタイトル
Help messageGive your review a title一番伝えたいポイントをご記入ください
Review bodyBody of Review本文
Help messageWrite your comments hereレビューの内容をご記入ください
Submit buttonSubmit Reviewレビューを投稿する
Success messageThank you for submitting a review!レビューの投稿ありがとうございます。表示されるまでには数日かかります。
Error messageNot all the fields have been filled out correctly!入力内容をご確認ください。
Badge with no reviewsNo 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)
shopify
  • 投稿フォームエリア(Review form text)
shopify

レビュースコアバッジを表示させる方法

レビューのスコアバッジというのは以下の★のことを指します。

shopify

これを商品一覧ページ(shopifyでは「コレクションページ」と呼ばれます)などに表示させることができます。

それぞれの方法は、公式ヘルプの以下にまとめられています。

レビュー機能アプリ「Product Reviews」を更にカスタマイズする方法

アプリの設定画面(下記参照)では、様々なカスタマイズが可能です。

たとえば「Auto publish」は「Disabled」にして、投稿されたレビューが自動で表示されないようにした方が良いです。

この設定を行うことで、投稿されたレビューの公開が手動になります。

事前に内容をチェックして、公序良俗に反するコメントやお客様にとって有益でないレビューなどがないかを確認できるようになります。

shopify

また、五段階評価の★の色も変えることができます。

デフォルトは黒なので、オレンジ色(プラスの感情を与える色)とかにしたいですね。

shopify

「Product Reviews」のカスタマイズ方法については、shopify公式ヘルプの以下のページにまとめられています。

Shopifyでのサイト構築を学ぶおすすめの方法

Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。

  • オンラインスクールで学ぶ

TechAcademy(テックアカデミー)に、専属のパーソナルメンターがマンツーマンでサポートする「Shopifyコース」が誕生しました。
安い買い物ではないので、TechAcdemyの講座を無料体験で試してみるのがおすすめです。

  • 本で学ぶ

商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは?という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。

  • 動画で学ぶ

Udemyの「Shopifyでクライアントのストアを作る人のための講座 」がオススメです! 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。

【Udemyがセール中(2021年7月30日(金)まで)】
対象コースが ¥1,730から。
2021年7月30日(金)まで!【Udemy】セール中のShopifyの講座一覧を見る >>

まとめ

この記事のポイントをまとめます。

Shopifyでは「Product Reviews」という無料のアプリを使って、商品レビューの機能を簡単に導入することができます。

導入手順は以下です。

  • Product Reviews をインストールする
  • テーマファイルを編集する
  • 日本語対応を行う

なお、導入においてはテーマファイル(product-template.liquid)の編集が必要です。間違ってコードを消さないようにご注意ください。

Product Reviewsのインストールはこちらです。

関連するShopify公式ヘルプページは以下です。

今回の記事はここまでです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。