文件

Shopify

使用完整產生的程式碼，在 Shopify 佈景主題中安裝 Agentkit 聊天小工具。

將 Agentkit 產生的完整嵌入程式碼放入佈景主題的 theme.liquid，即可在 Shopify 店面加入聊天小工具。

在 Agentkit 開啟 頻道 → 網站嵌入 → 聊天視窗，啟用該頻道並複製完整程式碼。程式碼包含兩個 script 標籤：行內初始化程式與非同步載入程式，兩者都要保留。Shopify 建議先複製佈景主題 再修改程式碼。

方法一：編輯 theme.liquid

編輯已發布的佈景主題，讓小工具套用到整個網站：

  1. 在 Shopify 後台中，前往線上商店 → 佈景主題。
  2. 在目前使用中佈景主題所在的列，點選 …（動作）選單 → 編輯程式碼。
  3. 在左側的 Layout 資料夾中，開啟 theme.liquid。
  4. 捲動到最底部，將嵌入程式碼貼在結尾的 </body> 標籤之前。
  5. 點選儲存。

原樣貼上複製的程式碼。儲存後，在實際呈現的店面網頁原始碼中確認兩個 <script> 標籤都存在。

小工具會出現在每個店面頁面上——商品頁、系列頁、購物車、首頁皆適用。

方法二：先複製再編輯（建議做法）

若你想保留安全回復的空間：

  1. 線上商店 → 佈景主題。
  2. 在使用中的佈景主題上，點選 …（三個點）選單 → 複製。清單底部會出現一份副本。
  3. 依上述步驟編輯這份副本的 theme.liquid。
  4. 點選副本的 … 選單 → 預覽，即可先行測試。
  5. 確認無誤後，點選 … 選單 → 發布，即可正式上線。

僅在單一頁面顯示

若只想在一個頁面顯示小工具，請佈景主題開發者將產生的兩個標籤限定在該頁面範本。確認兩個標籤只出現在目標頁面。Shopify「頁面」的文字編輯器不是此小工具經驗證的安裝方式。

需求條件

  • 你需要編輯佈景主題程式碼的權限。付費佈景主題在試用期間無法編輯程式碼，須先購買。你的角色須具備 Themes 與 Edit code 權限。請參閱 Shopify 佈景主題程式碼說明。
  • 測試公開店面時，請保持 Agentkit 聊天視窗頻道為啟用狀態。
  • 若啟用網域限制，請允許佈景主題預覽與公開店面的確切來源網址。測試後移除暫時加入的預覽來源網址。

發布之後

如果小工具未出現在公開店面：

  1. 強制重新整理頁面（Mac 上為 ⌘+Shift+R，Windows 上為 Ctrl+F5）。
  2. 在隱身視窗中開啟網站。
  3. 檢查瀏覽器主控台是否有錯誤訊息。

疑難排解

小工具沒有顯示。

  • 確認你編輯的是使用中的佈景主題（或已發布那份副本）。
  • 在實際呈現的店面原始碼中，確認產生的兩個 script 標籤都位於 </body> 之前。
  • 確認 Agentkit 的網域限制允許你的店面網域。

小工具與 Shopify 的聊天或購物車側欄重疊。

  • 在代理程式的設計設定中調整小工具位置。

小工具在編輯器中有顯示，但正式商店上卻沒有。

  • 請確認貼上程式碼後有點選儲存——程式碼編輯器不會自動儲存。

測試

  1. 在隱身視窗中開啟你的店面。
  2. 尋找角落的聊天氣泡。
  3. 點選開啟並傳送一則測試訊息。
  4. 在網頁原始碼中確認產生的兩個 script 標籤都存在。

連接商店以查詢訂單與搜尋商品

嵌入小工具與連接你的商店是兩件各自獨立的事。上方的嵌入程式碼會把聊天小工具放到你的店面上。另一項獨立的 Shopify 連接——在代理程式的動作 → 整合分頁中設定——則能進一步讓代理程式在對話中搜尋你的即時商品目錄，並查詢訂單狀態。

你可以只做其中一項。如果代理程式只需要根據訓練內容回答，就單獨使用嵌入功能；若你想要即時的商品與訂單資料，再加上商店連接。

連接商店只會提供憑證，並不會因此自動開啟任何功能：接下來，請在代理程式的動作分頁中新增搜尋商品與查詢訂單狀態這兩項動作，並啟用你想讓代理程式使用的每一項。

設定 Shopify 動作 →

後續步驟