>> 【徹底解説】Shopifyを学ぶならデイトラがおすすめ

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

Shopify 商品レビュー product reviews アプリ

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

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

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

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

Shopify飯店

Shopify飯店

 

スポンサーリンク

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

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

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

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

導入手順は以下。

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

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

 

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

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

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

Shopify 商品レビュー product reviews

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

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

Shopify 商品レビュー product reviews

インストールページへと移るので「アプリをインストール」をクリックします。もし、自分のサイトにまだログインをしていない場合は、一度ログインページが表示されます。

Shopify 商品レビュー product reviews

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

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

【現在はLiquidファイルの編集不要で導入可能】
現在では、Liquidファイルを編集せずともProduct Reviewsが導入できるようになっています。「オンラインストア>テーマ>カスタマイズ」で表示される編集画面から、Product Reviewsのアプリブロックを呼び出せるようになっています。
つまり、ノーコードで商品レビュー機能が実装できるようになりました。

 

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

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

Shopify 商品レビュー product reviews

ここには、レビューエリアを表示させるための手順が書かれています。アプリをインストールしただけでは駄目で設定が必要なのですね。

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

公式ヘルプにも解説があります。

では、設定を進めていきます。まずは管理画面から オンラインストア>テーマ を選択します。

Shopify 商品レビュー product reviews

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

Shopify 商品レビュー product reviews

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

Shopify 商品レビュー product reviews

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

Shopify 商品レビュー product reviews

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

Shopify 商品レビュー product reviews

以下のように、コードがたくさん書かれた画面が表示されると思います。

Shopify 商品レビュー product reviews

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

Shopify 商品レビュー product reviews

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

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

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

Shopify 商品レビュー product reviews

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

Shopify 商品レビュー product reviews

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

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

Shopify 商品レビュー product reviews

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

Shopify 商品レビュー product reviews

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

以下のように表示されます。

Shopify 商品レビュー product reviews

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

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

 

スポンサーリンク

Product Reviewsの日本語対応を行う

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

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

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

Shopify 商品レビュー product reviews

 

アプリの管理画面を開く

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

Shopify 商品レビュー product reviews

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

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

Shopify 商品レビュー product reviews

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

Shopify 商品レビュー product reviews

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

ここでは、

  • Review listing text
  • Review form text

という2つの項目を編集して日本語化を行います。

それぞれの項目の説明は次のとおりです。

Review listing text
ストアフロントでお客さんのレビューが表示されているエリアのテキスト

Shopify 商品レビュー product reviews

Review form text
ストアフロントで、お客さんがレビューを書く時の投稿フォームのテキスト

Shopify 商品レビュー product reviews

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

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

Shopify 商品レビュー product reviews

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

Shopify 商品レビュー product reviews

このように他のエリアも日本語化をしていきます。

 

「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」を日本語に翻訳していきます。

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

【Author’s email】
[英語(デフォルト)]
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)

Shopify 商品レビュー product reviews

 

投稿フォームエリア(Review form text)

Shopify 商品レビュー product reviews

 

スポンサーリンク

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

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

Shopify 商品レビュー product reviews

これを商品一覧ページ(shopifyでは「コレクションページ」と呼ばれます)などに表示させることができます。方法は公式ヘルプをご覧ください。

 

スポンサーリンク

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

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

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

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

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

Shopify 商品レビュー product reviews

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

デフォルトは黒なので、オレンジ・イエロー・ゴールドなどの色にしたいですね。

Shopify 商品レビュー product reviews

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

 

スポンサーリンク

参考:Shopifyを学ぶ方法まとめ|本・動画教材・オンラインスクール

Shopify飯店

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。本(参考書)、動画教材(Udemy)、オンラインスクールを活用して、効果的に学習しましょう。

思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

仕事でShopifyを扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。

【関連記事】Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】

Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】
現役フリーランスエンジニアがShopifyの勉強方法をまとめました。オンラインスクールで学ぶ、本で学ぶ、Udemyで学ぶ、公式のYoutubeで学ぶの4つです。おすすめはオンラインスクールで学ぶことです。

【関連記事】【2022年最新】デイトラShopifyコースは買うべき?【レビュー】

デイトラShopifyコースは買うべきか?徹底レビュー【2022年最新】
デイトラShopifyコースを大解剖します。内容、強み、評判、身につくスキルをShopify構築を仕事にしている筆者が解説します。

【関連記事】Shopifyの学習におすすめの動画教材(Udemy)まとめ

【日本語のみ】Shopifyの学習に最適なUdemyの教材まとめ
日本語で受講できるUdemyのShopify講座をまとめました。新講座が出るたびに随時、記事を更新します。初心者向けの講座から上級者向けの講座まで紹介しています。また、筆者が実際にUdemyの講座を受講したレビューも紹介しています。

【関連記事】Shopifyの学習におすすめの本まとめ

Shopifyの学習におすすめの本まとめ【参考書7選を紹介】
本記事ではShopifyを学ぶのにオススメな本・参考書をまとめています。

【関連記事】【Shopifyの独学】勉強方法のまとめ【初心者向け】

【Shopifyの独学】勉強方法のまとめ【初心者向け】
本記事ではShopifyの独学方法をロードマップとしてまとめています。筆者はShopifyを独学して3年ほど経ちました。ノウハウが溜まってきたので、Shopify独学のロードマップを整理して記事にしました。
【Udemyで初めて買う場合はお得!】
初回購入ならShopifyの動画教材が安く買える!
Udemyはほとんど常に、初回購入者向けのセールを開催しています。通常1万〜2万円の商品が初回購入だと2,000円程度で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る icon

 

スポンサーリンク

まとめ

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

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

導入手順は以下です。

①Product Reviews をインストールする
②テーマファイルを編集する(※OnlineStore2.0対応テーマではノーコードで設定可能)
③日本語対応を行う

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

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

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

タイトルとURLをコピーしました