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

shopify

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

こんなことを考えている人はいませんか?
この記事を読むことで以下が分かります。

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

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

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

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

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

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

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

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

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

導入手順は以下。

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

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

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

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

shopify

何件か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」をインストールしてテーマファイルを編集することで、商品ページにレビュー一覧とレビュー投稿フォームを設置できます。

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

shopify
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

この要領で他のエリアも日本語化した状態が以下です。

まずは投稿フォーム。

shopify

続いてレビュー表示エリア。

shopify

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

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

shopify

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

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

  1. コレクションページにレビュースコアバッジを追加する
  2. 商品ページにレビュースコアバッジを追加する
  3. おすすめ商品にレビュースコアバッジを追加する

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

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

shopify

本記事で紹介したテキストの日本語化をはじめ、五段階評価の★の色も変えることができます。デフォルトは黒なので、オレンジ色とかにしたいですね。

shopify

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

まとめ

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

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

導入手順は以下です。

[box02 title=”POINT”]

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

[/box02]

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

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

今回はここまで!
チャオ!

この記事を書いた人

hiro

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

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