Shopify 佈景主題編輯器 — 啟用 HK Pickup App embed
在佈景主題中開啟 HK Pickup。這是店面的總開關——關閉 App embed 時，結帳流程與安裝前完全相同。
在 Shopify App Store 安裝 HK Pickup →
啟用 App embed
Section titled “啟用 App embed”- 在 Shopify 管理後台，前往 Online Store → Themes（網上商店 → 佈景主題）。
- 在正式佈景主題（或你正在測試的佈景主題）上按 Customize（自訂）。
- 在左側欄捲動至 App embeds。（並非在「Sections」或「Add section」下。）
- 找到 HK Pickup 並切換為開啟。
- 按右上角 Save（儲存）。
App embed 適用於：
- 購物車頁——含結帳按鈕的完整購物車
- 購物車側欄——滑出式迷你購物車（Dawn 及類似佈景主題）
你無需在範本中加入區塊或 section。
App embed 設定
Section titled “App embed 設定”在 App embeds 選中 HK Pickup 後，你可能會看到 Theme integration（佈景主題整合） 欄位：
| 設定 | 預設 | 用途 |
|---|---|---|
| Developer mode（開發者模式） | 關 | 停用自動攔截結帳；使用 window.hkpickup API——見 開發者模式 |
| Pilot mode（試用模式） | 關 | 遷移期間只限白名單測試者攔截結帳——見 試用模式 |
| Allowed test emails（允許的測試電郵） | 空白 | 每行一個電郵；測試者須以顧客身份登入並重新載入購物車 |
| Checkout button selector（結帳按鈕選擇器） | auto |
哪個按鈕會開啟配送對話框 |
| Cart form selector（購物車表單選擇器） | auto |
「送貨上門」使用的購物車表單 |
| Cart drawer selector（購物車側欄選擇器） | auto |
購物車更新後重新綁定的側欄元素 |
試用模式 vs 開發者模式： 從其他應用程式遷移時，一般正式結帳請用 試用模式。撰寫自訂 JavaScript（hkpickup.open()）時請用 開發者模式。同一流程不要同時啟用——開發者模式會忽略試用模式設定。
保持 auto（建議）
Section titled “保持 auto（建議）”HK Pickup 會根據佈景主題名稱及頁面結構自動偵測熱門佈景主題（Dawn、Horizon 等）。
儲存並測試後若結帳正常，三個欄位均保持 auto。
只有驗證結帳後仍失敗時才更改欄位——亦可見疑難排解 → 按結帳無對話框。
| 症狀 | 先試 |
|---|---|
| 按結帳無反應／無對話框 | 結帳按鈕選擇器 → button[name="checkout"] |
| 「送貨上門」無法繼續 | 購物車表單選擇器 → form#cart |
| 加入購物車後側欄結帳失效 | 購物車側欄選擇器 → cart-drawer |
佈景主題名稱會顯示在 App embed 設定中。自訂佈景主題請記下名稱，聯絡支援時提供。
除錯自動偵測
Section titled “除錯自動偵測”- 啟用 App embed 並儲存佈景主題。
- 開啟店面購物車，打開瀏覽器 DevTools → Console（主控台）。
- 按 Checkout（結帳），尋找以
[hkpickup] theme integration開頭的日誌。
這會顯示偵測到的佈景主題設定檔及選擇器。
發佈 vs 草稿佈景主題
Section titled “發佈 vs 草稿佈景主題”- 在你發佈給顧客的佈景主題上啟用 App embed。
- 若使用複製佈景主題測試，預覽前亦須在該佈景主題啟用 App embed。
👉 管理設定——選擇顯示哪些順豐自取類型及可選品牌設定。