
語言 🇹🇼 繁體中文
Shopify 安裝
在 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 的區塊會顯示在 應用程式 底下。本指南的其餘部分將逐一說明每個區塊。
在部落格文章與商品頁新增留言 
The FastComments 區塊是主要的留言小工具。將它加入部落格文章範本、商品範本,或任何你想要討論串或即時聊天的頁面。
Add the block
- Open the Shopify theme editor (Online Store > Themes > Customize).
- Pick the template you want comments on: Blog post, Product, or any other page or section template.
- In the section where you want comments to appear, click Add block.
- Under Apps, select FastComments.
- Click Save.
The block appears immediately. There is no Tenant ID to enter; your store's tenant is wired up automatically when you install the app.
Settings
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | 覆蓋此區塊所渲染的 FastComments 租戶。留空以使用商店自動設定的租戶。可在 fastcomments.com/auth/my-account/api-secret 找到手動的租戶 ID。 | (空白) |
| SSO | 在留言前自動將訪客以其 Shopify 客戶帳號登入。請參見 Auto-Login Shopify Customers。 | 開啟 |
| Commenting Style | 使用 Threaded 以支援巢狀回覆與投票,或使用 Streaming 以實時顯示像聊天訊息流的留言。 | Threaded |
| Custom URL ID | 覆蓋自動偵測的頁面識別碼。當你希望兩個 URL 共用同一討論串時使用此項。 | (自動偵測) |
How the page identifier is chosen
Each comment thread is keyed by a URL ID. The block picks one automatically:
- Blog post template:
shopify-article-{article.id}, which is stable across slug and title changes. - Product template:
shopify-product-{product.id}, which is stable across slug and title changes. - Other templates: the request path.
If you set Custom URL ID, that value is used instead. Use the same Custom URL ID across multiple blocks (for example, on a localized variant of a product page) to share one comment thread.
Threaded vs Streaming
Threaded is the default. Visitors reply to each other, vote, and moderation tools work as expected. Best for blog posts and product reviews.
Streaming drops the threading and shows new comments in real time as they're posted, like a chat feed. Best for product launches, live events, and community pages.
Multiple blocks on the same page
The block can be added more than once to the same template. For example, a Reviews Summary at the top of a product page and a FastComments block at the bottom. The blocks share a URL ID, so the summary reflects the comments below.
Tips
- The block hides itself in the theme editor preview with a yellow notice if it can't find a tenant. If that appears in your live store, reinstall the FastComments app.
- For a product page, the FastComments block doubles as your product reviews widget. Pair it with FastComments - Reviews Summary for a star-rating summary at the top of the page.
新增留言數量徽章 
The FastComments - Comment Count block 會在單一頁面上呈現一個小型的留言數。將它用在部落格文章列表、商品卡片或任何連到有留言之頁面的範本中,讓訪客在點入之前就能看到每個討論串的活躍程度。
Add the block
- 開啟 Shopify 主題編輯器。
- 開啟你想要顯示計數的範本。例如,Blog 範本(文章列表)或商品列表區段。
- 在呈現每個項目的區段中,點選 Add block。
- 在 Apps 底下,選取 FastComments - Comment Count。
- 點選 Save。
Settings
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | 覆寫 Comment Count 要讀取的 FastComments 租戶。留空以使用商店自動設定的租戶。 | (空白) |
| Custom URL ID | 覆寫計數要查詢的頁面識別碼。當計數位於與其追蹤之 FastComments 區塊不同的頁面時使用此項。 | (自動偵測) |
How the count matches the comment thread
Comment Count 區塊使用與 FastComments 區塊相同的自動偵測邏輯:
- Blog post template:
shopify-article-{article.id} - Product template:
shopify-product-{product.id} - Other templates: the request path
如果你在某頁面的 FastComments 區塊上設定了 Custom URL ID,請在 Comment Count 區塊上設定相同的 Custom URL ID,以便它們指向相同的討論串。
Tips
- 頁面上每個項目的計數會在一次請求中取得,因此在長列表的每個項目都加入該區塊不會產生額外的往返成本。
- 在列表中,每篇文章或每個商品使用一個 Comment Count 區塊是預期的用法;你可以視需要重複新增此區塊。
新增近期留言串流 
The FastComments - Recent Comments block shows the most recent comments across your whole store. Use it to show fresh activity in a sidebar, footer, or homepage section.
Add the block
- Open the Shopify theme editor.
- Open the template where you want the feed. A sidebar section, the home page, or the blog index all work well.
- Click Add block in the section that should hold it.
- Under Apps, select FastComments - Recent Comments.
- Click Save.
Settings
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | Override which FastComments tenant the feed reads from. Leave blank to use the store's automatically-configured tenant. | (blank) |
| Number of comments | How many recent comments to show. Range 1 to 50. | 5 |
Tips
- Each comment links to the page it was posted on, so the block doubles as a "what people are talking about right now" navigation hint.
- The feed is store-wide. To show recent comments for a single page, use the FastComments block on that page instead.
新增近期討論串流 
The FastComments - Recent Discussions block 列出商店中最近有評論活動的頁面,每頁一個條目。當你想要讓訪客發現活躍的討論串而不是單一評論時,請使用它。
Add the block
- 開啟 Shopify 主題編輯器。
- 開啟你希望顯示此餵送的範本,例如側邊欄、頁腳、部落格索引或首頁區段。
- 在應該放置此區塊的區段中點選 Add block。
- 在 Apps 下選擇 FastComments - Recent Discussions。
- 點選 Save。
Settings
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | 覆寫此餵送要讀取的 FastComments 租戶。留空以使用商店自動設定的租戶。 | (blank) |
| Number of comments | 要顯示的近期討論數量。範圍為 1 到 50。 | 20 |
Recent Discussions vs 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 顧客自動登入 
The FastComments 區塊支援單一登入(SSO),讓你的 Shopify 客戶可以使用自身帳號發表留言,而無需建立獨立的 FastComments 帳戶。
How it works
When a visitor who is logged into your store opens a page with the FastComments block:
- The block detects the Shopify
customerobject. - It sends the customer's name and email to FastComments through a signed app proxy request.
- FastComments creates or matches a user keyed by
shopify-{customerId}, so the same customer always maps to the same FastComments user across sessions and re-installs. - The visitor's name shows up on their comments. They are not prompted to log in again.
If the visitor is not logged into the store, the block falls back to anonymous commenting (or the FastComments sign-in flow, depending on your widget configuration).
Turning SSO off
SSO is on by default for every FastComments block. To turn it off on a specific block:
- Open the Shopify theme editor.
- Open the template that contains the block and click the block to select it.
- Uncheck SSO.
- Click Save.
Turn SSO off if you want commenters to choose a separate identity for the conversation. For example, an internal community page where staff comment under a different display name.
What FastComments receives
The SSO payload sent for each customer contains:
- A user ID derived from the Shopify customer ID (
shopify-{customerId}). - The customer's email (used to identify the user; not displayed publicly).
- The customer's display name (used as their comment author name).
No order history, payment, or address data is sent. The payload is signed server-side; the customer's browser never sees a credential.
Login and logout links
When SSO is on, the comment widget's sign-in and sign-out links point at /account/login and /account/logout, the standard Shopify customer account routes. There is nothing to configure. The links work for any store with customer accounts enabled.
匯入現有留言 
如果您的 Shopify 部落格文章已有留言,且想保留它們,請在停用 Shopify 原生留言功能之前,將這些留言匯入 FastComments。
匯入必須在 Shopify 原生留言仍處於啟用且可見的情況下執行。一旦您停用它們,FastComments 就無法再讀取這些留言。
如何開始匯入
- 確保已在您的商店安裝 FastComments 應用程式。
- 暫時保持 Shopify 的原生留言功能 啟用。
- 開啟支援單 並告知我們要匯入哪些部落格。
匯入作業會在一天內完成。
當既有留言匯入到 FastComments 後,請在部落格文章範本中加入 FastComments 區塊,然後移除或停用 Shopify 的原生留言。參見 將留言加入部落格文章與商品。
如果您不需要保留既有留言,可以跳過此頁。
自訂 
顏色、字體、審核規則、允許的 HTML 以及匿名評論皆可配置,以符合您商店的品牌風格。
在 Shopify 管理後台開啟 FastComments 應用,然後點選 自訂 方塊以開啟小工具自訂畫面。它使用一次性登入連結,因此您不需要另外的登入。
有關完整的自訂選項清單,請參閱 自訂與設定指南。
網域錯誤 
如果您是從 Shopify App Store 安裝 FastComments,您的商店網域會自動加入該租戶的授權網域,您就不會看到網域錯誤。此頁面適用於您採用手動安裝流程,或在應用程式安裝時您的商店前台使用的是尚未在 Shopify 註冊的自訂網域。
您可能會遇到類似以下的授權錯誤:
這表示 FastComments 無法將小工具載入的網域識別為該租戶的授權網域。
要修正此問題,請將該網域新增至您的 FastComments 帳戶: 設定網域.
手動安裝(進階) 
如果你無法安裝 Shopify App Store app,你仍然可以透過編輯佈景主題來加入 FastComments。當你想要串接已擁有的 FastComments tenant,或是在無法使用 App 的 Shopify 商店上嵌入評論時,這種做法會很有用。
以 App 為基礎的安裝是大多數商店的建議方式。只有在 App 無法滿足需求時才採用此方法。
Step 1: Disable Shopify's native comments
在你的 Shopify 管理後台,前往 Blog posts > Manage blogs,打開每一個部落格,並在右側面板中將 Comments are disabled 設定好。儲存。
這會避免 Shopify 內建的評論系統與 FastComments 同時顯示。
Step 2: Open the blog theme template
在你的 Shopify 管理後台:
- 前往 Online Store > Themes。
- 在你目前的佈景主題下,點選 Actions > Edit code。
- 在左側的檔案瀏覽器中,打開 Sections 並點選
main-article.liquid。
這是 Shopify 在呈現單篇部落格文章時所使用的模板。
Step 3: Paste the FastComments snippet
捲動到 main-article.liquid 大約第 100 行、文章內容的 </div> 關閉標籤之後。貼上以下片段:

將 "demo" 換成你在 fastcomments.com/auth/my-account/api-secret 上的 Tenant ID。點選 Save。
Step 4: Authorize your shop domain
在你的線上商店開啟一篇部落格文章。如果你看到授權錯誤而非評論元件,表示 FastComments 需要知道你的商店被允許使用該 tenant。請參閱 Domain Errors。
Adding FastComments to other pages
相同的片段可用於任何 Liquid 模板,包括商品頁、客製化頁面與首頁。將它貼到你希望顯示評論的位置,並在需要每頁使用穩定識別碼時調整 urlId(例如在商品模板上使用 urlId: "{{ product.id }}")。