1. オンラインマニュアル
  2. よく使われる機能&活用法ガイド
  3. 商品一覧にレビュー数や平均点を表示する
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル

商品一覧にレビュー数や平均点を表示する

商品一覧(商品グループ・商品検索結果一覧・バンドル対象一覧・クーポン対象一覧・お気に入り)画面に公開されたレビュー件数や平均点を表示できます。

<目次>

表示手順

フリーパーツを用意します。

置換文字を利用し、表示のためのフリーパーツを用意します。

  1. コマースクリエイター>パーツから[パーツを追加する]を押下します。
  2. 表示されたモーダルから「フリーパーツ」を選択します。
  3. 「フリーパーツ追加」画面が表示されます。

「フリーパーツ追加」画面に置換文字を利用し、表示内容を入力

例として、「レビュー件数」を表示するためのパーツを準備します。

それぞれ以下を登録し、[保存する]を押下します。

  • パーツ名:レビュー件数を表示するパーツであることがわかる任意の名前を入力
  • 置換文字:任意の置換文字を入力
  • 表示内容:「レビュー件数」を表示する置換文字{% product.review_count %}を利用して表示したい内容を入力

以上で「フリーパーツ」の準備が整いました。

利用できる置換文字

レビュー件数 {% product.review_count %} 商品に対して投稿され、公開されているレビューの件数を表示します。
※レビューがない場合は、「0」と表示
レビュー平均点 {% product.review_star_rating %}
商品に対して投稿され、公開されているレビューの平均点を9.99形式で表示します。
※レビューがない場合は、空文字を出力

星(★)マークにて表示したい場合は、CSSを利用したhtmlソースを参考にしてください。

{% product.review_average_rating %}
商品に対して投稿され、公開されているレビューの平均点を0.5刻み(1.0・1.5・2.0・2.5・3.0・3.5・4.0・4.5・5.0)で表示します。

<平均点に応じて出力される数字>
1.00 ~ 1.24 → 1.0
1.25 ~ 1.74 → 1.5
1.75 ~ 2.24 → 2.0
2.25 ~ 2.74 → 2.5
2.75 ~ 3.24 → 3.0
3.25 ~ 3.74 → 3.5
3.75 ~ 4.24 → 4.0
4.25 ~ 4.74 → 4.5
4.75 ~ 5.00 → 5.0
※レビューがない場合は、空文字を出力

星(★)マークにて表示したい場合は、CSSを利用したhtmlソースを参考にしてください。

表示イメージとサンプルhtml(CSS)をご用意しております。

表示したい画面にレイアウト配置する

例として、「商品グループ」画面に「レビュー件数」を表示するための操作をします。

デバイスごとにテーマを分けている場合は、それぞれのテーマで同じ操作をしてください。

  1. コマースクリエイター>テーマから表示したい「テーマ」の「レイアウト」を選択します。
  2. 表示したい「商品グループ」のレイアウトのを押下します。
  3. 「商品グループ」レイアウトの左側の「パーツ配置エリア」にて、メインエリア>コンテンツエリア>商品グループエリア>商品一覧とレイアウトを開きます。
  4. 右側の「パーツ検索エリア」にて、「レビュー」と検索し、先ほどフリーパーツで作成した「レビュー件数表示」パーツを表示します。
  5. 「パーツ配置エリア」の表示したい位置に、「レビュー件数表示」パーツをドラッグ&ドロップします。

プレビューで確認する

[保存する]押下前にプレビューにて確認できます。

  1. [プレビュー]を押下します。
  2. 表示されたモーダルにて[デザイン確認]を選択し、[プレビューを表示する]押下します。
    プレビューについて詳しくは、プレビューモードをご覧ください。
  3. 表示されたプレビュー画面で、「レビュー件数表示」パーツを配置したレイアウト画面まで遷移します。
  4. 表示を確認します。

必要に応じて修正する

表示内容に修正がある場合は、「レイアウト設定」画面に配置したパーツのを押下し、[パーツを変更する]を選択します。

「フリーパーツ変更」画面に遷移するので、修正を行い、完了したら「フリーパーツ変更」画面の[保存する]を押下します。

完了する

再度プレビューで表示を確認し、問題なければ、「レイアウト設定」画面の[保存する]を押下します。

「レビュー順」で並び替え表示できるようにする(確認する)(任意)

設定>商品・商品グループ>商品一覧ページ設定-並び替えリンク表示設定構築>ページ設定>商品ページ設定-並び替えリンク表示設定にて、商品一覧を「レビュー順」で並べ替える、ソートメニューの表示設定ができます。
初期設定では、表示しない設定(OFF)になっておりますので、必要に応じて設定を変更してください。

ユーザー画面での表示
「商品グループ」画面-並び替え・ページャーパーツをご覧ください。

表示イメージとサンプルhtml(CSS)

レビュー平均点のみを表示する

「フリーパーツ」入力内容

以下の記述の場合、掲載レビューがない(平均点なし)商品には何も表示されません。

<div class="ratingcount-{% product.review_count %}">レビュー平均点:{% product.review_average_rating %}</div>
                                            
<style>
    .ratingcount-0{
        display: none;
        }
</style>
                                            

<style>内の記述は、オリジナルCSSアイテムにアップロードするCSSファイルに記載しても結構です。

レビュー平均点のみを星(★)マークで表示する

「フリーパーツ」入力内容

レビュー平均点数を星(★)マークで表示することもできます
※スタートアップテーマの既存のCSSを利用して表示可能です。

星(★)マークを利用した場合、掲載レビューがない(平均点なし)商品には何も表示されません。

<div class="fs-c-rating">
    <div class="fs-c-rating__stars fs-c-reviewStars" data-ratingcount="{% product.review_star_rating %}"></div>
    <div class="fs-c-rating__value" aria-label="レビュー平均評価 {% product.review_average_rating %}">{% product.review_average_rating %}</div>
</div>

<style>
    .fs-c-rating{
        display:flex;
    }
</style>

<style>内の記述は、オリジナルCSSアイテムにアップロードするCSSファイルに記載しても結構です。

<平均点に応じた星(★)マークの表示>

平均点 星(★)マークの数
 ~ 1.99
割合に応じて星の内部が塗りつぶされます。
1.00
1.01 ~ 1.99
割合に応じて星の内部が塗りつぶされます。
2.00
2.01 ~ 2.99
割合に応じて星の内部が塗りつぶされます。
3.00
3.01 ~ 3.99
割合に応じて星の内部が塗りつぶされます。
4.00
4.01 ~ 4.99
割合に応じて星の内部が塗りつぶされます。
5.00

※レビューがない場合は、空文字を出力

レビュー件数のみを表示する

「フリーパーツ」入力内容

以下の記述の場合、掲載レビューがない(0件)商品には何も表示されません。

<div class="review-{% product.review_count %}">レビュー件数:{% product.review_count %}件</div>
                        
<style>
    .review-0 {
        display: none;
    }
</style>
                        

<style>内の記述は、オリジナルCSSアイテムにアップロードするCSSファイルに記載しても結構です。

レビュー平均点(星(★)マーク)と件数の双方を表示する

平均点を星(★)マークで表示し、件数を付記することも可能です。

以下の記述の場合、掲載レビューがない(0件)商品には何も表示されません。

「フリーパーツ」入力内容

<div class="productRating ratingcount-{% product.review_count %}">
<div class="fs-c-rating">
    <div class="fs-c-rating__stars fs-c-reviewStars" data-ratingcount="{% product.review_star_rating %}"></div>
    <div class="fs-c-rating__value" aria-label="レビュー平均評価 {% product.review_average_rating %}">{% product.review_average_rating %}</div>
    </div>
    <div>({% product.review_count %})</div>
 </div>
                        
<style media="screen">
    .productRating{
        display:flex;
        align-items:flex-end;
        flex-wrap:wrap;
        }

    .ratingcount-0{
        display:none;
        }

    .fs-c-rating{
        display:flex;
        }
</style>

<style>内の記述は、オリジナルCSSアイテムにアップロードするCSSファイルに記載しても結構です。