使用 Product Reviews 應用程式

前往應用程式商店安裝「Product Reviews for Shopify」應用程式。

安裝了 Product Reviews 應用程式之後，您就能在商品頁面中新增評論表單，並可於商品及商品系列頁面中新增評論評分徽章。

此教學課程的步驟會因您的佈景主題架構版本而有所不同。

請點擊佈景主題架構版本的按鈕，然後按照指示將評論元素新增至您的網路商店。

Online Store 2.0

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

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

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

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
2. 尋找要編輯的佈景主題，然後點擊「自訂」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 尋找要編輯的佈景主題，然後點選「自訂」。
5. 點一下「編輯」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 尋找要編輯的佈景主題，然後點選「自訂」。
5. 點一下「編輯」。

1. 前往您想要新增評論及評論表單區段的產品範本。
2. 按一下「新增區段」。
3. 在下拉式選單的「應用程式」區段，選取「評論」應用程式區塊。
4. 選用：將應用程式區段移至頁面上您希望的位置。
5. 點擊「儲存」。

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

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
2. 尋找要編輯的佈景主題，然後點擊「自訂」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 尋找要編輯的佈景主題，然後點選「自訂」。
5. 點一下「編輯」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 尋找要編輯的佈景主題，然後點選「自訂」。
5. 點一下「編輯」。

1. 前往您要新增評論和評論表單區塊的頁面和區段。
2. 點擊新增區塊。
3. 在下拉式選單的「應用程式」區段，選取「評論」應用程式區塊。
4. 選用：將「評論區塊」移至區段中您希望的位置。
5. 點擊「儲存」。

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

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

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。
2. 尋找要編輯的佈景主題，然後點擊「自訂」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 尋找要編輯的佈景主題，然後點選「自訂」。
5. 點一下「編輯」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 尋找要編輯的佈景主題，然後點選「自訂」。
5. 點一下「編輯」。

1. 前往要新增「星級評等」的頁面和區段。
2. 點擊新增區塊。
3. 在下拉式選單的「應用程式」區段，選取「星級評等」應用程式區塊。
4. 選用：將「星級評等」區塊移至區段中您希望的位置，或自訂星評顏色、大小、對齊方式和背景資訊。
5. 點擊「儲存」。

Vintage sectioned themes

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

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「區段」目錄中，開啟「product-template.liquid」。

2. 在程式碼中找出您想要顯示評論的區域。通常會位於商品說明下方。若要在檔案中找出商品說明，請搜尋 {{ product.description }} Liquid 標籤。

3. 在包含 {{ 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」檔案。

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. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「區段」目錄中，開啟「product-template.liquid」。

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

3. 在包含 {{ 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. 點擊「儲存」。

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

備註

如果您使用 Venture，我們不建議您為精選商品使用評論評分徽章。

若要將評論評分徽章新增至首頁的精選商品：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「區段」目錄中，開啟「featured-product.liquid」檔案。

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

3. 在包含 {{ 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. 點擊「儲存」。

Vintage non-sectioned themes

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

若要將評論表單新增至商品頁面：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「範本」目錄中，開啟「product.liquid」。

2. 在程式碼中找出您想要顯示評論的區域。通常會位於商品說明下方。若要在檔案中找出商品說明，請搜尋 {{ product.description }} Liquid 標籤。

3. 在包含 {{ 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. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「程式碼片段」目錄中，開啟「product-grid-item.liquid」。

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

3. 在包含 {{ 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. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「範本」目錄中，開啟「product.liquid」。

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

3. 在包含 {{ 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. 點擊「儲存」。