在 Shopify 網站上添加評論
FastComments 可在 Shopify 應用程式商店 取得。從 Shopify 主題編輯器安裝此應用程式，並將 FastComments 區塊拖放到任何部落格文章、產品頁面或自訂頁面上。無需編輯程式碼。
當您安裝此應用程式時，Shopify 會為您設定 FastComments 帳戶、連結您的商店網域，並自動設定計費。您不需要另行在 fastcomments.com 註冊。
本指南中的頁面說明應用程式所提供的各個 FastComments 區塊、Shopify 客戶如何使用單一登入（SSO），以及在切換前如何匯入現有的 Shopify 評論。
安裝 FastComments 應用程式 
從 Shopify 應用商店安裝
- 開啟 FastComments 在 Shopify 應用商店的列表頁面。
- 點選 新增應用程式 並在安裝流程中選擇您想要的方案。
- 安裝完成後，Shopify 會將您重新導回 Shopify 內的 FastComments 管理介面。
這就是完整的安裝流程。您不需要將任何東西貼到主題檔案中。
為您設置的內容
安裝會自動執行您原本要手動完成的所有步驟：
- 會為您的商店建立一個 FastComments 租戶並將其連結到您的商店網域。
- 您商店的網址會被加入到該租戶的授權網域，讓評論載入時不會出現網域錯誤。
- 會寫入一個
fastcomments.tenant_idshop metafield，讓每個區塊都知道要對哪個租戶進行呈現。 - 預設會啟用您 Shopify 客戶的單一登入功能。
- 計費透過 Shopify 管理的價格機制處理。費用會顯示在您一般的 Shopify 帳單上。您可以在 Shopify 後台的 設定 > 應用程式與銷售管道 > FastComments 中升級、降級或取消。
如果您的商店在安裝此應用程式前已經是 FastComments 的客戶，安裝流程會重複使用既有的租戶，而不會建立新的租戶。
內嵌管理後台
當您從 Shopify 後台開啟 FastComments 應用程式時，會進入一個儀表板，裡面有可一鍵開啟完整 FastComments 後台的捷徑磚：
- Dashboard：帳戶設定、使用情況與訂閱詳細資訊。
- Moderation Queue：在整個商店中核准、拒絕及回覆評論。
- Customize：調整元件的顏色、字型、審核規則與設定。
- Ratings & Reviews Helper：如果您想使用「評論摘要」區塊，可在此設置星級評分與評論問題。
每個捷徑磚都會以一次性登入連結開啟 FastComments，因此您不需要另外註冊或登入。
下一步：將區塊新增到您的商店
打開 Shopify 主題編輯器（線上商店 > 主題 > 自訂），開啟您想要新增評論或評分的樣板，然後點選 新增區塊。FastComments 的區塊會顯示在 應用程式 底下。本指南的其餘部分將逐一說明每個區塊。
在部落格文章與商品上添加評論
FastComments 區塊是主要的留言小工具。可將它加入部落格文章範本、商品範本，或任何您想要討論串或即時聊天的頁面。
新增區塊
- 開啟 Shopify 佈景主題編輯器（線上商店 > 佈景主題 > 自訂）。
- 選擇您想要留言的範本：部落格文章、商品，或任何其他頁面或區段範本。
- 在您希望留言出現的區段中，點擊新增區塊。
- 在應用程式下方，選擇 FastComments。
- 點擊儲存。
區塊會立即顯示。無需輸入 Tenant ID；安裝應用程式時，您商店的租戶會自動完成設定。
設定
| 設定 | 功能說明 | 預設值 |
|---|---|---|
| Tenant ID（選填） | 覆寫區塊所使用的 FastComments 租戶。留空則使用商店自動設定的租戶。手動租戶 ID 可在 fastcomments.com/auth/my-account/api-secret 查詢。 | （空白） |
| SSO | 在留言前自動以訪客的 Shopify 顧客帳號登入。請參閱 Auto-Login Shopify Customers。 | 開啟 |
| 留言樣式 | Threaded（巢狀回覆與投票）或 Streaming（即時聊天動態）。 | Threaded |
| 自訂 URL ID | 覆寫自動偵測的頁面識別碼。當您希望兩個網址共用同一個留言串時可使用此選項。 | （自動偵測） |
頁面識別碼的決定方式
每個留言串都以 URL ID 作為索引。區塊會自動選擇一個：
- 部落格文章範本：
shopify-article-{article.id}，在網址代稱與標題變更時保持穩定。 - 商品範本：
shopify-product-{product.id}，在網址代稱與標題變更時保持穩定。 - 其他範本： �求路徑。
如果您設定了自訂 URL ID，則會改用該值。在多個區塊中使用相同的自訂 URL ID（例如在商品頁面的本地化版本上），即可共用同一個留言串。
Threaded 與 Streaming 的比較
Threaded 是預設值。訪客可以互相回覆、投票，且審核工具可正常運作。最適合部落格文章與商品評論。
Streaming 則移除巢狀結構，即時顯示新留言，就像聊天動態一樣。最適合產品發表、直播活動與社群頁面。
同一頁面上的多個區塊
同一個範本可以加入多個區塊。例如，在商品頁面頂端放置評論摘要，底部放置 FastComments 區塊。這些區塊共用同一個 URL ID，因此摘要會反映下方的留言。
提示
- 如果區塊找不到租戶，它會在佈景主題編輯器預覽中隱藏自己並顯示黃色提示。如果此情況出現在您的正式商店中，請重新安裝 FastComments 應用程式。
- 對於商品頁面，FastComments 區塊可同時作為您的商品評論小工具。搭配 FastComments - Reviews Summary 使用，即可在頁面頂端顯示星級評分摘要。
添加評論計數徽章
FastComments - Comment Count 區塊會為單一頁面顯示一個小的留言數量。請將它用於部落格文章列表、產品卡片，或任何連結到有留言頁面的範本，讓訪客在點擊進入前就能看到每個討論串的活躍程度。
新增區塊
- 開啟 Shopify 佈景主題編輯器。
- 開啟您希望顯示數量的範本。例如 Blog 範本(文章列表)或產品列表區塊。
- 在呈現每個項目的區段中，點擊 Add block。
- 在 Apps 下方，選擇 FastComments - Comment Count。
- 點擊 Save。
設定
| 設定 | 功能說明 | 預設值 |
|---|---|---|
| Tenant ID(選填) | 覆寫留言數量所讀取的 FastComments 租戶。留空則使用商店自動設定的租戶。 | (空白) |
| Custom URL ID | 覆寫留言數量查詢的頁面識別碼。當留言數量區塊與其追蹤的 FastComments 區塊位於不同頁面時使用此設定。 | (自動偵測) |
留言數量如何對應留言討論串
Comment Count 區塊使用與 FastComments 區塊相同的自動偵測邏輯：
- 部落格文章範本:
shopify-article-{article.id} - 產品範本:
shopify-product-{product.id} - 其他範本：請求路徑
如果您在頁面上的 FastComments 區塊設定了 Custom URL ID,請在 Comment Count 區塊上設定相同的 Custom URL ID,讓兩者指向同一個討論串。
提示
- 頁面上每個項目的數量會在一次請求中全部取得，因此在長列表的每個項目中加入此區塊不會產生額外的來回請求成本。
- 在列表中每篇文章或每個產品使用一個 Comment Count 區塊是預期的用法；您可以視需要新增任意數量的區塊。
添加最近評論資訊流
The FastComments - Recent Comments 區塊會顯示整個商店中最新的評論。可用於在側邊欄、頁腳或首頁區段顯示最新活動。
新增區塊
- 開啟 Shopify 主題編輯器。
- 開啟您想要放置資訊流的模板。側邊欄區段、首頁或部落格索引皆適用。
- 在應放置的區段中點擊 Add block。
- 在 Apps 下，選取 FastComments - Recent Comments。
- 點擊 Save。
設定
| 設定項目 | 功能說明 | 預設值 |
|---|---|---|
| Tenant ID（optional） | 覆寫資訊流所讀取的 FastComments 租戶。留空則使用系統自動設定的商店租戶。 | (blank) |
| Number of comments | 顯示多少則最新評論。範圍 1 到 50。 | 5 |
提示
- 每則評論皆連結至其發佈的頁面，因此此區塊同時充當「目前人們在談論什麼」的導覽提示。
- 資訊流為全店範圍。若只想顯示單一頁面的最新評論，請改在該頁面使用 FastComments 區塊。
添加最近討論資訊流
FastComments - Recent Discussions 區塊會列出您的商店中最近有留言活動的頁面，每個頁面一筆項目。當您希望訪客探索活躍的討論串而非個別留言時，可以使用此區塊。
新增區塊
- 開啟 Shopify 佈景主題編輯器。
- 開啟您想要放置動態的範本，例如側邊欄、頁尾、部落格索引或首頁區塊。
- 在應放置該區塊的區段中，點擊 Add block。
- 在 Apps 下，選擇 FastComments - Recent Discussions。
- 點擊 Save。
設定
| 設定 | 功能說明 | 預設值 |
|---|---|---|
| Tenant ID (選填) | 覆寫動態讀取的 FastComments 租戶。留空則使用商店自動設定的租戶。 | (空白) |
| Number of comments | 顯示多少則最近的討論。範圍為 1 到 50。 | 20 |
Recent Discussions 與 Recent Comments 的差異
兩個區塊都從相同的資料來源取得資料，但呈現不同的檢視方式：
- Recent Comments：以平面列表顯示最新的個別留言。最適合「剛剛說了什麼」。
- Recent Discussions：每個頁面一筆項目，按最近活動排序。最適合「目前哪些討論串還在活躍」。
您可以在同一個商店中同時使用兩者。例如，在部落格側邊欄使用 Recent Comments，在首頁使用 Recent Discussions。
添加熱門頁面清單
FastComments - Top Pages 區塊會列出您商店中整體留言活動最多的頁面。用它來突顯討論最熱烈的文章或商品。
新增此區塊
- 打開 Shopify 主題編輯器。
- 打開要放置列表的範本，例如側邊欄、頁腳或部落格索引區段。
- 在要放置該區段中，點擊 Add block。
- 在 Apps 下，選擇 FastComments - Top Pages。
- 點擊 Save。
設定
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | 覆蓋清單所讀取的 FastComments 租戶。留空則使用商店自動配置的租戶。 | (blank) |
Top Pages vs Recent Discussions
- Top Pages 以總參與度排名，因此相同的文章傾向在一段時間內保持靠前。適合用於 "popular posts" 側邊欄。
- Recent Discussions 依最近活動排序，因此列表會快速變動。適合用於 "what's hot right now" 面板。
添加評論摘要
FastComments - 評論摘要 區塊會顯示頁面的彙總星級評分與評論細分。將它與產品範本上的 FastComments 區塊搭配使用，形成標準的評論版面：上方為摘要，下方則是評論表單與評論列表。
先決條件：設定 評等與評論
評論摘要區塊會顯示您為商店設定的評分問題。請先完成這些設定：
- 在 Shopify 管理後台開啟 FastComments 應用程式。
- 點選 評等與評論小幫手 磚塊（或直接開啟 評等與評論小幫手）。
- 新增您希望每位評論者回答的問題（整體星級、「尺寸如何」等）。
如果沒有設定任何問題，摘要區塊就沒有可彙總的內容。
新增區塊
- 開啟 Shopify 主題編輯器。
- 開啟 Product 範本（或您想放置摘要的頁面範本）。
- 在頁面區段上方、FastComments 區塊上方，點選 新增區塊。
- 在 Apps 底下，選取 FastComments - Reviews Summary。
- 如果尚未新增，請在同一頁面較下方加入一個 FastComments 區塊，讓訪客可以留下評論。
- 點選 儲存。
設定
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | 覆蓋摘要所讀取的 FastComments 租戶。留空則使用商店自動設定的租戶。 | (空白) |
| Custom URL ID | 覆蓋摘要要彙總的頁面識別 ID。當摘要所在頁面與其所反映的 FastComments 區塊不同時使用此項。 | (自動偵測) |
摘要如何對應評論
評論摘要區塊使用與 FastComments 區塊相同的自動偵測邏輯：
- Product template:
shopify-product-{product.id} - Blog post template:
shopify-article-{article.id} - Other templates: the request path
對於一般的產品頁面，摘要與評論串會自動共享 URL ID，無需額外設定。
提示
- 摘要為唯讀。若要收集評論，您需要在同一頁面放置 FastComments 區塊。
- 若在收集評論後於評等與評論小幫手中變更評分問題，摘要會依新的問題集重新計算。
自動登入 Shopify 客戶
FastComments 區塊支援單一登入(SSO),讓您的 Shopify 顧客能以自己的身分留言,無需另外建立 FastComments 帳號。
運作方式
當已登入您商店的訪客開啟含有 FastComments 區塊的頁面時:
- 區塊會偵測 Shopify 的
customer物件。 - 它會透過已簽署的 app proxy 請求,將顧客的姓名與電子郵件傳送至 FastComments。
- FastComments 會以
shopify-{customerId}為鍵值建立或比對使用者,因此同一位顧客在不同工作階段與重新安裝後,始終對應到同一個 FastComments 使用者。 - 訪客的姓名會顯示在其留言上。系統不會再要求他們重新登入。
如果訪客未登入商店,區塊會退回匿名留言模式(或 FastComments 的登入流程,視您的小工具設定而定)。
關閉 SSO
每個 FastComments 區塊預設都會啟用 SSO。若要在特定區塊上關閉它:
- 開啟 Shopify 佈景主題編輯器。
- 開啟包含該區塊的範本,並點擊該區塊以選取它。
- 取消勾選 SSO。
- 點擊 儲存。
如果您希望留言者在對話中選擇不同的身分,可以關閉 SSO。例如,在內部社群頁面上,員工以不同的顯示名稱留言。
FastComments 會收到什麼
針對每位顧客傳送的 SSO 資料包含:
- 由 Shopify 顧客 ID 衍生的使用者 ID(
shopify-{customerId})。 - 顧客的電子郵件(用於識別使用者;不會公開顯示)。
- 顧客的顯示名稱(用作其留言作者名稱)。
不會傳送任何訂單紀錄、付款或地址資料。此資料由伺服器端簽署;顧客的瀏覽器永遠不會看到憑證。
登入與登出連結
當 SSO 開啟時,留言小工具的登入與登出連結會指向 /account/login 與 /account/logout,即 Shopify 標準的顧客帳號路由。無需進行任何設定。只要商店啟用了顧客帳號功能,這些連結即可正常運作。
匯入現有評論
如果您的 Shopify 部落格文章已有留言，且想保留它們，請在停用 Shopify 原生留言功能之前，將這些留言匯入 FastComments。
匯入必須在 Shopify 原生留言仍處於啟用且可見的情況下執行。一旦您停用它們，FastComments 就無法再讀取這些留言。
如何開始匯入
- 確保已在您的商店安裝 FastComments 應用程式。
- 暫時保持 Shopify 的原生留言功能 啟用。
- 開啟支援單 並告知我們要匯入哪些部落格。
匯入作業會在一天內完成。
當既有留言匯入到 FastComments 後，請在部落格文章範本中加入 FastComments 區塊，然後移除或停用 Shopify 的原生留言。參見 將留言加入部落格文章與商品。
如果您不需要保留既有留言，可以跳過此頁。
自訂設定
顏色、字體、審核規則、允許的 HTML 以及匿名評論皆可配置，以符合您商店的品牌風格。
在 Shopify 管理後台開啟 FastComments 應用，然後點選 自訂 方塊以開啟小工具自訂畫面。它使用一次性登入連結，因此您不需要另外的登入。
有關完整的自訂選項清單，請參閱 自訂與設定指南。
網域錯誤
如果您是從 Shopify App Store 安裝 FastComments，您的商店網域會自動加入該租戶的授權網域，您就不會看到網域錯誤。此頁面適用於您採用手動安裝流程，或在應用程式安裝時您的商店前台使用的是尚未在 Shopify 註冊的自訂網域。
您可能會遇到類似以下的授權錯誤：
這表示 FastComments 無法將小工具載入的網域識別為該租戶的授權網域。
要修正此問題，請將該網域新增至您的 FastComments 帳戶： 設定網域.
手動安裝（進階）
如果您無法安裝 Shopify App Store 應用程式，您仍然可以透過編輯佈景主題來新增 FastComments。當您想要串接已經擁有的 FastComments 租戶，或是在無法使用應用程式的 Shopify 店面上嵌入留言時，這個方法會很有用。
對大多數商店而言，透過應用程式安裝是官方支援的方式。只有在應用程式不適合您的情況時，才使用此方法。
步驟 1：停用 Shopify 的原生留言功能
在您的 Shopify 管理介面中，前往 Blog posts > Manage blogs，開啟每個網誌，並在右側面板中設定 Comments are disabled。儲存。
這樣可以避免 Shopify 內建的留言功能與 FastComments 同時顯示。
步驟 2：開啟網誌的佈景主題範本
在您的 Shopify 管理介面中：
- 前往 Online Store > Themes。
- 在您目前的佈景主題下，點擊 Actions > Edit code。
- 在左側的檔案瀏覽器中，開啟 Sections 並點擊
main-article.liquid。
這是 Shopify 用來呈現單篇網誌文章的範本。
步驟 3：貼上 FastComments 程式碼片段
捲動至 main-article.liquid 大約第 100 行的位置，也就是文章內容的 </div> 結束標籤之後。貼上以下程式碼片段：
將 "demo" 替換為您自己的 Tenant ID，可從 fastcomments.com/auth/my-account/api-secret 取得。點擊 Save。
步驟 4：授權您的商店網域
在您的線上商店開啟一篇網誌文章。如果您看到的是授權錯誤而非留言小工具，表示 FastComments 需要知道您的商店獲准使用此租戶。請參閱 Domain Errors。
將 FastComments 新增至其他頁面
同樣的程式碼片段可用於任何 Liquid 範本，包括產品頁面、自訂頁面和首頁。將它貼在您希望留言出現的位置，如果您想為每個頁面使用穩定的識別碼，可以調整 urlId（例如，在產品範本上使用 urlId: "{{ product.id }}"）。