在所有商品 / 分類 / 搜尋結果 /優惠 /進階分頁 新增商品評價

Introduction

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

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

商品元件顯示商品評價星評

修改步驟

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

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

• Bianco
• Sangria
• UltraChic
• Varm
• Philia
• Kingsman

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

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

步驟二：新增程式碼

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

檔案名稱：theme.scss

1. 在底部新增以下程式碼

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

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

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 %}