使用 Product Reviews 應用程式

前往 App Store 安裝 Product Reviews for Shopify

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

本教學課程的步驟，會視您使用分區段或不分區段佈景主題而有所不同。分區段佈景主題是較新的佈景主題，可透過拖放操作排列商店頁面的版面配置。

若要確定您的佈景主題是否支援區段，請前往佈景主題的「編輯程式碼」頁面。如果區段目錄中有檔案，就表示您正在使用區段式佈景主題。非區段式佈景主題是在 2016 年 10 月前發佈，且在區段目錄中沒有檔案。

如果您使用的是區段式佈景主題，請按一下「區段式佈景主題」按鈕，並依照說明進行操作。如果您使用的是較舊的非區段式佈景主題，請按一下「非區段式佈景主題」按鈕，並依照說明進行操作。

區段式佈景主題 非區段式佈景主題

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

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

桌上版

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>

您的程式碼配置可能如下所示：

<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 - product-item.liquid

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

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

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

您的程式碼配置可能如下所示：

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

您可以嘗試將程式碼放置於檔案中的不同位置，以找出您最喜歡的配置方式。

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>

您的程式碼配置可能如下所示：

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

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

您可以嘗試將程式碼放置於檔案中的不同位置，以找出您最喜歡的配置方式。

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>

您的程式碼配置可能如下所示：

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

您可以嘗試將程式碼放置於檔案中的不同位置，以找出您最喜歡的配置方式。

1. 點擊「儲存」。

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

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

桌上版

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>

您的程式碼配置可能如下所示：

<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」。

   在某些佈景主題中，此檔案的名稱不同。若您找不到 product-grid-item.liquid，請尋找下列內容：

- product-card.liquid - product-card-item.liquid - product-block.liquid

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

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

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

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

您的程式碼配置可能如下所示：

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

您可以嘗試將程式碼放置於檔案中的不同位置，以找出您最喜歡的配置方式。

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>

您的程式碼配置可能如下所示：

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

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

您可以嘗試將程式碼放置於檔案中的不同位置，以找出您最喜歡的配置方式。

1. 點擊「儲存」。