使用 Product Reviews 應用程式

此頁面列印時間為 Apr 26, 2024。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/products/product-reviews/installation。

您可以將評論表單新增至商品頁面，並檢視商品及商品系列頁面的評分徽章。 此教學課程的步驟會因您的佈景主題架構版本而有所不同。 請根據您的佈景主題架構版本，按照指示將評論元素新增至您的網路商店。

此頁面上

Online Store 2.0 佈景主題

您可以在 Online Store 2.0 佈景主題中新增評論、納入評論表單並顯示星級評等。

在「Online Store 2.0」佈景主題中新增評論和評論表單

您可以將評論和評論表單應用程式區塊新增為產品範本中的區段，或在產品範本的主要產品區段新增所需區塊。這些選項適用於 Shopify Theme Store 的所有「Online Store 2.0」佈景主題。視您的佈景主題而定，您可以將其新增至其他範本或區段。

將評論和評論表單新增為區段

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 尋找要編輯的佈景主題，然後點擊「自訂」。
  3. 前往您想要新增評論及評論表單區段的產品範本。
  4. 按一下「新增區段」。
  5. 在下拉式選單的「應用程式」區段，選取「評論」應用程式區塊。
  6. 選用：將應用程式區段移至頁面上您希望的位置。
  7. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點選「管理所有佈景主題」。
  4. 尋找要編輯的佈景主題，然後點選「自訂」。
  5. 點一下「編輯」。
  6. 前往您想要新增評論及評論表單區段的產品範本。
  7. 按一下「新增區段」。
  8. 在下拉式選單的「應用程式」區段，選取「評論」應用程式區塊。
  9. 選用：將應用程式區段移至頁面上您希望的位置。
  10. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點選「管理所有佈景主題」。
  4. 尋找要編輯的佈景主題，然後點選「自訂」。
  5. 點一下「編輯」。
  6. 前往您想要新增評論及評論表單區段的產品範本。
  7. 按一下「新增區段」。
  8. 在下拉式選單的「應用程式」區段，選取「評論」應用程式區塊。
  9. 選用：將應用程式區段移至頁面上您希望的位置。
  10. 點擊「儲存」。

將評論和評論表單新增為區塊

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 尋找要編輯的佈景主題，然後點擊「自訂」。
  3. 前往您要新增評論和評論表單區塊的頁面和區段。
  4. 點擊新增區塊。
  5. 在下拉式選單的「應用程式」區段，選取「評論」應用程式區塊。
  6. 選用：將「評論區塊」移至區段中您希望的位置。
  7. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點選「管理所有佈景主題」。
  4. 尋找要編輯的佈景主題，然後點選「自訂」。
  5. 點一下「編輯」。
  6. 前往您要新增評論和評論表單區塊的頁面和區段。
  7. 點擊新增區塊。
  8. 在下拉式選單的「應用程式」區段，選取「評論」應用程式區塊。
  9. 選用：將「評論區塊」移至區段中您希望的位置。
  10. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點選「管理所有佈景主題」。
  4. 尋找要編輯的佈景主題，然後點選「自訂」。
  5. 點一下「編輯」。
  6. 前往您要新增評論和評論表單區塊的頁面和區段。
  7. 點擊新增區塊。
  8. 在下拉式選單的「應用程式」區段，選取「評論」應用程式區塊。
  9. 選用：將「評論區塊」移至區段中您希望的位置。
  10. 點擊「儲存」。

在「Online Store 2.0」佈景主題中新增星級評等

您可以在產品範本的主要產品區段新增「星級評等」區塊。此選項適用於 Shopify Theme Store 的所有「Online Store 2.0」佈景主題。視您的佈景主題而定，您可以將其新增至其他區段和範本。

步驟：

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 尋找要編輯的佈景主題，然後點擊「自訂」。
  3. 前往要新增「星級評等」的頁面和區段。
  4. 點擊新增區塊。
  5. 在下拉式選單的「應用程式」區段，選取「星級評等」應用程式區塊。
  6. 選用：將「星級評等」區塊移至區段中您希望的位置，或自訂星評顏色、大小、對齊方式和背景資訊。
  7. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點選「管理所有佈景主題」。
  4. 尋找要編輯的佈景主題，然後點選「自訂」。
  5. 點一下「編輯」。
  6. 前往要新增「星級評等」的頁面和區段。
  7. 點擊新增區塊。
  8. 在下拉式選單的「應用程式」區段，選取「星級評等」應用程式區塊。
  9. 選用：將「星級評等」區塊移至區段中您希望的位置，或自訂星評顏色、大小、對齊方式和背景資訊。
  10. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點選「管理所有佈景主題」。
  4. 尋找要編輯的佈景主題，然後點選「自訂」。
  5. 點一下「編輯」。
  6. 前往要新增「星級評等」的頁面和區段。
  7. 點擊新增區塊。
  8. 在下拉式選單的「應用程式」區段，選取「星級評等」應用程式區塊。
  9. 選用：將「星級評等」區塊移至區段中您希望的位置，或自訂星評顏色、大小、對齊方式和背景資訊。
  10. 點擊「儲存」。

舊版區段式佈景主題

您可以在舊版區段式佈景主題的不同頁面上新增評論、納入評論表單並顯示評論評分徽章。

在區段式佈景主題中為商品頁面新增評論及評論表單

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  3. 在「區段」目錄中，開啟「product-template.liquid」。
  4. 在程式碼中找出您想要顯示評論的區域，通常位於商品說明下方。若要在檔案中找出商品說明，請搜尋 {{ product.description }} Liquid 標籤。
  5. 在包含 {{ product.description }} Liquid 標籤的程式碼下方，貼上以下程式碼片段： 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「區段」目錄中，開啟「product-template.liquid」。
  6. 在程式碼中找出您想要顯示評論的區域，通常位於商品說明下方。若要在檔案中找出商品說明，請搜尋 {{ product.description }} Liquid 標籤。
  7. 在包含 {{ product.description }} Liquid 標籤的程式碼下方，貼上以下程式碼片段： 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「區段」目錄中，開啟「product-template.liquid」。
  6. 在程式碼中找出您想要顯示評論的區域，通常位於商品說明下方。若要在檔案中找出商品說明，請搜尋 {{ product.description }} Liquid 標籤。
  7. 在包含 {{ product.description }} Liquid 標籤的程式碼下方，貼上以下程式碼片段： 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 點擊「儲存」。

在區段式佈景主題中為商品系列頁面新增評論評分徽章

  1. 在 Shopify 管理介面 ，前往「線上商店」 > 「佈景主題」。
  2. 找到要編輯的佈景主題，然後依序點擊「…」按鈕和「編輯程式碼」。

  3. 在「程式碼片段」目錄中，開啟「product-grid-item.liquid」檔案。在某些佈景主題中，此檔案的名稱不同。若您找不到 product-grid-item.liquid，請尋找下列內容：

    • product-card-grid.liquid
    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid
    • product-item.liquid

  4. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方的某個位置。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。

  5. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段：

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。

在區段式佈景主題中為商品頁面新增評論評分徽章

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  3. 在「區段」目錄中，開啟「product-template.liquid」。
  4. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。
  5. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段： 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「區段」目錄中，開啟「product-template.liquid」。
  6. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。
  7. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段： 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「區段」目錄中，開啟「product-template.liquid」。
  6. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。
  7. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段： 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。

在區段式佈景主題中為精選商品新增評論評分徽章

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  3. 在「區段」目錄中，開啟「featured-product.liquid」檔案。
  4. 在程式碼片段中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方的某個位置。若要在檔案中找出商品名稱，請搜尋 {{ title }} Liquid 標籤。如果您找不到 {{ title }} 標籤，請搜尋 {{ product.title }} 標籤。
  5. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段： 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
    {% if section.settings.show_vendor %}
      <h2 class="product-single__vendor" itemprop="brand">{{ vendor }}</h2>
    {% endif %}

    <h1 class="product-single__title" itemprop="name">{{ title }}</h1>

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      {% comment %}
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「區段」目錄中，開啟「featured-product.liquid」檔案。
  6. 在程式碼片段中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方的某個位置。若要在檔案中找出商品名稱，請搜尋 {{ title }} Liquid 標籤。如果您找不到 {{ title }} 標籤，請搜尋 {{ product.title }} 標籤。
  7. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段： 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
    {% if section.settings.show_vendor %}
      <h2 class="product-single__vendor" itemprop="brand">{{ vendor }}</h2>
    {% endif %}

    <h1 class="product-single__title" itemprop="name">{{ title }}</h1>

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      {% comment %}
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「區段」目錄中，開啟「featured-product.liquid」檔案。
  6. 在程式碼片段中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方的某個位置。若要在檔案中找出商品名稱，請搜尋 {{ title }} Liquid 標籤。如果您找不到 {{ title }} 標籤，請搜尋 {{ product.title }} 標籤。
  7. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段： 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
    {% if section.settings.show_vendor %}
      <h2 class="product-single__vendor" itemprop="brand">{{ vendor }}</h2>
    {% endif %}

    <h1 class="product-single__title" itemprop="name">{{ title }}</h1>

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      {% comment %}
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。

舊版非區段式佈景主題

您可以在舊版非區段式佈景主題的不同頁面上新增評論、納入評論表單並顯示評論評分徽章。

在非區段式佈景主題中為商品頁面新增評論及評論表單

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  3. 在「範本」目錄中，開啟「product.liquid」。
  4. 在程式碼中找出您想要顯示評論的區域，通常位於商品說明下方。若要在檔案中找出商品說明，請搜尋 {{ product.description }} Liquid 標籤。
  5. 在包含 {{ product.description }} Liquid 標籤的程式碼下方，貼上以下程式碼片段： 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「範本」目錄中，開啟「product.liquid」。
  6. 在程式碼中找出您想要顯示評論的區域，通常位於商品說明下方。若要在檔案中找出商品說明，請搜尋 {{ product.description }} Liquid 標籤。
  7. 在包含 {{ product.description }} Liquid 標籤的程式碼下方，貼上以下程式碼片段： 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「範本」目錄中，開啟「product.liquid」。
  6. 在程式碼中找出您想要顯示評論的區域，通常位於商品說明下方。若要在檔案中找出商品說明，請搜尋 {{ product.description }} Liquid 標籤。
  7. 在包含 {{ product.description }} Liquid 標籤的程式碼下方，貼上以下程式碼片段： 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 點擊「儲存」。

在非區段式佈景主題中為商品系列頁面新增評論評分徽章

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  3. 在「程式碼片段」目錄中，開啟「product-grid-item.liquid」。在某些佈景主題中，此檔案的名稱不同。若您找不到 product-grid-item.liquid，請尋找下列內容：

    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid如果您的佈景主題沒有上述的任何檔案，您或許可以在「範本」目錄的「collection.liquid」檔案中，找到商品網格程式碼。

  4. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方的某個位置。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。

  5. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段：

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  5. 在「程式碼片段」目錄中，開啟「product-grid-item.liquid」。在某些佈景主題中，此檔案的名稱不同。若您找不到 product-grid-item.liquid，請尋找下列內容：

    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid如果您的佈景主題沒有上述的任何檔案，您或許可以在「範本」目錄的「collection.liquid」檔案中，找到商品網格程式碼。

  6. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方的某個位置。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。

  7. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段：

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  5. 在「程式碼片段」目錄中，開啟「product-grid-item.liquid」。在某些佈景主題中，此檔案的名稱不同。若您找不到 product-grid-item.liquid，請尋找下列內容：

    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid如果您的佈景主題沒有上述的任何檔案，您或許可以在「範本」目錄的「collection.liquid」檔案中，找到商品網格程式碼。

  6. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方的某個位置。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。

  7. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段：

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。

在非區段式佈景主題中為商品頁面新增評論評分徽章

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  3. 在「範本」目錄中，開啟「product.liquid」。
  4. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。
  5. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段： 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「範本」目錄中，開啟「product.liquid」。
  6. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。
  7. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段： 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。
  1. 在 Shopify 應用程式中，點選「…」按鈕。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  5. 在「範本」目錄中，開啟「product.liquid」。
  6. 在程式碼中找出您想要顯示評論評分徽章的區域，通常位於商品名稱下方。若要在檔案中找出商品名稱，請搜尋 {{ product.title }} Liquid 標籤。
  7. 在包含 {{ product.title }} Liquid 標籤的程式碼下方的新行中，貼上以下程式碼片段： 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 點擊「儲存」。

準備好開始透過 Shopify 銷售商品了嗎？

免費試用