使用 Product Reviews 應用程式
此頁面列印時間為 May 06, 2024。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/products/product-reviews/installation?utm_campaign=Guru-+-ASK&utm_medium=forum&utm_source=social。
備註
Product Reviews 應用程式將在 2024 年 5 月 6 日從 Shopify 移除且無法再安裝。在此之後,您將無法再存取現有的商品評論,而且您的商店將不再顯示該應用程式中的評論。若要繼續為商店收集並顯示商品評論,您需要在 2024 年 5 月 6 日前移轉到其他商品評論應用程式 。
您可以將評論表單新增至商品頁面,並檢視商品及商品系列頁面的評分徽章。 此教學課程的步驟會因您的佈景主題架構版本 而有所不同。 請根據您的佈景主題架構版本,按照指示將評論元素新增至您的網路商店。
Online Store 2.0 佈景主題 您可以在 Online Store 2.0 佈景主題中新增評論、納入評論表單並顯示星級評等。
在「Online Store 2.0」佈景主題中新增評論和評論表單 您可以將評論和評論表單應用程式區塊新增為產品範本中的區段,或在產品範本的主要產品區段新增所需區塊。這些選項適用於 Shopify Theme Store 的所有「Online Store 2.0」佈景主題。視您的佈景主題而定,您可以將其新增至其他範本或區段。
將評論和評論表單新增為區段
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
尋找要編輯的佈景主題,然後點擊「自訂 」。
前往您想要新增評論及評論表單區段的產品範本。
按一下「新增區段 」。
在下拉式選單的「應用程式 」區段,選取「評論 」應用程式區塊。
選用:將應用程式區段移至頁面上您希望的位置。
點擊「儲存 」。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點選「管理所有佈景主題 」。
尋找要編輯的佈景主題,然後點選「自訂 」。
點一下「編輯 」。
前往您想要新增評論及評論表單區段的產品範本。
按一下「新增區段 」。
在下拉式選單的「應用程式 」區段,選取「評論 」應用程式區塊。
選用:將應用程式區段移至頁面上您希望的位置。
點擊「儲存 」。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點選「管理所有佈景主題 」。
尋找要編輯的佈景主題,然後點選「自訂 」。
點一下「編輯 」。
前往您想要新增評論及評論表單區段的產品範本。
按一下「新增區段 」。
在下拉式選單的「應用程式 」區段,選取「評論 」應用程式區塊。
選用:將應用程式區段移至頁面上您希望的位置。
點擊「儲存 」。
將評論和評論表單新增為區塊
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
尋找要編輯的佈景主題,然後點擊「自訂 」。
前往您要新增評論和評論表單區塊的頁面和區段。
點擊新增區塊 。
在下拉式選單的「應用程式 」區段,選取「評論 」應用程式區塊。
選用:將「評論區塊 」移至區段中您希望的位置。
點擊「儲存 」。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點選「管理所有佈景主題 」。
尋找要編輯的佈景主題,然後點選「自訂 」。
點一下「編輯 」。
前往您要新增評論和評論表單區塊的頁面和區段。
點擊新增區塊 。
在下拉式選單的「應用程式 」區段,選取「評論 」應用程式區塊。
選用:將「評論區塊 」移至區段中您希望的位置。
點擊「儲存 」。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點選「管理所有佈景主題 」。
尋找要編輯的佈景主題,然後點選「自訂 」。
點一下「編輯 」。
前往您要新增評論和評論表單區塊的頁面和區段。
點擊新增區塊 。
在下拉式選單的「應用程式 」區段,選取「評論 」應用程式區塊。
選用:將「評論區塊 」移至區段中您希望的位置。
點擊「儲存 」。
在「Online Store 2.0」佈景主題中新增星級評等 您可以在產品範本的主要產品區段新增「星級評等」區塊。此選項適用於 Shopify Theme Store 的所有「Online Store 2.0」佈景主題。視您的佈景主題而定,您可以將其新增至其他區段和範本。
步驟:
在 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-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-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-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>
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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,開啟「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 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,開啟「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 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,開啟「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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,開啟「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 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,開啟「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 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,開啟「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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「範本 」目錄中,開啟「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 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「範本 」目錄中,開啟「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 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「範本 」目錄中,開啟「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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段 」目錄中,開啟「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>
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 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段 」目錄中,開啟「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>
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 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段 」目錄中,開啟「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>
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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「範本 」目錄中,開啟「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.
點擊「儲存 」。
在 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.
點擊「儲存 」。
在 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.
點擊「儲存 」。