使用 Product Reviews 應用程式
安裝了 Product Reviews 應用程式之後,您就能在商品頁面中新增評論表單,並可於商品及商品系列頁面中新增評論評分徽章。
此教學課程的步驟會因您的佈景主題架構版本而有所不同。
請點擊佈景主題架構版本的按鈕,然後按照指示將評論元素新增至您的網路商店。
在「Online Store 2.0」佈景主題中新增評論和評論表單
您可以將評論和評論表單應用程式區塊新增為產品範本中的區段,或在產品範本的主要產品區段新增所需區塊。這些選項適用於 Shopify 佈景主題商店的所有「Online Store 2.0」佈景主題。視您的佈景主題而定,您可以將其新增至其他範本或區段。
將評論和評論表單新增為區段
- 在 Shopify 管理介面,前往「線上商店」 > 「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 前往您想要新增評論及評論表單區段的產品範本。
- 按一下「新增區段」。
- 在下拉式選單的「應用程式」區段,選取「評論」應用程式區塊。
- 選用:將應用程式區段移至頁面上您希望的位置。
- 點擊「儲存」。
將評論和評論表單新增為區塊
- 在 Shopify 管理介面,前往「線上商店」 > 「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 前往您要新增評論和評論表單區塊的頁面和區段。
- 點擊新增區塊。
- 在下拉式選單的「應用程式」區段,選取「評論」應用程式區塊。
- 選用:將「評論區塊」移至區段中您希望的位置。
- 點擊「儲存」。
在「Online Store 2.0」佈景主題中新增星級評等
您可以在產品範本的主要產品區段新增「星級評等」區塊。此選項適用於 Shopify 佈景主題商店的所有「Online Store 2.0」佈景主題。視您的佈景主題而定,您可以將其新增至其他區段和範本。
- 在 Shopify 管理介面,前往「線上商店」 > 「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 前往要新增「星級評等」的頁面和區段。
- 點擊新增區塊。
- 在下拉式選單的「應用程式」區段,選取「星級評等」應用程式區塊。
- 選用:將「星級評等」區塊移至區段中您希望的位置,或自訂星評顏色、大小、對齊方式和背景資訊。
- 點擊「儲存」。
在區段式佈景主題中為商品頁面新增評論及評論表單
在 Shopify 管理介面,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在「區段」目錄中,開啟「
product-template.liquid
」。在程式碼中找出您想要顯示評論的區域。通常會位於商品說明下方。若要在檔案中找出商品說明,請搜尋
{{ product.description }}
Liquid 標籤。在包含
{{ 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>
- 點擊「儲存」。
在區段式佈景主題中為商品系列頁面新增評論評分徽章
在 Shopify 管理介面,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,然後按一下「動作」>「編輯代碼」。
在「程式碼片段」目錄中,開啟「
product-grid-item.liquid
」檔案。在程式碼中找出您想要顯示評論評分徽章的區域。通常會位於產品名稱下方的某個位置。若要在檔案中找出產品名稱,請搜尋
{{ product.title }}
Liquid 標籤。在包含
{{ 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.
- 點擊「儲存」。
在區段式佈景主題中為商品頁面新增評論評分徽章
若要將評論評分徽章新增至商品頁面:
在 Shopify 管理介面,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在「區段」目錄中,開啟「
product-template.liquid
」。在程式碼中找出您想要顯示評論評分徽章的區域。通常會位於產品名稱下方。若要在檔案中找出產品名稱,請搜尋
{{ product.title }}
Liquid 標籤。在包含
{{ 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.
- 點擊「儲存」。
在區段式佈景主題中為精選商品新增評論評分徽章
若要將評論評分徽章新增至首頁的精選商品:
在 Shopify 管理介面,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在「區段」目錄中,開啟「
featured-product.liquid
」檔案。在程式碼片段中找出您想要顯示評論評分徽章的區域。通常會位於產品名稱下方的某個位置。若要在檔案中找出產品名稱,請搜尋
{{ title }}
Liquid 標籤。如果您找不到{{ title }}
標籤,請搜尋{{ product.title }}
標籤。在包含
{{ 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.
- 點擊「儲存」。
在非區段式佈景主題中為商品頁面新增評論及評論表單
若要將評論表單新增至商品頁面:
在 Shopify 管理介面,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在「範本」目錄中,開啟「
product.liquid
」。在程式碼中找出您想要顯示評論的區域。通常會位於商品說明下方。若要在檔案中找出商品說明,請搜尋
{{ product.description }}
Liquid 標籤。在包含
{{ 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>
- 點擊「儲存」。
在非區段式佈景主題中為商品系列頁面新增評論評分徽章
若要將評論評分徽章新增至商品系列頁面:
在 Shopify 管理介面,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在「程式碼片段」目錄中,開啟「
product-grid-item.liquid
」。在程式碼中找出您想要顯示評論評分徽章的區域。通常會位於產品名稱下方的某個位置。若要在檔案中找出產品名稱,請搜尋
{{ product.title }}
Liquid 標籤。在包含
{{ 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.
- 點擊「儲存」。
在非區段式佈景主題中為商品頁面新增評論評分徽章
若要將評論評分徽章新增至商品頁面:
在 Shopify 管理介面,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
在「範本」目錄中,開啟「
product.liquid
」。在程式碼中找出您想要顯示評論評分徽章的區域。通常會位於產品名稱下方。若要在檔案中找出產品名稱,請搜尋
{{ product.title }}
Liquid 標籤。在包含
{{ 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.
- 點擊「儲存」。