圖片[1]-免費Shopify插件 Product Review 產品評價應用安裝設置教程 | 歪貓跨境 | WaimaoB2C-歪貓跨境 | WaimaoB2C

Shopify插件Product Review是Shopify官方出品的一款完全免費的Review應用。如果你前期預算有限,可以先使用Product Review這個應用爲你的網站添加評價功能,和其他產品評價插件相比,Product Review的功能相對簡單,中規中矩,不過也能滿足用戶的基本需求,等到後面如果需要更多的功能,例如在Reivew中插入圖片,一鍵導入亞馬遜速賣通的產品評價等等功能的話,再換成其他功能更加強大的Review應用如LooxRyviu等等。

圖片[2]-免費Shopify插件 Product Review 產品評價應用安裝設置教程 | 歪貓跨境 | WaimaoB2C-歪貓跨境 | WaimaoB2C

最近 Shopify 在國內不太穩定,如果打不開 Shopify 官網, 或者打開速度很慢,無法註冊或者登錄 Shopify 賬戶,請使用“魔法”重試,你懂的。

Shopify插件Product Review的安裝

安裝過程很簡單,直接在Shopify插件市場搜索Product Review然後安裝即可,如下圖所示。

圖片[3]-免費Shopify插件 Product Review 產品評價應用安裝設置教程 | 歪貓跨境 | WaimaoB2C-歪貓跨境 | WaimaoB2C

插件安裝成功之後,還需要你自己修改主題的代碼讓Review版塊正常顯示到網站前臺產品頁面中,而其他同類型插件都可以完成自動修改主題代碼,雖然Product Review提供瞭如下圖所示的代碼安裝教程,不過對於大部分朋友來說,仍然要花不少時間才能正確完成代碼的添加,因此Product Review這個應用顯得就沒有那麼的人性化了。

圖片[4]-免費Shopify插件 Product Review 產品評價應用安裝設置教程 | 歪貓跨境 | WaimaoB2C-歪貓跨境 | WaimaoB2C

不過如果你對代碼一無所知,如果你用的是Shopify的免費或者主題,建議你聯繫Shopify的客服幫你修改下面的代碼,如果你用的是第三方主題,也可以嘗試聯繫Shopify的客服或者主題的開發者幫你完成插件代碼的修改。對他們來說可能一分鐘不到就可以幫你搞定,你就沒有必要再去花時間研究這個東西了,而且如果沒有經驗你搞一天都未必能夠搞的定。

另外,下面的所有演示操作都是基於Shopify免費主題Brooklyn的,如果你用的是其他主題,要修改的主題文件以及代碼位置大概率上會有所不同。所以以下操作僅供參考,還是那句話,讓客服幫你搞定下面的操作是最高效,最佳的解決辦法。

代碼的安裝分三個部分:

  • 插入代碼將Review主版塊添加到產品頁面中
  • 插入代碼將Review Rating Star添加到產品標題的下方
  • 插入代碼將Review Rating Star添加到分類頁面產品標題下方

插入代碼將Review主版塊添加到產品頁面中

Brooklyn主題,依次打開 Online Store – Themes – Actions – Edit Code,然後找到文件夾 Sections 下的文件 product-template.liquid, 在文件內搜索“description”,按照Product Review提供的教程找到如下所示代碼行,並將其提供的代碼插入到指定位置。保存文件即可。

<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>
{% if section.settings.social_sharing_products %}
{% include ''social-sharing'', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
{% endif %}
{{ product.description }}
{{ product.metafields.spr.reviews }}
{% if section.settings.social_sharing_products %} {% include ''social-sharing'', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %} {% endif %}
{{ product.description }}
{{ product.metafields.spr.reviews }}
{% if section.settings.social_sharing_products %}  {% include ''social-sharing'', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %} {% endif %}

在上面的代碼中,紅色部分代碼就是我們插入的 產品評價 版塊的代碼,黃色部分內容就是產品頁面產品描述版塊的代碼。產品評價代碼在產品描述代碼的下方,因此在前臺產品頁面顯示中,產品評價版塊也是顯示在產品描述版塊下方的。如果你想將產品評價顯示在產品描述的上方,只需要將上面紅色字體的部分插入到黃色字體部分的上方即可。

修改好代碼之後點擊右上角的保存按鈕即可。

圖片[5]-免費Shopify插件 Product Review 產品評價應用安裝設置教程 | 歪貓跨境 | WaimaoB2C-歪貓跨境 | WaimaoB2C

上面添加的代碼在Shopify網站產品頁面前臺顯示的效果如下圖中 2 所示的效果,產品評價出現在了產品描述的下方。

圖片[6]-免費Shopify插件 Product Review 產品評價應用安裝設置教程 | 歪貓跨境 | WaimaoB2C-歪貓跨境 | WaimaoB2C

插入代碼將Review Rating Star添加到產品標題的下方

上面的操作只是將產品評價的主版塊添加到了產品頁面描述的下方,如果你想像上圖一樣,在標題的下方插入評價星級 Rating Star,則你還需要在同一個文件,也就是 product-template.liquid 文件中再插入一行代碼。在文件中搜索“h1”,然後找到如下所示的代碼段,將紅色代碼部分內容插入到文件中即可。

{{ product.title }}

上面的代碼中,黃色部分內容就是產品頁面的標題,紅色部分內容是我們插入的Rating Star代碼。如果你想讓Rating Star出現在標題的上方,則只需要將上面紅色部分的代碼內容挪到黃色代碼的上方即可。

修改好之後保存,如下圖所示。最終前臺產品頁面的顯示效果如上圖中 1 所展示的效果。

插入代碼將Review Rating Star添加到分類頁面產品標題下方

下面的操作也是可選的,如果你想將Rating Star插入到產品分類頁面的標題下方,實現如下圖所示 “3”所顯示的效果,則需要繼續操作。

要在Collection頁面的產品標題下方添加Rating Star,對於Brooklyn主題來說,同樣打開Edit Code頁面,然後在Snippets文件夾下找到文件 product-grid-item.liquid。然後按照Product提供的教程,將其提供的代碼插入到文件指定位置中。


      {{ product.title }}
      
        
        
          {% if on_sale %}
            {{ ''products.general.sale_price'' | t }}
          {% else %}
             {{ ''products.general.regular_price'' | t }}
          {% endif %}
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            
              
              +
            
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        
        {%- if product.price_varies == false and variant.unit_price_measurement -%}
          {%- capture unit_price_separator -%}
             {{ ''general.accessibility.unit_price_separator'' | t }} 
          {%- endcapture -%}
          {%- capture unit_price_base_unit -%}
            
              {%- if variant.unit_price_measurement.reference_value != 1 -%}
                {{- variant.unit_price_measurement.reference_value -}}
              {%- endif -%}
              {{ variant.unit_price_measurement.reference_unit }}
            
          {%- endcapture -%}
          
            {{ ''products.general.unit_price'' | t }}
            {{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
          
        {%- endif -%}
      
      
      {% if section.settings.product_vendor_enable %}
        

{{ product.vendor }}

     {% endif %}

添加好之後保存文件,在網站前臺顯示的效果就如上圖所示。

完成以上操作之後,回到Product Review後臺頁面,點擊如下圖所示的 Verify and continue 按鈕,讓系統來驗證下你的代碼是否已經成功安裝。

代碼安裝沒有問題的話,就會出現如下圖所示的彈窗。

一鍵還原對文件代碼的修改

如果代碼的操作有問題,導致頁面排版混亂,而你又不知道哪裏出現了問題,不知道如何操作的時候,你可以將你的所有操作一鍵還原。Shopify系統會在我們修改文件的時候,以日誌的形式自動生成備份文件。出現問題之後可以一鍵還原到之前的文件內容。

例如我們剛剛修改了product-template.liquid文件,如果我們添加的代碼或者修改的代碼出現了錯誤,導致網站前臺顯示出現了問題,你可以點擊文件名稱右側的 Older versions,然後在下拉選項中選擇之前任意的版本即可恢復。選擇Original 就可以恢復到我們剛剛安裝該主題的時候未經任何修改的文件版本。

完成代碼的修改之後,就完成了Product Review插件的安裝。再強調一遍,上面的操作基於Brooklyn這個免費主題進行設置的,其他主題大概率上是不適用的。如果你沒有代碼操作的經驗,建議直接聯繫Shopify的客服,讓他們幫你完成以上的設置,不要在這些事情上浪費時間。

再下一步就是進行插件的基本設置。

Review 插件的基本設置

進入到Product Review的後臺,點擊右上角的Setting按鈕,打開如下圖所示的頁面。按照你的需求依次進行設置即可。

Auto publish 選擇Disabled的話,需要你審覈通過的Review纔會在前臺顯示。
Email settings 收到新的review之後是否郵件通知你。
Star Icon Color 設置前臺 Rating Star的顏色。

Review listing layout 設置的是網站前臺 Review 版塊的顯示樣式,例如該版塊的顯示方式,邊框顏色,版塊之間的間距,以及每頁顯示的Review的數量。

Review listing text 設置的是網站前臺 Review 版塊文字部分內容,你可以隨意修改這些文字內容,或者使用默認文字內容。

Review Form text 設置的是Review版塊文本框中預留的文字內容,你可以隨意修改這些文字。勾選 Show review form on load 的話,會直接在前臺顯示完整的表單要客戶提交Review。如果不勾選的話,則前臺只顯示文字 “Write a review”當用戶點擊文字鏈接之後,纔會顯示完整的 Review 表單

Badge Text 顯示的是 Rating Star 部分的顯示樣式,按照你的需求修改就行。

如果你設置的是 Disabled Auto Publish,則當有用戶提交新的Review的時候,在你的後臺可以看到用戶的測評狀態處於 Unpublished 狀態,你需要手動Publish,然後這條Review內容纔會在網站前臺顯示出來。

Disabled Auto Publish 雖然可以有效的控制差評在前臺顯示的數量,但是不能僅僅靠隱藏差評來解決問題,而是要重視並且及時解決差評客戶遇到的售前售後的問題,才能保障品牌口碑,以及收款賬戶的安全。

使用表格批量上傳產品評價

在前期,你的網站上沒有評價的時候,你可以自己在自己的產品頁面刷好評,來提高網站的轉化率,尤其是當你給產品打廣告的時候,一定要先給你的產品頁面刷幾個十幾個甚至幾十個好評之後,再去打廣告,可以有效的提高網站的轉化率,避免“燒錢”的情況發生。刷好評的意思不是說全部留5星好評啊,要適當的刷一些4星的好評,讓評價數據看起來更真實一些。雖然不少用戶知道不少網站上的評價是“Fake Review”但是購買行爲或多或少還是會受評價的影響。

從前臺一個一個刷評價會很慢,你可以使用表格批量導入評價。例如用爬蟲工具從亞馬遜速賣通爬數據,然後將抓到的內容整理到Product Review的批量上傳表格中一鍵上傳,就可以一次性給你的網站導入成千上萬條評價數據。

如下圖所示,你可以點擊CSV template鏈接下載批量上傳Review的表格模板,然後填寫表格內容再上傳。

如下圖所示就是Review批量上傳表格。

Product handle就是產品鏈接地址Product後面部分的內容,例如你的產品鏈接地址是 yourdomain.com/product/dog-seat-cover, 那麼,該產品的product handle就是 dog-seat-cover,你需要將 “dog-seat-cover ”填寫到表格中。在Shopify網站中,每個產品的Product handle都是唯一的。

  • Stats是該條review的發佈狀態,published 則該條Review會直接在前臺顯示出來。
  • Rating可以填寫的數字爲1-5,也就是星級。
  • Title是該條review的標題
  • Author是留評人的姓名
  • Email是留評人的郵箱地址
  • Location是留評人所在區域
  • Body是Review的具體內容
  • Reply是你對Review內容的回覆
  • Created 是Review的發佈時間
  • Replied 是你對Review回覆的時間

對於用戶發佈的Review內容,你能進行的操作只有刪除或者隱藏,無法編輯用戶發佈的Review的具體內容。更重要的是,該shopify插件目前只支持文字Review,不支持在其中插入圖片。而用戶提交的Review圖片對網站轉化率的影響又非常大,因此說,Product Review在網站發展前期流量相對較小的時候,能夠滿足基本的需求,你可以把它作爲一個過渡解決方案,當網站流量逐漸增大,預算充足的時候,建議換成類似Loox,Ryviu等等更強大的Review工具,來提高網站的轉化率。

圖片[7]-免費Shopify插件 Product Review 產品評價應用安裝設置教程 | 歪貓跨境 | WaimaoB2C-歪貓跨境 | WaimaoB2C