Introduction

支援在以下的頁面以及進階分頁的商品元件中顯示商品評價星評

所有商品頁
分類頁
優惠頁
New Page Builder (NPB)元件
- 商品列表元件
- 商品輪播元件
- 商品描述元件
Old Page Builder (OPB) 元件
- 單件商品
- 分類

修改步驟

步驟一：確認套用的 theme 是否有支援此功能

此功能僅支援以下幾個主題：

Bianco
Sangria
UltraChic
Varm
Philia
Kingsman

如果目前的主題在上述列表中，請繼續執行下一步操作。

如果不在列表中，且有需要使用此功能，請更換為支援的主題後再繼續。

步驟二：新增程式碼

以下是您需要新增程式碼的操作步驟，具體的描述和示例，找到指定檔案後新增程式碼：

檔案名稱：theme.scss

在底部新增以下程式碼

.product-review-stars-container {
  text-align: center;
  display: block;
  width: 100%;
}

.product-review-stars-rating {
  margin: 4px 0;
  height: 14px;
  font-size: 0;

  &.hidden {
    display: none;
  }
}

.product-review-star {
  display: inline-block;
  font-size: 14px;
}

.product-review-total-counts {
  margin-left: 0.25rem;
  font-size: 12px;
  color: #828282;
  vertical-align: top;
}

檔案名稱：

quick_cart_product.liquid

product.liquid

promotion_product.liquid

搜尋以下程式碼： {% if shop.features contains 'plp_variation_selector' and theme.settings.plp_variation_selector.enabled %}
在上述程式碼的上方，新增以下 Liquid 程式碼：

{% if shop.allow_product_review_plp_enabled? %}
  <product-review-stars class="product-review-stars-container" data-product-id="{{ product.id }}" data-product-review="">
    <div class="product-review-skeleton"></div>
    <div class="product-review-stars-rating hidden {% if text_align_class %} {{ text_align_class }} {% endif %}"></div>
  </product-review-stars>
{% endif %}