使用 Product Reviews 應用程式

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

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

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

  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. 在「區段」目錄中,開啟「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. 按一下「儲存」

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

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

  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. 在「範本」目錄中,開啟「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. 在「程式碼片段」目錄中,開啟「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. 在「範本」目錄中,開啟「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. 按一下「儲存」

準備好開始透過 Shopify 銷售商品了嗎?

免費試用