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

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

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

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

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

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

5f498de79a7f5ae88807924c952c0e6b

タグを記述する

まず、利用中のテンプレートの商品詳細.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. 商品レビューが投稿された後に、管理者ページの【レビュー検索・承認】画面で、投稿されたレビューを承認してショップに掲載します。
    レビューに対してショップからコメントすることもできます。

星を5個表示にする方法

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

カラーミーショップ_-_レビュー設定-3

1.【レビュー設定】画面にアクセスします。
「評価星の数」を5個に設定し、【更新】ボタンをクリックします。

2.先ほど商品詳細.CSSに追加したコードを少し編集します。
星画像10個分を表示するために幅150pxの領域が確保されている箇所があります。

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

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

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

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

Untitled

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

※レビュー機能は、レギュラープラン・ラージプラン・プラチナプランをご利用中のショップ様でご利用になれます。

エコノミープラン、スモールプランをご利用の場合は、レギュラープラン変更後に使用可能です。
プラン変更は、管理者ページの「アカウント・設定」>「契約・お支払い情報」>「レギュラープランアップ」から
お申し込みください。