如何建立 Shopify AI 購物助理

Piotr Grudzień
發布日期 閱讀時間約 23 分鐘
建立 Shopify AI 購物助理,配圖為可眺望全景山景的高山滑雪板展示間

Shopify AI 購物助理可協助訪客描述需求,搜尋你的目錄,並說明一小組相符商品。在本教學中,你會建立一個助理,它會詢問滑行偏好、在預算內比較滑雪板,並在聲稱供貨狀態前檢查指定顏色或尺寸。

範例是 Quickboards,一家虛構的滑雪板商店。我們在本機執行的 Quickchat AI App 中建立它的 Agent,連接到真實的 Shopify 示範目錄,並錄製下方對話。商品卡片包含實際目錄圖片與示範價格。高山插圖是 AI 生成的編輯用插圖,不是另一項待售商品。

你也會學到如何檢查回覆背後的工具、批次測試助理,並可選擇性地追蹤購物車到 AI-Assisted Revenue。歸因範例使用清楚標示的本機示範訂單,不是真實銷售。

完成後的體驗是一個專用商品搜尋頁面,內含 inline 對話:

Quickboards 商品搜尋器示範頁面,左側是滑雪板插圖,右側是真實嵌入的購物對話 本機執行的示範頁面使用真實的 Quickchat AI Embed 與即時 Shopify 目錄。這不是已發布 Shopify theme 的截圖。測試章節中有更近距離的推薦畫面。

重要檢查會在連線成功後進行。我們的目錄在描述中提到 144–160 cm 的長度,但沒有公開可選的 Size 選項。變體測試顯示 Agent 如何處理這個缺口,而不承諾有 156 cm 的板子。

你會建立什麼,需要準備什麼?

你會建立一個對話式商品搜尋器,收集三項有用偏好,最多顯示兩項推薦,並讓購物者微調選擇。

這是 product recommendation chatbot 的具體實作。它支援像「中階滑雪者、整理過的雪道、最高 $800」這類簡述,也支援需要協助表達這些偏好的訪客。它不要求每位訪客都完成相同問卷。

開始前:

  1. 建立 Quickchat AI account,或使用既有帳號。Free 包含 MCP 存取權與每月 50 個 AI credits,可用於個人非商業測試。對話與 Simulation 測試會消耗 credits。商家部署請選擇 commercial-use plan。
  2. 準備好 Shopify 商店的根 URL,例如 https://your-store.myshopify.com。若要重現我們的目錄特定測試,請使用 https://quickchat-ai.myshopify.com,也就是 Quickchat AI 的示範商店。其示範資料可能變更,比較價格前請檢查目前結果。
  3. 部署時,請具備編輯網站或 Shopify theme 的權限。具備 Custom Liquid section 的 theme,例如 Dawn,可以承載 inline snippet。你也可以使用完整的 standalone page template。

先完成 Steps 1–7 的純比較搜尋器。之後的選用章節會加入購物車建立、訂單歸因與訊息渠道。Agent 不會收款或保留庫存,購物者會在 Shopify checkout 完成任何購買。

已經在評估不同 Shopify apps?我們的 Shopify AI chatbot comparison 涵蓋該決策。本指南專注於建立與測試商品搜尋流程。

助理如何從 Shopify 選擇商品?

Agent 會結合購物者偏好與 Shopify 傳回的商品資料,然後在對話中說明候選清單。

三欄顯示購物者偏好、目錄事實與兩項商品候選清單 購物者提供限制條件。Shopify 提供商品事實。模型決定哪些傳回候選項目相符,以及如何說明。

Shopify MCP 是 Agent 與商店公告工具之間的連線。MCP 代表 Model Context Protocol。你輸入商店 URL,Quickchat AI 會處理工具探索與目錄請求。本教學不需要貼上自訂 REST action、request body 或 Shopify Admin API key。

測試時,這項分工很重要:

值或行為來源要驗證什麼
滑行程度、地形與預算訪客訊息對話繼續時,Agent 仍保留這些限制
商品標題、圖片、價格與幣別目錄回應卡片與說明和傳回商品一致
已選選項與供貨狀態目錄中的確切變體每個要求的選項都屬於同一個可供應組合
要推薦哪些商品模型對傳回事實的解讀推薦符合類別、預算與使用情境
要問幾個問題或顯示幾張卡片Agent 指令行為在重複測試中保持一致

搜尋結果是候選項目。它仍可能是錯誤類別或不佳匹配。同樣地,商品存在於目錄中,不代表每一種顏色與尺寸組合都可供應。

Shopify 在其 Storefront Catalog MCP guide 中記錄目錄工具介面。如需此整合背後商品資料問題的更多細節,請參閱我們的 Shopify MCP engineering notes。

如何建立購物助理?

手動建立 Agent,指定商品搜尋工作,並不要把商品價格放入 Knowledge Base。

Step 1. 完成初始設定

  1. 使用 Google 或電子郵件註冊。如果使用電子郵件,登入前請先依照驗證信操作。
  2. 在初始設定畫面選擇 Set up manually。
  3. 在 Identity 中,於 Name your AI Agent 輸入 Quickboards Guide。在 Describe what you want your agent to do 中輸入:
你是 Quickboards Guide,Quickboards 這家示範滑雪板商店的購物助理。協助訪客找到符合其滑行需求與預算的滑雪板。使用已連接的 Shopify 目錄取得商品與價格。提出有用的追問,簡要說明你的推薦,並顯示商品卡片。保持簡潔且友善。這是商品搜尋對話:比較商品並檢查詳細資料,但不要建立或變更購物車,也不要開始 checkout。不要編造商品規格、供貨狀態或政策。
  1. 按一下 Next。在 Knowledge Base 中,這個僅使用目錄的範例請將匯入選項留空,然後按一下 Next。
  2. 在 External apps 中選擇 Shopify,然後按 Next。這會記錄你想要的整合,實際連線會在 Step 2 完成。
  3. 在 Deployment 中選擇 Chat embed,然後按 Next。這還不會發布任何內容。
  4. 在 Choose your plan 中選擇 Skip for now,以 Free 繼續。如果出現優惠對話框,關閉它並再次選擇 Skip for now。

若使用既有 Agent,請直接前往 Identity → AI Persona。將 Name 設為 Quickboards Guide。Main Prompt 欄位是你會在 Step 3 安裝測試後指令的位置。

在同一個 AI Persona 分頁,將 Personality 設為 Friendly、Profession 設為 Shopping Assistant、Creativity 設為 Low,並將 Reply Length 設為 Normal,以符合此示範。

Quickchat AI App 側邊欄選取 Identity,AI Persona 顯示 Agent 名稱與 Main Prompt 從左側邊欄的 Identity 開始。AI Persona 包含本教學的設定,下方近景顯示要編輯的欄位。

Quickchat AI Identity 設定顯示 Quickboards Guide 與 Main Prompt 欄位 Dashboard 將指令欄位稱為 Main Prompt。開啟其 Edit 控制項以取代初始描述,變更會自動儲存。

你之後可以將已驗證的運送或退貨政策加入 Knowledge Base。我們的 Knowledge Base 設定指南 說明如何組織這些內容。此範例不納入政策,因此商品價格、選項與供貨狀態只有一個明確來源:已連接的目錄。不要在 prompt 中維護第二份價格表。

Step 2. 連接並啟用 Shopify MCP

  1. 開啟 Actions & MCPs。
  2. 在 Custom Actions 下,選擇 Add Action,然後選擇 Shopify MCP。
  3. 在 Shopify store URL 中輸入根 URL:
https://quickchat-ai.myshopify.com
  1. 選擇 Save。連線會在儲存前先檢查。
  2. 開啟 Shopify Storefront MCP 卡片上的開關。透過此對話框儲存,與啟用 action 是兩個不同步驟。

App 側邊欄中的 Actions and MCPs,Custom Actions 下有 Shopify Storefront MCP 在 Custom Actions 下找到 Shopify Storefront MCP。它的開關控制 Agent 是否可以使用連線。

Shopify MCP 連線對話框,包含示範商店的根 URL 將根商店 URL 貼到 Shopify store URL。不要附加 MCP endpoint 或商品路徑。

如果你的 Agent 已有 Shopify action,請在該卡片上使用 Edit Action,不要建立另一個連線。Shopify deployment documentation 也描述了獨立的 Shopify-app 安裝路徑。此處使用的手動 MCP 連線不需要安裝該 app。

第一次檢查連線時,開啟 AI Preview 並詢問:

請檢查 Ice 顏色的 Iron snowboard 是否可下單,以及價格是多少。不要把它加入購物車。

在我們的測試日期,傳回的變體可供應,價格為 $699.95 USD。若是你自己的商店,請替換為目前數值可驗證的商品與選項。成功連線是必要條件,但這一個答案並不驗證整個搜尋器。

Step 3. 貼上完整 Main Prompt

開啟 Identity → AI Persona → Main Prompt → Edit,以下方區塊取代初始描述,然後在自動儲存後關閉編輯器。這是最終測試使用的 prompt。若使用其他類別,請一併替換商店身分與偏好問題,並保留以目錄為依據及缺少匹配時的規則。

你是 Quickboards Guide,Quickboards 這家示範滑雪板商店的購物助理。協助訪客將目錄縮小到一到兩張合適的板子,並理解取捨。對話保持簡潔、友善且具體。以有用的問題或商品事實開始,不要稱讚或填充語。

只收集重要偏好:
- 對於像「幫我選一張滑雪板」這類廣泛要求,一次只問一個簡短問題。了解對方的滑行程度、常見地形,以及只含板子的最高預算與幣別。在知道這三項事實之前,不要搜尋目錄或顯示商品卡片。
- 重複使用已提供的事實。如果訪客在一則訊息中提供全部三項,直接進行搜尋。不要把對話變成固定問卷。
- 只有在顏色等偏好會改變候選清單時才詢問。除非目錄包含可用的尺寸指南,否則不要詢問身高或體重。絕不要只根據身體測量資料推斷板長。

尋找並說明小型候選清單:
- 查詢已連接的 Shopify 目錄,以取得目前商品與價格。不要使用 Knowledge Base、先前對話或你自己的記憶作為價格、選項或供貨狀態的來源。
- 搜尋結果是候選項目,不是自動推薦。根據每項已說明需求,檢查商品類別、描述與目前價格。絕不要只因搜尋傳回不相關商品就顯示它。
- 最多顯示兩項相符商品。如果只有一項符合,就顯示一項。對每一項,說出商品名稱、目前價格與幣別,並根據傳回描述說明一個相關理由。將候選清單說明控制在 90 字以內。只有在傳回事實支持時才提及取捨;較低價格本身不代表板子寬容或適合初學者。
- 對同一份候選清單使用商品卡片。不要顯示額外商品作為背景,也不要用完整目錄填充答案。
- 不要稱某商品為「最佳」、承諾性能,或陳述精確技術規格,除非傳回資料支持該說法。不要把誇大的行銷文案當作可衡量事實重複。

驗證要求的變體:
- 當訪客詢問特定顏色、尺寸或其他選項時,請在目前目錄回應中檢查確切變體。如果回應未包含所有要求的選項值與該變體的供貨狀態,請使用商品詳細資料工具檢查商品與所選組合。絕不要只從商品標題或描述推斷供貨狀態。
- 選項清單中分別出現的值,不證明其組合可供應。檢查確切傳回變體及其供貨狀態。
- 描述中的尺寸範圍不是可選尺寸。如果目錄有 Color 但沒有 Size 選項,請說你可以檢查顏色,但無法確認特定長度。不要承諾要求的尺寸,也不要聲稱商品頁面上存在尺寸選擇器。
- 除非你已檢查,否則不要承諾另一項商品具有缺少的選項。可以提議檢查替代品,但不要假設結果。
- 提供已檢查變體的目前價格與幣別。不要在面向顧客的答案中包含內部商品 ID、變體 ID 或原始工具資料。

處理變更與缺少匹配:
- 如果訪客變更預算、地形、程度或其他需求,請使用更新後需求重新查詢目錄。替換先前候選清單;不要繼續推薦超出新預算的商品。
- 如果搜尋沒有傳回合適結果,請使用更簡單的查詢或同義詞重試一次。如果兩組結果都沒有匹配,請說「我在此目錄中找不到相符商品。」不要聲稱空的或不相關的搜尋證明商店從未販售該類別。
- 詢問訪客願意放寬哪一項需求。不要默默放寬預算、尺寸、類別或供貨狀態。沒有合適匹配時,不要顯示商品卡片。
- 如果連線失敗,請說無法檢查即時目錄,並提議重試。絕不要用猜測的商品或價格填補缺口。

此體驗是商品搜尋器。只比較商品並檢查詳細資料。不要建立或變更購物車、開始 checkout、收款,或聲稱商品已保留。以訪客使用的語言回覆。使用短段落,不要使用 em dash 或 en dash。

這些規則會引導模型行為。它們不是硬性的卡片數量限制、字數驗證器或權限邊界。在我們的測試中,精確措辭與回覆長度會變動。下方商品與變體檢查,比重現特定句子更重要。若是撰寫到你系統的獨立自訂 REST action,我們的 AI Action reliability guide 會說明伺服器端條件。那些自訂 action 控制項不是此處使用的原生 Shopify 卡片設定。

上線前如何測試商品推薦?

用兩種方式測試對話:互動式測試追問,以及在 Simulation Testing 中測試一組可重複的獨立請求。

從 dataset 到 run 的測試與審查迴圈,檢查回覆與工具證據,然後調整並重新執行 批次分數有助於決定檢查優先順序。只有在檢查實際回覆、目錄事實與相關工具呼叫後,迴圈才算完成。

Step 4. 執行完整購物對話

在 AI Preview 中,開始新對話並傳送:

幫我選一張滑雪板。

Agent 應詢問一個有用問題,且不顯示商品卡片。在一次最終 prompt 錄製執行中,它詢問:

你目前的滑行程度是初學者、中階,還是進階?

真實 Quickboards 對話在推薦任何商品前詢問滑行程度 一個問題,沒有過早候選清單。重複的新執行即使措辭不同,也應維持該行為。

提供缺少的偏好。若要測試直接路徑,請用以下完整簡述開始另一段新對話:

我是進階滑雪者,大多在整理過的度假村雪道滑行。我想要速度和精準轉彎,只含板子的預算是 $800 USD。

在嵌入式示範中,Agent 傳回 AI’s board,價格 $629.95 USD 與 Liquid,價格 $749.95 USD,並附上兩張商品卡片和基於描述的說明。兩者都在指定預算內。當多個目錄項目符合時,商品選擇可能變動;請檢查理由與限制,而不只是商品名稱。

AI's board 與 Liquid 的兩張真實 Shopify 商品卡片,價格低於購物者 800 USD 預算 圖片與商品連結來自 Shopify 目錄。這是實際呈現的卡片元件,不是設計出的對話 mockup。

接著在同一段對話中繼續:

其實,把我的預算降到 $650 USD。滑行偏好維持不變。

示範將先前候選清單替換為 AI’s board 和 Neo’s Board,兩者皆為 $629.95 USD。價格 $749.95 的 Liquid 不再出現在新卡片中。請在 Inbox 開啟對話,一併檢查兩個回合。驗證預算變更會改變建議商品,而不會重新開始偏好訪談。

更新後的商品卡片顯示 AI's board 與 Neo's Board,低於新的 650 USD 預算 預算在既有對話中變更。新的候選清單排除先前超出預算的選項。每張卡片擷取畫面上方的預算標籤是編輯註記。

對商家自己的目錄,也請開啟每個推薦商品頁面。確認連結前往正確商店、商品存在,且顯示價格符合相關市場與變體。我們示範商店的公開商品頁面受密碼保護,截圖證明的是目錄連線與本機 embed,而不是無限制的即時購物目的地。

Step 5. 建立可重複的 Simulation dataset

加入七個獨立請求

開啟 Testing → Create Dataset。在 Dataset name 輸入 Quickboards catalog checks,選擇 Paste messages,並貼上下列內容。每一行 --- 分隔一個獨立測試,不是同一段對話中的另一個回合。

Quickchat AI 中的 Create Dataset,包含 dataset name、Paste messages 分頁與七則訊息計數 七則訊息計數確認分隔符號已被辨識。請使用即時對話,而不是獨立 dataset 列,測試變更預算的追問。

幫我選一張滑雪板。
---
我是中階滑雪者。我在整理過的度假村雪道滑行,並想改善刻滑。我的最高預算是 $800 USD。
---
我需要 EU size 42 且低於 $300 USD 的滑雪靴。
---
請檢查 Ice 顏色的 Iron snowboard 是否可下單,以及價格是多少。不要把它加入購物車。
---
我可以買 Ice 顏色、size 156 cm 的 Iron snowboard 嗎?不要把它加入購物車。
---
我可以訂購 Black 顏色、Tapered design 的 Hellium snowboard 嗎?只檢查即可,不要把任何東西加入購物車。
---
Soy un snowboarder de nivel intermedio. Suelo ir por pistas preparadas y tengo un presupuesto máximo de 800 USD. ¿Qué tabla me recomiendas?

告訴評估器什麼是好答案

展開 Evaluation criteria,以下列內容取代預設 rubric:

只評分適用於此訪客請求的規則。不要把每個測試的需求套用到每個回覆。

如果訪客只說「幫我選一張滑雪板」,回覆應該詢問一個相關問題,且尚未推薦商品。
如果訪客已提供滑行程度、地形與預算(包含西班牙文測試),直接給出最多兩張合理且在預算內的板子候選清單是正確的。不要要求另一個澄清問題。評估說明是否回應其偏好。一般候選清單不要求 Iron 或任何特定商品。
對於 Iron/Ice 價格檢查,示範目錄回報可供應且價格為 699.95 USD。對於 Iron/Ice/156 cm 檢查,回覆必須說明無法確認該長度,因為 Iron 沒有可選的 Size 選項。
對於 Hellium/Black/Tapered,回覆不得說該組合可供應。
對於滑雪靴,回覆應說找不到相符商品;不得將不相關的板子或蠟作為滑雪靴推薦。
回覆應使用訪客的語言,且不得聲稱已建立購物車。

只評估可見行為。你無法從回覆文字驗證隱藏的 Shopify 呼叫、目前目錄完整性或商品卡片內容。這些需要對照即時目錄另外手動檢查。

Create Dataset 中展開的 Evaluation criteria 欄位,包含針對請求的評分指令 評分適用於該請求的規則。完整購物簡述不應因跳過另一個偏好問題而受罰。

若要明確指定美國目錄情境,請展開 Conversation metadata (advanced) 並輸入:

{"shopify_language":"en","shopify_country":"US"}

Conversation metadata 包含 US 目錄情境的 shopify_language 與 shopify_country 欄位 這些是目錄情境欄位。西班牙文訪客測試仍檢查答案是否遵循訪客語言。

執行、檢查與比較

  1. 選擇 Create,開啟 dataset,然後選擇 Run。
  2. 在 Start Test Run 中輸入描述性標籤,例如 Final finder, US catalog,然後選擇 Start Run。
  3. 在 Runs 下開啟已完成的 run。一併閱讀 AI Response、AI Score 與 Justification。將滑鼠停在被截斷的回覆或理由上,可完整閱讀。
  4. 使用該列的 View 控制項,在 Inbox 中開啟實際對話。對照 Shopify 檢查變體事實,並依下方進階章節檢查工具。
  5. 視錯誤來源修正 Agent 指令或評估器 rubric。用新標籤重新執行同一個 dataset。當目錄變更時,更新商品特定的預期值。

Testing 的較寬 App 檢視,含已完成 run,以及回覆、分數、理由和對話審查欄位 側邊欄仍選取 Testing。Breadcrumb 會識別 dataset 與 run;每列右側會前往人工回饋與對話。

已完成的 Quickboards Simulation Testing run,包含訪客訊息、生成回覆與評估結果 最終美國目錄測試 run。AI Score 評分可見回覆,它不會獨立驗證 Shopify 請求、卡片或庫存。

我們自己的 run 中,分數漏掉了什麼

我們第一版 rubric 錯誤地懲罰完整簡述沒有再問另一個問題。修正版 criteria 明確區分不完整請求,以及已包含程度、地形與預算的請求。請同時審查評估器推理與 Agent 答案。

最終 run 仍標記了不可供應變體的回覆:評分器混淆了變體「存在」與變體「可供應」。實際目錄包含 Black/Tapered 變體,並標記為不可供應,而 Agent 正確回報。這就是為什麼單靠分數無法取代下方的變體檢查。

相反情況也發生了。某個高分候選清單稱 Hydrogen 是「更容易進步」的選擇,但傳回描述並未建立這項比較。請將此視為人工審查發現,而不是已驗證的商品優點。已記錄的回覆與目錄摘錄 保留了這兩種情況。

如何檢查尺寸與不可供應變體?

檢查確切變體,不要把商品描述文字當作庫存紀錄。

Iron snowboard 的描述提到 144–160 cm 範圍。其傳回的可購買選項是 Color,包含 Ice。沒有可選的 Size 維度可確認 156 cm。

Iron 描述提到 144 到 160 cm,但傳回變體公開 Color Ice,價格 699.95 USD,且沒有 Size 選項 實際目錄差異的概念圖。描述中的範圍無法確認特定可購買長度。

傳送這個精確請求:

我可以買 Ice 顏色、size 156 cm 的 Iron snowboard 嗎?不要把它加入購物車。

在一次最終 prompt 錄製測試中,Agent 確認 Ice 價格為 $699.95 USD,但說明它無法確認或選擇 156 cm 長度,因為該尺寸未公開為選項。

真實 Agent 回覆確認 Ice 顏色,但拒絕確認未列出的 156 cm 尺寸 成功結果是有條件的答案:顏色可供應,要求的長度仍未確認。

另一個 Hellium / Black / Tapered 測試檢查不同錯誤。兩個選項值都出現在商品選項清單中,但確切組合不可供應。Agent 不應只因「Black」與「Tapered」各自存在,就提供該組合。

真實 Agent 回覆說 Hellium Black 與 Tapered 變體存在,但目前不可下單 評估器漏掉的差異:變體存在,但目前不能下單。

作者測試期間,我們將實際目錄回應與對話一併記錄。搜尋回應已包含這些 run 使用的變體資料,因此我們沒有把額外的商品詳細資料呼叫當作成功必要跡象。如果傳回資料不完整,Agent 需要詳細資料查詢,或明確說「我無法確認」。

對於你自己的商店,請將回覆與 Shopify 中商品的變體設定比較。要求所有請求的選項值都屬於同一個變體,並檢查其供貨狀態與價格。可下單不代表已知倉庫數量,推薦也不會保留任何東西。

調整搜尋器後有什麼改變?

有用的改進來自測試特定失敗、變更相關指令,並重複同一個請求。

使用此迴圈:

  1. 用已儲存測試訊息開始新對話。
  2. 閱讀回覆,並檢查實際卡片與目錄事實。
  3. 在 Main Prompt 中變更一項行為,例如商品搜尋應何時開始。
  4. 重複該測試,然後重新執行 dataset 的其他部分,以檢查迴歸。

三項發現塑造了最終 prompt:

測試先前行為新增或釐清的指令我們在重新執行時檢查了什麼
「幫我選一張滑雪板」同時詢問程度、地形與預算,且已顯示五項商品一次問一個問題;在知道三項偏好前不要搜尋或顯示卡片兩次最終新執行中,都是一個問題、沒有搜尋呼叫且沒有商品卡片
Iron in Ice, 156 cm無法確認尺寸,但中間草稿建議在商品頁面選擇長度描述範圍不是可選尺寸;不要編造尺寸選擇器確認顏色,並明確將 156 cm 保持為未確認
滑雪靴、EU 42、低於 $300搜尋傳回滑雪板與蠟;早期回覆概括說商店完全不賣滑雪靴拒絕錯誤類別、重試一次,並描述有限結果沒有相符滑雪靴推薦,也沒有商品卡片

對滑雪靴請求的真實無匹配回覆,沒有不相關商品卡片 搜尋傳回其他類別的候選項目。Agent 沒有把它們呈現為合適的滑雪靴。

這些是此示範目錄的觀察結果,不是準確度基準。Prompt 無法補上缺少的規格。如果你的描述無法區分兩項商品,請先改善目錄,再期待助理說明有意義的差異。變更描述、價格、選項或指令後,請重複測試。

如何將購物助理加入 Shopify 頁面?

使用 Embed 將對話放入頁面內,或使用 Widget 顯示浮動聊天泡泡。本逐步說明使用 Embed,並保留 Step 3 的純比較 Main Prompt。

Step 6. 設定並複製網站 Embed

  1. 開啟 Channels → Your Website → Text Content。將 Header text 設為 Quickboards Guide,將 Welcome message 設為 Tell me about your riding and I will help you find a board. Where do you like to ride?。
  2. 開啟 Appearance → Theme 並選擇 Light。
  3. 回到 Install → Availability and access。確認 Widget & Embed access 已啟用。
  4. 開啟 Install manually with code 並複製 Embed。使用你自己 snippet 中的 Agent 識別碼。

App 側邊欄選取 Your Website,包含 Install 分頁與 Install manually with code 選項 先在側邊欄選擇 Your Website,然後選擇 Install manually with code。在其面板中,複製 Embed 供 inline 搜尋器使用;Widget 會建立浮動泡泡。

App 手動安裝面板的 Embed section,包含 inline 對話 snippet 在此複製你自己 Agent 的 snippet。下方公開片段使用 placeholder,而不是本機示範識別碼。

此最小片段使用原生 loader。請替換 YOUR_SCENARIO_ID:

<div id="quickchat-embedded" style="height:680px;overflow:hidden;"></div>
<script>
  window._quickchat = window._quickchat || function () {
    (window._quickchat.q = window._quickchat.q || []).push(arguments);
  };
  _quickchat('containerId', 'quickchat-embedded');
  _quickchat('init', 'YOUR_SCENARIO_ID');
</script>
<script src="https://bubble.quickchat.ai/chat.js" async></script>

容器必須在初始化前存在,且 containerId 要在 init 之前。每個頁面只初始化 Quickchat AI 一次。如果你的 theme 已載入 widget 或 Shopify app embed,請要求維護者在此頁防止重複初始化,同時不要移除其他地方的聊天功能。website channel guide 說明存取控制。

Step 7. 為搜尋器提供自己的 Shopify template

使用具備 Custom Liquid 的 theme,例如 Dawn。有三項小任務:建立頁面、建立 template,並只將該 template 指派給搜尋器。

建立頁面與 template

  1. 在 Shopify admin 中,開啟 Online Store → Pages → Add page。輸入 Find your snowboard,加入介紹,選擇 Hidden,並儲存。
  2. 在 Online Store 下,為預定 theme 選擇 Edit theme。開啟 Home page → Pages → Create template。將其命名為 product-finder,並以預設 page template 為基礎。

將對話放入 template

  1. 在新 template 的 Template 區域中,選擇 Add section → Custom Liquid。將片段貼到 Liquid code 並儲存。不要放在共用 Header 與 Footer sections 中。
  2. 使用 theme editor 中的 Preview → Change 預覽頁面。Hidden pages 可以預覽。儲存 JavaScript 變更後,請重新載入預覽。

連接搜尋器頁面、其專用 Shopify template 與 Custom Liquid Embed 的圖表 配置圖,不是 Shopify admin 截圖。只將此 template 指派給搜尋器頁面。

指派、檢查並發布頁面

  1. 回到頁面設定,在 Theme template 下選擇 product-finder,並儲存。這裡只會顯示 live theme 中的 template;未發布 theme 的工作請與你的正常發布流程協調。
  2. 完成下方上線檢查後,將頁面設為 Visible,並在 Content → Menus 下連結它。

這些步驟遵循 Shopify 的 template instructions 與 page visibility controls。

對獨立網站,請使用先決條件中連結的完整 HTML template。替換其 Agent 識別碼與示範品牌,然後上傳到你的靜態主機。該完整文件屬於獨立網站;在 Custom Liquid 中只貼上上方片段。

選用:如何將購物車連接到 AI-Assisted Revenue?

Quickchat AI 會透過匹配訂單的購物車識別碼,與該對話期間建立或更新的已儲存購物車,將訂單連到對話。只有商品推薦不會建立該連結。包含套用購物者提供的折扣碼在內的購物車與結帳連結流程,也摘要於 Shopify AI 購物助理 頁面。

驗證範圍: 我們的 9 月 14 日測試透過正常回覆流程建立了真實 Shopify 購物車,並儲存其 checkout card。營收截圖使用另一筆明確植入的示範訂單。它們說明 App 中的歸因,而不是已完成購買或真實 Shopify 訂單 webhook 的交付。

連接商家並啟用購物車模式

  1. 在你自己的 Shopify 商店安裝 Quickchat AI: Chatbot & Sales,並完成授權。手動 MCP 連線會提供目錄工具,但 app 安裝會提供歸因所需的商家連線與訂單 webhooks。
  2. 開啟透過該安裝到達的 Agent。它可能不同於你手動建立的 Agent。將本教學的設定與 prompt 套用到那裡,檢查其 Shopify action,並在你的網站 snippet 中使用該 Agent 的識別碼。
  3. 在 Identity → AI Persona → Main Prompt → Edit 中,只將最後一段以 This experience is a product finder. 開頭的段落替換為下方段落。不要將它附加在相衝突的 no-cart 指令下方。
此體驗可在比較商品後協助購物者建立購物車。只有在訪客明確要求你加入已識別商品與數量時,才建立或更新購物車。請先在 Shopify 中驗證確切變體及其目前供貨狀態。如果要求的選項無法驗證,請改為要求澄清,不要替換它。使用 cart tool 傳回的商品、數量、總額與 checkout link;不要編造 checkout URL。不要收款、完成訂單,或聲稱商品已保留。以訪客使用的語言回覆。使用短段落,不要使用 em dash 或 en dash。

對示範目錄,請在新對話中傳送這個精確訊息:

請將一個 Ice 顏色的 Iron snowboard 加入新的購物車。請先檢查此變體可供應。我沒有選擇長度。顯示購物車給我,但不要下單或收款。

我們的真實工具序列是 search_catalog → get_product → create_cart。傳回的購物車包含一個 Ice 顏色的 Iron snowboard,價格為 $699.95 USD。未選擇長度,也未建立訂單或付款。對你的商店,請替換為已驗證的商品、變體與數量。

App 的購物車卡片顯示一個 Iron Ice snowboard,以及來自錄製 Shopify 回應的 699.95 USD 總額 原生 checkout card 在 9 月 14 日測試期間自動儲存。其商品、數量與總額和真實 Shopify 回應一致。我們未完成 checkout。

在 Inbox 開啟對話並檢查 Why AI said that,以驗證執行了哪些工具。檢查傳回的商品、數量、幣別與總額。成功的工具叫用本身,不證明 checkout card 已送達或歸因已儲存。

從訂單追溯到對話

在 live store 中,購物者會繼續完成 Shopify checkout。Quickchat AI 會將訂單的購物車識別碼,與該商家對話中的已儲存購物車匹配。

對話、Shopify 購物車與訂單歸因連結的圖表 歸因遵循匹配的購物車識別碼。聊天後發生的不相關購買並不足夠。

  1. 在 app-connected agent 上開啟 Insights → AI-Assisted Revenue。
  2. 選擇包含訂單成立日期的日期範圍。檢查 AI-assisted GMV、Avg order value 與 Daily assisted GMV。
  3. 在 Recent assisted orders 下找到訂單,並在 Conversation 欄按一下 View。Inbox 會開啟包含 Order placed 卡片的對話。

較寬的 Insights 檢視,已選取 AI-Assisted Revenue,並顯示示範 GMV 總額 Insights → AI-Assisted Revenue。此本機示範包含一筆合成訂單,不代表商家銷售表現。

AI-assisted GMV 與平均訂單價值,針對一筆本機示範訂單各顯示 699.95 USD 總額是已歸因訂單金額。一筆示範訂單也使平均值等於總額。

Recent assisted orders 顯示 DEMO-1001、其金額與 View conversation 連結 使用 Conversation 欄中的 View,而不是訂單號碼連結,回到聊天。

Inbox 對話顯示已歸因示範訂單 Inbox 在與植入購物車相關的對話上顯示 Order placed。訂單本身是合成的。

對於營收截圖,我們明確從先前錄製的 Shopify 回應儲存了一個購物車元件,然後透過本機歸因處理器傳遞帶有該購物車識別碼的合成 #DEMO-1001 訂單事件。重複的 created/paid 事件產生一筆紀錄,不匹配的 token 則不產生紀錄。這驗證了使用 fixtures 的下游匹配行為,不是真實 Shopify 訂單 webhook 的交付。沒有真實訂單或付款。

請將指標解讀為已歸因訂單金額 (GMV)。它包含完整匹配訂單,不只包含 AI 加入的商品。Order-created 或 order-paid 事件可以建立紀錄;這不是付費銷售、淨營收或增量提升報告。退款與取消不會扣除。日期篩選器選擇已成立訂單;歸因沒有固定的聊天後回溯期間。

如果沒有任何內容出現,請檢查 app-connected agent、實際 create/update-cart action、匹配的訂單事件與所選日期。手動 inline snippet 不會提供 Shopify app embed 的店面購物車同步。

進階:如何查看執行了哪些 Shopify 工具?

在個別 AI 回覆上使用 Why AI said that,檢查其 AI Actions Used。當最終答案聽起來正確,但你想檢查 Agent 是否搜尋了目錄或嘗試變更購物車時,這特別有用。

  1. 開啟 Inbox,然後開啟對話。Simulation 結果的 View 控制項是到同一畫面的另一條路徑。
  2. 找到你要調查的 AI 回覆。將滑鼠停在回覆上,並選擇其下方的 Why AI said that。
  3. 閱讀 AI Actions Used。每個項目會顯示該回覆的工具名稱與縮短後的參數摘要。
  4. 將這些呼叫與訪客請求及傳回商品事實比較。檢查另一則回覆,看看下一回合有何變化。

Inbox 中選取 AI 回覆,回應下方有 Why AI said that 控制項 檢查屬於特定回覆,而不是整個 Agent。選擇執行查詢或購物車變更的回覆。

AI Actions Used 列出 Store catalog search、get_product 與 create_cart 及其記錄參數 選用購物車測試中的實際原生呼叫:目錄搜尋、商品查詢,接著建立購物車。此清單來自已保存的工具呼叫紀錄,不是手寫逐字稿。

預期呼叫取決於任務:

訪客請求要檢查什麼
「幫我選一張滑雪板。」第一則回覆應收集缺少偏好,而不是立即搜尋
完整簡述或變更後預算目錄查詢應反映已說明限制
搜尋結果中缺少的特定選項商品詳細資料查詢應檢查該選項,而不是從描述推斷
選用購物車模式中的明確加入購物車請求購物車 action 應參照已驗證變體與要求數量

原生 Shopify 卡片不會公開自訂 action 的 View logs 面板。此處請使用回覆層級檢查。這些參數摘要不是完整 HTTP trace、庫存證明或付款證明。我們的購物車卡片問題就是一個具體例子,說明使用者可見結果需要獨立檢查。如需更廣泛概念,請參閱 how AI Agents take actions。

選用:同一個搜尋器可以在 WhatsApp 和 Instagram 回答嗎?

可以。將任一渠道連接到已設定的 Agent,然後在該渠道上測試。目錄連線維持不變,訊息呈現方式會改變。

比較網站、WhatsApp 與 Instagram 商品傳遞的圖表 傳遞圖:網站商品卡片、WhatsApp 原生互動訊息、Instagram 文字與連結。

WhatsApp 支援原生商品與購物車訊息。Instagram 目前會傳送回覆文字,沒有網站的 inline product-card 或 cart layout。對 Instagram,請確認推薦在文字中包含可讀的商品名稱、已驗證價格與商品 URL。如有需要,將此指令加入 Main Prompt,然後在實際 DM 中重新測試:

在沒有商品卡片的情況下,讓推薦仍可理解。於回覆文字中包含每項推薦商品的名稱、已驗證價格與幣別,以及商品 URL。只使用 Shopify 傳回的值。

此指令是用來測試的起點,不是已錄製的 Instagram 結果。對 Instagram,請使用 Step 3 的純比較 Main Prompt;不要假設網站的 checkout button 會出現在 DM 中。如果 WhatsApp 同時需要購物車模式,請為 Instagram 使用獨立 Agent,因為 Main Prompt 變更會套用到一個 Agent 的每個渠道。

連接同一個 Agent,也不會把購物者的網站對話帶入新的 WhatsApp 或 Instagram 對話。

連接 WhatsApp

此渠道請使用上方選用購物車模式。原生商品訊息可以提供購物車 quick replies,因此請測試這些按鈕以及文字請求。

  1. 準備專用商務號碼,可接收 SMS 或語音驗證、你的商務資料,以及相關 Meta Business 的管理員存取權。現有號碼或供應商遷移請使用 WhatsApp setup guide。
  2. 開啟 External Apps → WhatsApp → Connect WhatsApp。
  3. 在 Meta 視窗中,以商務管理員身分登入,選取或建立 business 與 WhatsApp Business Account,輸入要求的商務資料,並驗證號碼。完成權限與確認畫面。
  4. 回到 Quickchat AI,等待 Connected。在 Settings 下,確認該號碼的開關顯示 Enabled。
  5. 從另一個 WhatsApp 號碼傳送商品問題。檢查收到的回覆及其 Inbox 對話。

Quickchat AI WhatsApp 連線面板 在此開始 Meta 的連線流程。此截圖未顯示已完成的 WhatsApp 連線。

連接 Instagram

  1. 使用 Instagram Professional 帳號,可以是 Business 或 Creator。
  2. 開啟 External Apps → Instagram → Connect to Instagram。以該帳號登入;如果瀏覽器選錯帳號,請使用 Sign in as a different account。
  3. 授權期間保留 Access and manage messages 啟用。回到 Quickchat AI 後,確認帳號並開啟 Enable Instagram。
  4. 從另一個 Instagram 帳號傳送 DM。驗證其文字、商品連結與 Inbox 項目。Instagram DM setup tutorial 涵蓋連線疑難排解。

Quickchat AI Instagram 連線面板 連接 Professional account 並授予訊息存取權。此本機 App 沒有 Meta credentials,因此其連線控制項停用;這不是即時 DM 擷取。

請用新的入站訊息測試兩個渠道。WhatsApp 自由格式回覆與自動 Instagram 回覆使用各自的 24 小時訊息窗口;對外行銷活動需要獨立設定與政策檢查。

上線前應檢查什麼?

Step 8. 驗證已發布體驗

檢查店面

  • 商家部署前,選擇允許商業使用的方案。
  • 在桌機與行動裝置上開啟頁面。預期 Agent 應載入一次,具備可用輸入框與可運作的商品連結。
  • 在自己的 theme preview 檢查通過前,保持頁面隱藏。

真實商品搜尋器在 390-pixel 行動 viewport 中,旁邊有商品卡片與簡短上線檢查清單 行動裝置上的既有變更預算對話。兩項推薦仍低於 $650 USD;請在窄螢幕上檢查 carousel 移動、商品連結與訊息輸入框。

檢查購物行為

測試準備完成的條件
廣泛請求它會在顯示商品前詢問缺少偏好
完整簡述與變更後預算每項新推薦都遵循最新限制
缺少尺寸或不可供應組合它會說明無法驗證的內容,而不是承諾商品
語言與 Shopify Market回覆語言、價格、幣別與變體供貨狀態都已分別檢查
選用購物車與渠道同意、變體、數量、送達連結與已儲存購物車連結都已逐一驗證

西班牙文 Simulation 案例是語言檢查,不是市場檢查。我們的 multilingual chatbot guide 說明較廣泛的能力;仍請獨立驗證你商店的區域目錄資料。

設定審查例行工作

決定由誰監控新對話。如果隊友應接手困難請求,請設定 Human Handoff;這是獨立 action。

搭配 conversation analytics 審查早期對話。修正不受支持的比較或缺少的商品事實,然後重新執行已儲存測試。保存暴露問題的測試案例,讓下一次 prompt 變更也能對照檢查。

純比較 prompt 仍是基礎教學。其 no-cart 規則是行為指令,不是技術上移除 Shopify 的購物車工具。只有在選用路徑本身檢查通過後,才啟用它們。

常見問題

如何建立 Shopify AI 購物助理?

建立 Quickchat AI Agent,撰寫 Main Prompt,定義它如何收集偏好並推薦商品,然後使用商店 URL 連接並啟用 Shopify MCP。先用你的商品目錄測試推薦結果,再將 Agent 作為 widget 或 inline embed 加到網站。

AI chatbot 可以推薦我的 Shopify 商店商品嗎?

可以。已連接的 Agent 可以搜尋 Shopify 目錄,使用傳回的商品詳細資料說明候選清單,並顯示商品卡片。匹配品質取決於你的目錄描述、購物者偏好與 Agent 指令。測試時請檢查實際商品與變體。

這是 Shopify 商品推薦測驗嗎?

這是對話式商品搜尋器。它會透過聊天收集缺少的偏好,也可以在同一段對話中接受完整需求或變更後的預算。它不會建立固定表單、計算測驗分數,或保證確定性的推薦結果。

助理可以檢查 Shopify 尺寸與供貨狀態嗎?

它可以檢查目錄傳回的選項與供貨狀態。描述中提到的尺寸,不代表該尺寸是可選且可供應的變體。Agent 應確認確切組合,或說明無法驗證。可下單不等於庫存數量,也不等於保留商品。

本教學需要寫程式或付費方案嗎?

你可以不撰寫應用程式程式碼,即可設定並測試 Agent。Quickchat AI 的 Free 方案包含 MCP 存取權與每月 50 個 AI credits,供個人非商業用途使用,測試會消耗 credits。商家部署需要可商業使用的方案。Inline 頁面需要貼上 embed snippet,Shopify 費用另計。

AI-Assisted Revenue 衡量什麼?

Quickchat AI 的歸因會將 Shopify 訂單的購物車識別碼,與該商家在對話中建立或更新的已儲存購物車進行匹配。Dashboard 會將完整匹配訂單金額回報為 GMV,而不是淨營收或已證明的增量銷售。只有目錄推薦或商品點擊並不足夠。

購物助理可以在 WhatsApp 和 Instagram 上運作嗎?

同一個 Agent 與 Shopify 目錄連線可以服務兩個渠道,但其對話與呈現方式不同。WhatsApp 支援原生商品與購物車訊息。Instagram 會傳送回覆文字,因此推薦內容需要在文字中包含商品名稱、價格與連結,網站的 inline checkout card 不會出現在 DM 中。請分別測試每個已連接的渠道。