レビューの一覧を商品詳細ページに表示する

購入を検討している人が「このお店、大丈夫かな？」という気持ちにならず、安心して購入できるように積極的にレビューを掲載しましょう。

レビュー機能の導入事例をご紹介。レビューの収集方法や設置のご参考に！

「レビュー機能の設定・活用方法」を解説した動画もあわせてご覧ください。

レビュー 一覧表示のカスタマイズ

商品詳細ページに、以下のようなレビュー一覧を表示させてみましょう。

レビュー投稿者からの商品レビューや、それに対するショップのコメントなどを載せることができます。

タグを記述する

まず、利用中のテンプレートの商品詳細.HTML編集内に、以下のタグを任意の箇所に記述します。

コード内にある「value=3」はレビューの表示件数なので、「value=10」などお好みで表示件数を変更します。

<{ if $review_item_num != "" }>
<{ if $review_use_flg }>
<{assign var="m_num" value=3}>
<{section name=num loop=$reviewlist max=$m_num}>
<div class="reviewlist">
  <div class="reviewlist_datas">
    <div class="icon_star"><img src="https://img.shop-pro.jp/img/review/star_<{ $reviewlist[num].star|string_format:"%02d" }>.png" /></div>
    <ul class="review_poster">
      <li><{ $reviewlist[num].nickname }></li>
      <li><{ $reviewlist[num].nendai }></li>
      <li><{ $reviewlist[num].sex }></li>
      <li><{ $reviewlist[num].date }></li>
    </ul>
  </div>
  <div class="reviewlist_content">
    <div class="review_ttl"><{ $reviewlist[num].title }></div>
    <{if $reviewlist[num].img_url != ""}>
      <img src="<{$reviewlist[num].img_url}>" class="review_img" width="100" />
    <{ /if }>
    <div><{ $reviewlist[num].comment }></div>
  </div>

  <!-- ショップからの返信コメント-->
  <{if $reviewlist[num].res_comment != ""}>
  <div class="shopcomment">
    <div class="shopcomment_ttl">ショップからのコメント</div>
    <{ $reviewlist[num].res_comment }>（<{ $reviewlist[num].res_date }>）
  </div>
  <{ /if }>
</div>
<{/section}>
<{ /if }>
<{ /if }>

デザインを調整する

次に、商品詳細.CSS編集画面に以下を記述して、デザインを調整します。
テンプレートによってはデザインが崩れる可能性があります。利用中のテンプレートに応じてCSSを設定してください。

.reviewlist_datas {
  overflow: hidden;
  zoom: 1;
  margin-bottom: 10px;
}
.icon_star {
  float: left;
  width: 150px;
}
.review_poster li {
  float: left;
  margin-left: 10px;
}
.review_poster li {
  list-style: none;
}
.reviewlist {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px dotted #ccc;
}
.review_ttl,
.shopcomment_ttl {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.review_img {
  float: right;
  margin: 0 0 10px 10px
}
.reviewlist_content {
  overflow: hidden;
  zoom: 1;
}
.shopcomment {
  margin-top: 10px;
  margin-bottom: 10px;
  background: #eee;
  padding: 15px;
  border-radius: 6px;
}

以上で、商品詳細ページにレビューを表示させる独自タグを追加できました。

レビューを表示する

実際にレビュー一覧を表示させるには、

1. レギュラー・ラージ・プラチナプランのいずれかで契約してレビュー機能を使えるようにします。
2. 【レビュー設定】画面で、レビュー機能の使用設定を「使用する」に設定します。
3. 商品レビューが投稿された後に、管理者ページの【レビュー検索・承認】画面で、投稿されたレビューを承認してショップに掲載します。
   レビューに対してショップからコメントすることもできます。

星を５個表示にする方法

商品詳細ページでレビュー評価の星を５個表示にするには、上記の通りに商品詳細ページにレビュー一覧を表示させたあとに、以下の手順を行います。

レビュー設定画面にアクセス

「評価星の数」を５個に設定し、【更新】ボタンをクリックします。

商品詳細.CSSに追加したコードを編集

星画像１０個分を表示するために幅150pxの領域が確保されている箇所があります。

.icon_star {
  float: left;
  width: 150px;
}

上記の部分を以下のように変更してください。星５個分を表示するために表示領域をせまくします。

.icon_star {
  float: left;
  width: 75px;
  overflow: hidden;
}
.icon_star img {
  max-width: inherit;
}

コードの編集は以上です。【更新】ボタンをクリックしてテンプレートを保存してください。

星が５つ表示になりました。