自訂 CSS

每種倒數類型的設計設定最後都有一個 Custom CSS (Developer Zone) 方塊。您在此輸入的任何內容，都會套用到商店前台的該倒數上，並疊加在視覺控制項已設定的所有內容之上。

Custom CSS 方塊，位於設計設定的最後。

警告

這是備用的應急手段，而不是首選方法。在此撰寫的 CSS 不會經過檢查，預覽也不一定可靠，即使您的佈景主題之後有所變動，它仍會持續套用。請先嘗試視覺控制項，它們涵蓋了大多數商店的需求。

真正派得上用場的情況

• 精細定位：微調倒數的邊距，讓它在間距特殊的佈景主題中正確定位。
• 響應式調整：針對行動裝置設定未涵蓋的斷點，使用媒體查詢。
• 配合佈景主題細節：佈景主題到處使用、但控制項無法精確重現的特定圓角或陰影。
• 隱藏元素：移除倒數中無法用其他方式關閉的部分。

撰寫方式

此方塊接受純 CSS，也就是選擇器和規則，不需要 <style> 標籤：

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

倒數自己的容器帶有 samita-countdown 類別，每個顯示出來的倒數也會獲得一個由其倒數 ID 組成的 ID。若要指定更具體的目標，請在瀏覽器的開發人員工具中檢查顯示出來的倒數，並使用您在那裡找到的類別。

注意

更新應用程式時，倒數內部的類別名稱可能會改變。將您的 CSS 限定在 .samita-countdown 和您自己的覆寫範圍內，而不是使用很深層的內部選擇器，就比較不容易失效。

限定範圍

此方塊中的 CSS 不會自動限定於倒數。像 img { ... } 這樣的選擇器會影響頁面上的每一張圖片。

請務必為規則加上前綴，讓它們只作用於倒數：

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

在真實頁面上測試

建立工具的預覽不會重現您的佈景主題，因此在預覽中對齊的 CSS，在您的商品頁面上不一定會對齊。請儲存後開啟真實頁面進行檢查，電腦版和手機版都要確認。

如果您不想撰寫 CSS

支援團隊可以協助進行針對佈景主題的調整。應用程式在 Custom CSS 方塊旁提供了 Chat now! 按鈕，說明為「Chat with us to customize countdown in your theme.」您也可以聯絡支援團隊，並附上頁面連結和您想要的調整說明。

後續步驟

• 設計倒數
• 顯示位置
• 聯絡支援團隊
• 倒數未顯示