自訂對話框樣式 — Shopify 佈景主題 CSS

讓 HK Pickup 配送對話框配合你的店面——品牌顏色、字體及圓角。

在 Shopify App Store 安裝 HK Pickup →

---

三種自訂方式

方式	適用	位置
預設	大多數商店	無需設定——應用程式內建中性樣式
管理後台顏色	品牌按鈕／背景色	管理設定 → 顏色及佈景主題
佈景主題 CSS	字體、字距、直角、精細控制	佈景主題 CSS 檔（本指南）

只需主按鈕及背景色時，用管理後台顏色。要對話框字體及外形（圓角、間距）與佈景主題一致時，用佈景主題 CSS。

---

快速路徑：品牌顏色（無需寫程式）

1. Apps → HK Pickup → Settings → Colors & theme（顏色及佈景主題）
2. 勾選 Enable customization（啟用自訂）
3. 設定顏色 → Save settings（儲存設定） → 重新載入店面

管理後台欄位	CSS token
Primary button（主要按鈕）	--hkpickup-btn-primary-bg、--hkpickup-btn-primary-border
Secondary background（次要背景）	--hkpickup-btn-bg
Secondary border（次要邊框）	--hkpickup-btn-border
Selected row（選中列）	--hkpickup-result-selected-bg
Dialog backdrop（對話框背景）	--hkpickup-backdrop-bg

字體、圓角及字級比例請見下方。

---

加入佈景主題 CSS

1. Online Store → Themes（網上商店 → 佈景主題）→ … → Edit code（編輯程式碼）
2. 開啟佈景主題主要樣式表——常見為 assets/base.css、assets/theme.css，或佈景主題文件指定的自訂 CSS 檔
3. 將覆寫規則貼在檔案底部
4. 儲存 → 強制重新整理店面（購物車頁或側欄）

規則：

• 每條規則以 #hkpickup-dialog 為作用範圍，避免影響其他版面
• 在對話框元素上覆寫 token 時，使用 #hkpickup-dialog.hkpickup-dialog
• 變更後需重新載入——對話框由 App embed 在每次頁面載入時注入

部分佈景主題在編輯器提供 Theme settings → Custom CSS（自訂 CSS），若該 CSS 會載入到店面，同樣可用。

---

CSS 設計 token

HK Pickup 在 #hkpickup-dialog 上讀取 --hkpickup-* 自訂屬性。預設值在應用程式擴充功能 CSS 中；你在佈景主題 CSS 覆寫即可。

顏色

Token	預設	用途
--hkpickup-text	#18181b	內文
--hkpickup-text-muted	#71717a	狀態、結果副文字、關閉按鈕
--hkpickup-text-error	#b91c1c	錯誤訊息
--hkpickup-border	#e4e4e7	結果列表邊框
--hkpickup-border-strong	#d4d4d8	輸入框、次要按鈕
--hkpickup-btn-bg	#fff	次要按鈕
--hkpickup-btn-border	#d4d4d8	次要按鈕邊框
--hkpickup-btn-primary-bg	#18181b	主要按鈕（繼續結帳）
--hkpickup-btn-primary-border	#18181b	主要按鈕邊框
--hkpickup-btn-primary-color	#fff	主要按鈕文字
--hkpickup-result-selected-bg	#f4f4f5	已選自取列
--hkpickup-backdrop-bg	rgb(0 0 0 / 50%)	對話框後方暗色區
--hkpickup-focus-ring	rgb(24 24 27 / 18%)	輸入框 focus 環

管理後台 Colors & theme 在自訂開啟時會覆寫上述顏色 token。

字體及間距

Token	預設	用途
--hkpickup-title-size	1.5rem	對話框標題
--hkpickup-title-weight	600	對話框標題
--hkpickup-title-line-height	1.25	對話框標題
--hkpickup-title-letter-spacing	-0.02em	對話框標題
--hkpickup-control-size	1.5rem	按鈕、輸入框、結果名稱
--hkpickup-control-weight	600	按鈕、輸入框、結果名稱
--hkpickup-control-line-height	1.25	控制項
--hkpickup-control-letter-spacing	-0.02em	控制項
--hkpickup-control-padding	1.125rem 1.25rem	按鈕、輸入框、結果列
--hkpickup-label-size	1rem	篩選標籤、副文字
--hkpickup-label-weight	600	篩選標籤
--hkpickup-step-gap	0.625rem	控制項之間的垂直間距

在窄螢幕（viewport ≤ 480px）上，標題及控制項字級會自動縮小。

外形（直接 CSS，非 token）

對話框外殼及控制項的 border-radius 在擴充功能 CSS 中設定（預設：對話框 0.75rem，按鈕／輸入框 0.5rem）。請用選擇器覆寫——見下方配合佈景主題字體及圓角。

---

DOM 結構（供選擇器使用）

hkpickup-dialog.hkpickup-dialog

  .hkpickup-dialog__inner
    .hkpickup-dialog__header
      .hkpickup-dialog__title
      .hkpickup-dialog__close
    #hkpickup-step-choose.hkpickup-dialog__step
      .hkpickup-dialog__actions
        .hkpickup-btn
    #hkpickup-step-sf.hkpickup-dialog__step
      .hkpickup-filters (select, input, label)
      .hkpickup-results
        .hkpickup-result[aria-pressed="true"]
          .hkpickup-result__name
          .hkpickup-result__meta
      .hkpickup-toolbar
        .hkpickup-btn--primary

常用 class：.hkpickup-btn、.hkpickup-btn--primary、.hkpickup-filters、.hkpickup-results、.hkpickup-result、.hkpickup-status、.hkpickup-status--error。

---

配合佈景主題字體及圓角

許多 Online Store 2.0 佈景主題在 :root 暴露 CSS 變數——例如 --font-body-family、--font-heading-family、--buttons-radius、--inputs-radius。名稱因佈景主題而異；請在 DevTools → Elements → :root 檢查你的店面。

範例——繼承佈景主題字體及直角控制項：

/* HK Pickup — 配合佈景主題字體及按鈕／輸入框圓角 */
#hkpickup-dialog.hkpickup-dialog {
  font-family: var(--font-body-family, system-ui, -apple-system, sans-serif);
  font-weight: var(--font-body-weight, 400);
  letter-spacing: 0.06rem;

  --hkpickup-title-size: 1.375rem;
  --hkpickup-title-weight: var(--font-heading-weight, 400);
  --hkpickup-title-letter-spacing: 0.02rem;
  --hkpickup-control-size: 1.0625rem;
  --hkpickup-control-weight: 500;
  --hkpickup-control-letter-spacing: 0.04rem;
  --hkpickup-label-size: 0.875rem;
  --hkpickup-label-weight: 500;

  border-radius: 0;
}

#hkpickup-dialog .hkpickup-dialog__title {
  font-family: var(--font-heading-family, inherit);
  font-weight: var(--font-heading-weight, inherit);
}

#hkpickup-dialog .hkpickup-btn {
  border-radius: var(--buttons-radius, 0.5rem);
}

#hkpickup-dialog .hkpickup-filters select,
#hkpickup-dialog .hkpickup-filters input,
#hkpickup-dialog .hkpickup-results {
  border-radius: var(--inputs-radius, 0.5rem);
}

請依你的佈景主題調整變數名稱及數值。在購物車頁、購物車側欄及手機上測試。

---

提示及注意事項

主題	指引
優先順序	佈景主題 CSS 與管理後台顏色都會設定 --hkpickup-* token。字體以 #hkpickup-dialog 上的佈景主題規則為準；自訂開啟時管理後台會以 JS 套用顏色
翻譯	文字內容另作設定——見管理設定 → 翻譯
勿隱藏	避免對話框步驟、按鈕或篩選使用 display: none——會導致結帳失效
驗證	自訂樣式後執行 驗證結帳

---

下一步

👉 驗證結帳——確認自訂樣式後對話框在購物車頁及側欄仍正常運作。