使用 Product Reviews 應用程式
安裝了 Product Reviews 應用程式之後,您就能在商品頁面中新增評論表單,並可於商品及商品系列頁面中新增評論評分徽章。
本教學課程的步驟,會視您使用分區段或不分區段佈景主題而有所不同。分區段佈景主題是較新的佈景主題,可透過拖放操作排列商店頁面的版面配置。
若要確定您的佈景主題是否支援區段,請前往佈景主題的「編輯程式碼」頁面。如果區段目錄中有檔案,就表示您正在使用區段式佈景主題。非區段式佈景主題是在 2016 年 10 月前發佈,且在區段目錄中沒有檔案。
如果您使用的是區段式佈景主題,請按一下「區段式佈景主題」按鈕,並依照說明進行操作。如果您使用的是較舊的非區段式佈景主題,請按一下「非區段式佈景主題」按鈕,並依照說明進行操作。
在區段式佈景主題中為商品頁面新增評論及評論表單
若要將評論表單新增至商品頁面:
在 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>
您的程式碼配置可能如下所示:
<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-grid-item.liquid
,請尋找下列內容:
- product-card-grid.liquid
- product-card.liquid
- product-card-item.liquid
- product-block.liquid
- product-item.liquid
在程式碼中找出您想要顯示評論評分徽章的區域。通常會位於產品名稱下方的某個位置。若要在檔案中找出產品名稱,請搜尋
{{ product.title }}
Liquid 標籤。在包含
{{ 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-itemimage" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
<div class="h4 grid-view-itemtitle">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-itemvendor">{{ 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>
您可以嘗試將程式碼放置於檔案中的不同位置,以找出您最喜歡的配置方式。
- 點擊「儲存」。
在區段式佈景主題中為商品頁面新增評論評分徽章
若要將評論評分徽章新增至商品頁面:
在 Shopify 管理介面,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在「區段」目錄中,開啟「
product-template.liquid
」。在程式碼中找出您想要顯示評論評分徽章的區域。通常會位於產品名稱下方。若要在檔案中找出產品名稱,請搜尋
{{ product.title }}
Liquid 標籤。在包含
{{ 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>
您可以嘗試將程式碼放置於檔案中的不同位置,以找出您最喜歡的配置方式。
- 點擊「儲存」。
在區段式佈景主題中為精選商品新增評論評分徽章
若要將評論評分徽章新增至首頁的精選商品:
在 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>
您的程式碼配置可能如下所示:
<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 %}
您可以嘗試將程式碼放置於檔案中的不同位置,以找出您最喜歡的配置方式。
- 點擊「儲存」。
在非區段式佈景主題中為商品頁面新增評論及評論表單
若要將評論表單新增至商品頁面:
在 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>
您的程式碼配置可能如下所示:
<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-grid-item.liquid
,請尋找下列內容:
- product-card.liquid
- product-card-item.liquid
- product-block.liquid
如果您的佈景主題沒有上述的任何檔案,您或許可以在「範本」目錄的「collection.liquid
」檔案中,找到商品網格程式碼。
在程式碼中找出您想要顯示評論評分徽章的區域。通常會位於產品名稱下方的某個位置。若要在檔案中找出產品名稱,請搜尋
{{ product.title }}
Liquid 標籤。在包含
{{ 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-itemimage" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
<div class="h4 grid-view-itemtitle">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-itemvendor">{{ 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>
您可以嘗試將程式碼放置於檔案中的不同位置,以找出您最喜歡的配置方式。
- 點擊「儲存」。
在非區段式佈景主題中為商品頁面新增評論評分徽章
若要將評論評分徽章新增至商品頁面:
在 Shopify 管理介面,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在「範本」目錄中,開啟「
product.liquid
」。在程式碼中找出您想要顯示評論評分徽章的區域。通常會位於產品名稱下方。若要在檔案中找出產品名稱,請搜尋
{{ product.title }}
Liquid 標籤。在包含
{{ 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>
您可以嘗試將程式碼放置於檔案中的不同位置,以找出您最喜歡的配置方式。
- 點擊「儲存」。