文件

Shopify

只要將嵌入程式碼貼到佈景主題中，就能把你的代理程式加入任何 Shopify 商店。

只要將嵌入程式碼貼到佈景主題的 theme.liquid 檔案中，就能把你的 AI 代理程式加入 Shopify 商店。適用於所有 Shopify 方案。

首先，從後台的 Chatbot > 發布 取得你的嵌入程式碼。

方法一：編輯 theme.liquid（建議做法）

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

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

範例格式（請使用 Chatbot > 發布 中的實際值）：

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

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

方法二：先複製再編輯

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

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

方法三：貼到特定頁面

若只想在單一頁面（例如支援頁面）加入小工具：

  1. 在 Shopify 後台中，前往線上商店 → 頁面。
  2. 開啟你想編輯的頁面。
  3. 在內容編輯器中點選 <>（顯示 HTML）圖示。
  4. 將嵌入程式碼貼在內容的最後。
  5. 儲存。

小工具就只會在該頁面上載入。

需求條件

  • 你要編輯的佈景主題必須是已發布或付費的佈景主題。試用版佈景主題的程式碼無法儲存。
  • 若你已啟用網域限制，店面網域必須列在代理程式的允許的網域清單中。

發布之後

Shopify 會透過其 CDN 提供店面資源，變更通常會在一兩分鐘內生效。若你沒看到小工具：

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

疑難排解

小工具沒有顯示。

  • 確認你編輯的是使用中的佈景主題（或已發布那份副本）。
  • 確認程式碼片段位於 </body> 之前，而不是在 <head> 裡面。
  • 確認你的店面網域已列在 Chatbot > 發布 > 安全性 的允許清單中。

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

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

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

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

測試

  1. 在隱身視窗中開啟你的店面。
  2. 尋找角落的聊天氣泡。
  3. 點選開啟並傳送一則測試訊息。

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

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

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

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

設定 Shopify 動作 →

後續步驟