テーマ仕様書
shop
商品ページ
詳細

商品詳細画面

商品の詳細ページです。
商品管理から自由項目や商品詳細・商品詳細サブなどに任意の文言やHTMLタグ、Liquid（変数や構文）を設定できるので、商品ごとにデザインを変えられます。
さらに対象の商品に対して複数のSKUが紐づいている場合、数量の上にSKUを選択するためのプルダウンがJavasSriptによって生成されます。
商品詳細画面で利用できるデフォルトの機能は以下の通りです。

参考情報

ショップのパス

ドメイン/shop/products/SKUコード（マスター）

テーマ管理のファイルパス

ec_force/shop/products/show.html.liquid
ec_force/shop/products/show.html+smartphone.liquid

JS タグ

{{ 'shop/products' | javascript_include_tag }}

必要なコンポーネント

※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。

{{ 'shop/products' | javascript_include_tag }}
 
<!-- 商品詳細画面 -->
<div id="product-show-view">
  <!-- 商品カテゴリーパンくずリスト(任意) -->
  {% for ancestry in product_categories_ancestry %}
    <ol>
      <li>{{ 'TOP' | link_to: '/shop' }}</li>
      {% for path in ancestry %}
        <li><a href="/shop/product_categories/{{ path.slug }}">{{ path.name }}</a></li>
      {% endfor %}
      <li>{{ product.name }}</li>
    </ol>
  {% endfor %}
 
  <!-- カートに商品を追加用のメッセージ(任意) -->
  <div id="cart-addition-success" style="display:none;">カートに商品を追加しました。</div>
  <div id="cart-addition-failure" style="display:none;">
    <div id="addition-failure-message"></div>
    <div id="btn-show-addition-failure-details" style="display:none;">さらに詳しく</div>
    <div id="addition-failure-details" style="display:none;"></div>
    <div id="btn-hide-addition-failure-details" style="display:none;">閉じる</div>
  </div>
 
  <!-- 商品画像(任意) -->
  {% if product.thumbnail.url %}
    {% assign src = product.thumbnail.url %}
    {% assign alt = product.name %}
  {% else %}
    {% assign src = 'missing' | image_url %}
    {% assign alt = '' %}
  {% endif %}
 
  {% if product.master.thumbnails.size > 0 %}
    {% if product.master.option_values_presentation %}
      {% assign alt = product.name | append: ' ' | append: product.master.option_values_presentation %}
    {% else %}
      {% assign alt = product.name %}
    {% endif %}
  {% endif %}
 
  <img src="{{ src }}" alt="{{ alt }}" id="main-img">
  <div id="sub-images-view"></div>
 
  <!-- 商品名 -->
  {{ product.name }}
 
  <!-- 商品詳細(任意) -->
  {{ product.parsed_description }}
 
  <!-- 商品バッジ(任意) -->
  {% if pre_order_badge_flg_hash[product.master.id] or delivery_group_badge_flg_hash[product.id] or concurrent_purchase_group_badge_flg_hash[product.id] or campaign_badge_flg_hash[product.id] %}
    <!-- 商品予約マーク(任意) -->
    {% if pre_order_badge_flg_hash[product.master.id] %}
      予約商品
    {% endif %}
    <!-- 配送温度帯ラベル(任意) -->
    {% for delivery_group_name in product.delivery_group_names %}
      {{ delivery_group_name }}
    {% endfor %}
    <!-- 同時購入グループバッジ(任意) -->
    <!-- 「バッジ表示名」を表示したい場合、product.concurrent_purchase_group_names を product.concurrent_purchase_badge_names に修正してください。 -->
    {% for concurrent_purchase_group_name in product.concurrent_purchase_group_names %}
      {{ concurrent_purchase_group_name }}
    {% endfor %}
    <!-- キャンペーンバッジ(任意) -->
    {% assign badges = campaign_badge_flg_hash[product.id] | liquid_render_badges %}
    {% for render_badge in badges %}
      {{ render_badge | hash: 'value' }}
    {% endfor %}
  {% endif %}
 
  <!-- 予約関連情報（任意） -->
  {% if enabled_pre_order and product.master.pre_order.is_pre_order? %}
    お届け予定時期：{{ product.master.pre_order.pre_ordered_delivery_description }}
    {{ pre_order_settings.notes }}
  {% endif %}
 
  <!-- 注意喚起文(任意) -->
  {{ product.caution }}
 
  <!-- キャンペーン機能カウントダウン表示(任意) -->
  {% if display_countdown_flg %}
    <span>{{ campaign_end_date_left }}</span>
  {% endif %}
 
  <!-- キャンペーン割引率表示(任意) -->
  {{ campaign_discount_rate }}
 
  <!-- キャンペーン割引額表示(任意) -->
  {{ campaign_discount_amount }}
 
  <!-- キャンペーン詳細表示(任意) -->
  {{ campaign_description }}
 
  <!-- 通常価格(任意) -->
  <span id="list-price">{{ product.master.list_price | number_to_currency: format: '%n %u' }}</span>
  <!-- 通常価格(税込)(任意）-->
  <span id="list-price-include-tax">{{ product.master.list_price_include_tax | number_to_currency: format: '%n %u' }}</span>
 
  <!-- 販売価格 -->
  <span id="sales-price">{{ product.first_price | number_to_currency: format: '%n %u' }}</span>
  <!-- 販売価格(税込) -->
  <span id="sales-price-include-tax">{{ product.first_price_include_tax | number_to_currency: format: '%n %u' }}</span>
 
  <!-- メーカー(任意) -->
  {{ product.maker.name }}
 
  <!-- メーカーURL(任意) -->
  {{ product.maker.url }}
 
  <!-- 自由入力1(任意) -->
  {{ product.option01 }}
 
  <!-- 自由入力2(任意) -->
  {{ product.option02 }}
 
  <!-- 自由入力3(任意) -->
  {{ product.option03 }}
 
  <!-- 自由入力3(任意) -->
  {{ product.option03 }}
 
  <!-- 自由入力4(任意) -->
  {{ product.option04 }}
 
  <!-- 自由入力5(任意) -->
  {{ product.option05 }}
 
  <!-- 自由入力6(任意) -->
  {{ product.option06 }}
 
  <!-- 自由入力7(任意) -->
  {{ product.option07 }}
 
  <!-- 自由入力8(任意) -->
  {{ product.option08 }}
 
  <!-- 自由入力9(任意) -->
  {{ product.option09 }}
 
  <!-- 自由入力10(任意) -->
  {{ product.option10 }}
 
  <!-- カテゴリー(任意) -->
  {% assign _category = '' %}
  {% for category in product.product_categories %}
    {% if category.product_category_visibility %}
      {% unless _category == '' %}
        {% assign _category = _category | append: ', ' %}
      {% endunless %}
      {% assign _category = _category | append: category.name %}
    {% endif %}
  {% endfor %}
  {{ _category }}
 
  <!-- 商品ラベル(検索表示設定を反映する) (任意)-->
  {% for label in product.labels %}
    {% if label.search_form_visibility %}
      <!-- ラベルID (任意)-->
      {{ label.id }}
      <!-- ラベルの名前(任意)-->
      {{ label.name }}
      <!-- ラベルの色(任意) -->
      {{ label.color }}
    {% endif %}
  {% endfor %}
 
  <!-- 商品ラベル(検索表示設定を反映しない) (任意)-->
  {% for label in product.labels %}
      <!-- ラベルID (任意)-->
      {{ label.id }}
      <!-- ラベルの名前(任意)-->
      {{ label.name }}
      <!-- ラベルの色(任意) -->
      {{ label.color }}
  {% endfor %}
 
  <!-- マスターSKU詳細(任意) -->
  {{ product.master.parsed_description }}
 
  <!-- 予約受付期間外時のメッセージ(任意) -->
  {% if enabled_pre_order and valid_pre_order_variant == false %}
    予約受付期間外のためカートに商品を追加できません。
  {% endif %}
 
  <!-- 併売の場合はフォームを隠す -->
  {% if base_info.multiple_co_selling_products and product.has_co_selling_product? %}
    {% assign style = 'display:none;' %}
  {% else %}
    {% assign style = '' %}
  {% endif %}
 
  <!-- 商品選択フォーム -->
  <form id="add-shop-cart-form" action="/shop/cart/add" method="post" style="{{ style }}">
 
    <!-- 規格選択 -->
    <input id="variant-id" type="hidden" name="variant_id" value="{{ product.master.id }}">
    <div id="option_types"></div>
 
    <!-- 数量選択 -->
    <label>数量</label>
    <input id="text-out-of-stock" value="在庫切れ" disabled style="display:none;">
    <select id="quantity" name="quantity" style="display:none;"></select>
 
    <!-- 再入荷お知らせ -->
    <a id="btn-stock-waiting-list" href="javascript:void(0);" style='display:none;'>再入荷お知らせ</a>
 
    <!-- カートに商品を追加(任意) -->
    <button id="btn-add-async" type="button" style="display:none;">カートに商品を追加</button>
 
    <!-- カート追加 -->
    {% if valid_pre_order_variant %}
      <button id="btn-add-async" type="button" style="display:none;">カートに商品を追加</button>
      <button id="btn-add" style="display:none;">購入手続きへ</button>
    {% endif %}
  </form>
 
  <!-- 併売商品が設定されている場合 -->
  {% if product.has_co_selling_product? %}
    <!--「ショップ管理 > 各種設定 > ショップの機能設定」の「併売商品複数設定」が有効の場合 -->
    {% if base_info.multiple_co_selling_products? %}
      <div id="co-selling-product-view">
        <ul>
          <li class="co-selling-tab">
            <a id="co-selling-single-tab" href="#co-selling-single">通常購入</a>
          </li>
          <li class="co-selling-tab">
            <a id="co-selling-recurring-tab" href="#co-selling-recurring">定期購入</a>
          </li>
          <li class="co-selling-tab">
            <a id="co-selling-relations-tab" href="#co-selling-relations">関連商品</a>
          </li>
        </ul>
        <div>
 
          <!-- 単品商品 -->
          <div id="co-selling-single">
            {% for co_selling_product in co_selling_products["single"] %}
              <div class="co-selling-list" data-product-id="{{ co_selling_product["id"] }}">
                {{ co_selling_product["name"] }}
                <span class="co-list_price">{{ co_selling_product["list_price"] }}</span>
                <span class="co-list_price_include_tax">{{ co_selling_product["list_price_include_tax"] }}</span>
                <span class="co-sales_price">{{ co_selling_product["sales_price"] }}</span>
                <span class="co-sales_price_include_tax">{{ co_selling_product["sales_price_include_tax"] }}</span>
                {% if co_selling_product["labels"] or co_selling_product["delivery_group_names"] %}
                  {% for co_selling_label in co_selling_product["labels"] %}
                    {{ co_selling_label["name"] }}
                  {% endfor %}
                  {% for delivery_group_name in co_selling_product["delivery_group_names"] %}
                    {{ delivery_group_name }}
                  {% endfor %}
                {% endif %}
                {% if co_selling_product["invalid_pre_order"] %}
                  予約受付期間外のためカートに商品を追加できません。
                {% endif %}
                <p class="co-campaign" style="display: none;">
                  セール終了まで<span class="co-campaign-text"></span>
                </p>
                <form class="co-add-shop-cart-form" action="/shop/cart/add" method="post">
                  <input class="co-variant-id" type="hidden" name="variant_id" value="{{ co_selling_product["master"]["id"] }}">
                  <div class="co-option_types">
                    <div class="co-form-input-group">
                      <input class="co-text-out-of-stock" value="在庫切れ" disabled style="display:none;">
                      <select class="co-quantity" name="quantity" style="display:none;"></select>
                      <a class="co-btn-stock-waiting-list" href="javascript:void(0);" style="display:none;">再入荷お知らせ</a>
                      {% unless co_selling_product["invalid_pre_order"] %}
                        <button class="co-btn-add-async" type="button" style="display:none;">カートに商品を追加</button>
                        <button class="co-btn-add" style="display:none;">購入手続きへ</button>
                      {% endunless %}
                    </div>
                  </div>
                </form>
              </div>
            {% endfor %}
          </div>
 
          <!-- 定期商品 -->
          <div id="co-selling-recurring">
            {% for co_selling_product in co_selling_products["recurring"] %}
              <div class="co-selling-list" data-product-id="{{ co_selling_product["id"] }}">
                {{ co_selling_product["name"] }}
                <span class="co-list_price">{{ co_selling_product["list_price"] }}</span>
                <span class="co-list_price_include_tax">{{ co_selling_product["list_price_include_tax"] }}</span>
                <span class="co-sales_price">{{ co_selling_product["sales_price"] }}</span>
                <span class="co-sales_price_include_tax">{{ co_selling_product["sales_price_include_tax"] }}</span>
                {% if co_selling_product["labels"] or co_selling_product["delivery_group_names"] %}
                  {% for co_selling_label in co_selling_product["labels"] %}
                    {{ co_selling_label["name"] }}
                  {% endfor %}
                  {% for delivery_group_name in co_selling_product["delivery_group_names"] %}
                    {{ delivery_group_name }}
                  {% endfor %}
                {% endif %}
                {% if co_selling_product["invalid_pre_order"] %}
                  予約受付期間外のためカートに商品を追加できません。
                {% endif %}
                <p class="co-campaign" style="display: none;">
                  セール終了まで<span class="co-campaign-text"></span>
                </p>
                <form class="co-add-shop-cart-form" action="/shop/cart/add" method="post">
                  <input class="co-variant-id" type="hidden" name="variant_id" value="{{ co_selling_product["master"]["id"] }}">
                  <div class="co-option_types">
                    <div class="co-form-input-group">
                      <input class="co-text-out-of-stock" value="在庫切れ" disabled style="display:none;">
                      <select class="co-quantity" name="quantity" style="display:none;"></select>
                      <a class="co-btn-stock-waiting-list" href="javascript:void(0);" style="display:none;">再入荷お知らせ</a>
                      {% unless co_selling_product["invalid_pre_order"] %}
                        <button class="co-btn-add-async" type="button" style="display:none;">カートに商品を追加</button>
                        <button class="co-btn-add" style="display:none;">購入手続きへ</button>
                      {% endunless %}
                    </div>
                  </div>
                </form>
              </div>
            {% endfor %}
          </div>
 
          <!-- 関連商品 -->
          <div id="co-selling-relations">
            {% for relation_product in relation_products %}
              <div class="co-selling-list" data-product-id="{{ relation_product["id"] }}">
                {{ relation_product["name"] }}
                <span class="co-list_price">{{ relation_product["list_price"] }}</span>
                <span class="co-list_price_include_tax">{{ relation_product["list_price_include_tax"] }}</span>
                <span class="co-sales_price">{{ relation_product["sales_price"] }}</span>
                <span class="co-sales_price_include_tax">{{ relation_product["sales_price_include_tax"] }}</span>
                {% if relation_product["labels"] or relation_product["delivery_group_names"] %}
                  {% for co_selling_label in relation_product["labels"] %}
                    {{ co_selling_label["name"] }}
                  {% endfor %}
                  {% for delivery_group_name in relation_product["delivery_group_names"] %}
                    {{ delivery_group_name }}
                  {% endfor %}
                {% endif %}
                {% if relation_product["invalid_pre_order"] %}
                  予約受付期間外のためカートに商品を追加できません。
                {% endif %}
                <p class="co-campaign" style="display: none;">
                  セール終了まで<span class="co-campaign-text"></span>
                </p>
                <form class="co-add-shop-cart-form" action="/shop/cart/add" method="post">
                  <input class="co-variant-id" type="hidden" name="variant_id" value="{{ relation_product["master"]["id"] }}">
                  <div class="co-option_types">
                    <div class="co-form-input-group">
                      <input class="co-text-out-of-stock" value="在庫切れ" disabled style="display:none;">
                      <select class="co-quantity" name="quantity" style="display:none;"></select>
                      <a class="co-btn-stock-waiting-list" href="javascript:void(0);" style="display:none;">再入荷お知らせ</a>
                      {% unless relation_product["invalid_pre_order"] %}
                        <button class="co-btn-add-async" type="button" style="display:none;">カートに商品を追加</button>
                        <button class="co-btn-add" style="display:none;">購入手続きへ</button>
                      {% endunless %}
                    </div>
                  </div>
                </form>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    <!-- 「ショップ管理 > 各種設定 > ショップの機能設定」の「併売商品複数設定」が無効の場合 -->
    {% else %}
      <button id="btn-single-product" disabled>単品購入</button>
      <button id="btn-recurring-product">定期購入</button>
    {% endif %}
  {% endif %}
 
  <!-- お気に入り登録 -->
  {% assign is_favorite = product.id | check_current_customer_favorite %}
  {% if is_favorite %}
    {% if customer_signed_in %}
      <form action="/shop/products/{{ product.master.sku }}/unfavorite?customer_return_to=%2Fshop%2Fproducts%2F{{ product.master.sku }}" method="post">
        <button data-disable-with="解除中..." type="submit">
          お気に入りに追加済み
        </button>
      </form>
    {% endif %}
  {% else %}
    <form action="/shop/products/{{ product.master.sku }}/favorite?customer_return_to=%2Fshop%2Fproducts%2F{{ product.master.sku }}" method="post">
      <button data-disable-with="登録中..." type="submit">
        お気に入りに追加
      </button>
    </form>
  {% endif %}
 
  <!-- 商品テキスト(商品カテゴリ) -->
  {% for product_extra_text in product.extra_text_from_product_category %}
    {{ product_extra_text }}
  {% endfor %}
 
  <!-- レビューコンテンツ -->
  {% if base_info.use_review? %}
 
    <!-- レビュー一覧 -->
    {% assign is_readable = product.id | check_review_reading_rule %}
    {% if is_readable %}
 
      {% if reviews.size == 0 %}
        この商品のレビューはありません。
      {% else %}
        <!-- レビュー件数(任意) -->
        {{ reviews.size }} 件のレビュー
 
        <!-- レビュー平均点(任意) -->
        {{ product.average_star }}
 
        {% for review in reviews %}
 
          <!-- レビューのリアクション機能を利用する場合、画面制御に id 属性を利用するため変更不可 -->
          <div id="review-{{ review.id }}">
 
            <!-- レビュータイトル -->
            {{ review.title }}
 
            <!-- レビュー投稿日時(任意) -->
            {{ review.created_at | date: '%Y/%m/%d %H:%M:%S' }}
 
            <!-- 投稿者 -->
            {{ review.name }}
 
            <!-- 評価 -->
            {{ review.display_star }}
 
            <!-- レビューコメント -->
            {{ review.comment | simple_format }}
 
            <!-- レビューのリアクション（参考になった） -->
            {% if base_info.review_reaction? %}
 
              <!-- レビューにリアクションした人数 -->
              {% unless review.reactions_count == 0 %}
                {{ review.reactions_count }}人が「参考になった」と回答しています。
              {% endunless %}
 
              {% unless review.customer.id == current_customer&.id %}
                {% if reacted_review_ids contains review.id %}
                  ご意見ありがとうございます。
 
                  <!-- レビューのリアクション（参考になった）の取り消し -->
                  {% if base_info.review_reaction_cancellation? %}
                    <a data-method="post" href="/shop/products/review_reaction_cancellation?customer_return_to=%2Fshop%2Fproducts%2F{{ product.master.sku }}&review_id={{ review.id }}#review-{{ review.id }}">取り消し</a>
                  {% endif %}
                {% else %}
                  <form action="/shop/products/review_reaction?customer_return_to=%2Fshop%2Fproducts%2F{{ product.master.sku }}#review-{{ review.id }}" method="post">
                    <input name="review_id" type="hidden" value="{{ review.id }}">
                    <button type="submit" data-disable-with="参考になった">
                      参考になった
                    </button>
                  </form>
                {% endif %}
              {% endunless %}
            {% endif %}
          </div>
 
        {% endfor %}
      {% endif %}
    {% endif %}
 
 
    <!-- レビュー投稿フォーム -->
    {% assign is_writable = product.id | check_review_writing_rule %}
    {% if is_writable %}
 
      <!-- フラッシュメッセージ -->
      {{ 'notice' | flash: 'alert alert-success', 'text' }}
      {{ 'alert' | flash: 'alert alert-danger', 'text' }}
      {{ 'error' | flash: 'alert alert-danger', 'text' }}
 
      <form action="/shop/products/{{ product.id }}/review" method="post">
 
        <!-- 投稿者名 -->
        <label for="review_name">投稿者名</label>
        <input class="validate[required]" type="text" name="review[name]" id="review_name">
 
        <!-- メールアドレス -->
        <label for="review_email">メールアドレス</label>
        <input class="validate[required,custom[email]]" type="text" {% if customer_signed_in %}disabled{% endif %} name="email" value="{{ current_customer.email }}" id="review_email">
 
        <!-- 評価 -->
        <label for="review_star">おすすめレベル</label>
        <select class="validate[required,custom[number]]" name="review[star]" id="review_star">
          <option value="5">★★★★★</option>
          <option value="4">★★★★</option>
          <option value="3">★★★</option>
          <option value="2">★★</option>
          <option value="1">★</option>
        </select>
 
        <!-- タイトル -->
        <label for="review_title">タイトル</label>
        <input class="validate[required,maxSize[20]]" type="text" name="review[title]" id="review_title">
 
        <!-- コメント -->
        <label for="review_comment">コメント</label>
        <textarea class="validate[required,maxSize[400]]" name="review[comment]" id="review_comment"></textarea>
 
        <!-- 投稿ボタン -->
        <button name="button" type="submit">投稿する</button>
 
      </form>
    {% endif %}
 
  {% endif %}
 
 
  <!-- 関連商品 (「ショップ管理 > 各種設定 > ショップの機能設定」の「併売商品複数設定」が有効の場合、任意) -->
  {% if base_info.use_related_products_on_detail? and product.active_related_products.size != 0 %}
 
    <!-- 関連商品一覧 -->
    {% for related_product in product.active_related_products %}
 
      <!-- 関連商品画像(任意) -->
      <a href="/shop/products/{{ related_product.master.sku }}">
        {% if related_product.thumbnail.url %}
          {% assign src = related_product.thumbnail.url %}
        {% else %}
          {% assign src = 'missing' | image_url %}
        {% endif %}
        <img src="{{ src }}">
      </a>
 
      <!-- 関連商品名 -->
      <a href="/shop/products/{{ related_product.master.sku }}">{{ related_product.name | truncate: 35 }}</a>
 
      <!-- 商品バッジ(任意) -->
      {% if pre_order_badge_flg_hash[related_product.master.id] or delivery_group_badge_flg_hash[related_product.id] or concurrent_purchase_group_badge_flg_hash[related_product.id] or campaign_badge_flg_hash[related_product.id] %}
        <!-- 商品予約マーク(任意) -->
        {% if pre_order_badge_flg_hash[related_product.master.id] %}
          予約商品
        {% endif %}
        <!-- 配送温度帯ラベル(任意) -->
        {% for delivery_group_name in related_product.delivery_group_names %}
          {{ delivery_group_name }}
        {% endfor %}
        <!-- 同時購入グループバッジ(任意) -->
        <!-- 「バッジ表示名」を表示したい場合、related_product.concurrent_purchase_group_names を related_product.concurrent_purchase_badge_names に修正してください。 -->
        {% for concurrent_purchase_group_name in related_product.concurrent_purchase_group_names %}
          {{ concurrent_purchase_group_name }}
        {% endfor %}
        <!-- キャンペーンバッジ(任意) -->
        {% assign badges = campaign_badge_flg_hash[related_product.id] | liquid_render_badges %}
        {% for render_badge in badges %}
          {{ render_badge | hash: 'value' }}
        {% endfor %}
      {% endif %}
 
      <!-- 販売価格 -->
      {{ related_product.master.list_price | number_to_currency: format: '%n %u' }}
 
      <!-- カート追加 -->
      <form action="/shop/cart/add" method="post">
        <input name="variant_id" type="hidden" value="{{ related_product.related_product_variants_id }}">
        <button>カートに追加する</button>
      </form>
    {% endfor %}
  {% endif %}
 
</div>
 
<!-- Google検索結果画面に商品が持つレビュー数やおすすめレベルを表示-->
<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": "{{ product.name }}",
    "description": "{{ description }}",
    {% if product.thumbnail.url %}
    "image": "{{ product.thumbnail.url| escape }}",
    {% else %}
    "image": "{{ 'missing' | image_url }}",
    {% endif %}
    "offers": {
      "@type": "Offer",
      {% if product.out_of_stock? %}
      "availability": "https://schema.org/OutOfStock",
      {% else %}
      "availability": "https://schema.org/InStock",
      {% endif %}
      "price": "{{ product.first_price_include_tax }}",
      "priceCurrency": "JPY"
  {% assign is_readable = product.id | check_review_reading_rule %}
  {% if product.reviews_count > 0 and base_info.use_review? and is_readable %}
    },
    "aggregateRating" : {
      "@type": "AggregateRating",
      "reviewCount": "{{ product.reviews_count }}",
      "ratingValue": "{{ product.average_star_eval }}"
    },
    "review": [
    {% for review in reviews %}
      {% if review.name == empty %}
        {% continue %}
      {% endif %}
      {
        "@type": "Review",
        "author": {
          "@type": "Person",
          "name": "{{ review.name }}"
        },
        "datePublished": "{{ review.created_at | date: "%Y-%m-%d" }}",
        "reviewBody": "{{ review.comment }}",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "{{ review.star }}"
        }
      {% if forloop.last %}
      }
      {% else %}
      },
      {% endif %}
    {% endfor %}
    ]
  {% else %}
    }
  {% endif %}
  }
</script>

画面イメージ

※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。