設計倒數
變更顏色、字型、背景、邊框和間距,讓倒數與您的商店風格一致。
範本提供起始外觀。您可以在 Design 標籤頁中打造專屬風格,或完全重新設計,因為每個部分都可以編輯。
Countdown timer 和 Estimated delivery date 有完整的 Design 標籤頁。Stock countdown 和 Cart countdown 的選項較少,設計控制項放在 Settings 標籤頁內。

Design 標籤頁,預覽會隨著您變更設定而更新。
您不會被最初選擇的設計綁住。請從建立工具內開啟範本選擇器並選擇其他範本,各季節標籤頁顯示在頂端:Default、New year、Valentine、Summer Sale、Moon Festival、Halloween、Black Friday、Christmas 和 Winter Sales。
切換範本會取代設計。您的文字、時間和條件都會保留。
Countdown timer 設計
Section titled “Countdown timer 設計”計時器的 Design 標籤頁有四個區段,加上自訂 CSS。
Design Main Section
Section titled “Design Main Section”倒數的外層容器,也就是容納其他所有內容的面板。
| 群組 | 控制項 |
|---|---|
| Background | 純色或上傳的圖片。選擇顏色時,您會看到 Main background color,並有獨立的 Left 和 Right 值,因此純色填滿是兩邊同色,漸層則是兩種顏色 |
| Overlay image | 讓上傳的背景變暗,使文字在其上仍清晰易讀 |
| Text | 整個倒數的字型。開啟 Use custom font style 即可選擇字型系列和粗細 |
| Padding | 面板內的間距,以 Top / Right 和 Bottom / Left 設定 |
| Border | 邊框大小、圓角、樣式(Solid、Dotted 或 Dashed)和顏色 |
| Shadow | Yes 或 No |
元素樣式:Title 和 Subtitle
Section titled “元素樣式:Title 和 Subtitle”Title 和 Subtitle 各自有獨立的字型、字型大小、顏色和邊距。您可以在這裡讓標題更突出、副標題更低調,或讓兩者靠得更近。
Design Timer Section
Section titled “Design Timer Section”數字本身的設計。
| 群組 | 控制項 |
|---|---|
| Font | 數字的 Timer font size,以及下方文字的 Label font size |
| Border | 每個單位外框的大小和樣式 |
| Color | Number color、標籤的 Data text color、每個單位方塊的 Background color、分隔符號的 Dot color,以及 Border color |
| Padding | 每個單位方塊內的間距 |
為各單位設定背景和邊框,就會呈現方塊外觀;兩者都不設定,則是面板上單純的數字。
Button
Section titled “Button”如果您已開啟按鈕,它會有自己的邊框(圓角、大小、樣式)、顏色(背景、文字、邊框)和內距。
Design Mobile Section
Section titled “Design Mobile Section”為手機另外設定的字型大小,應用程式將其描述為「Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.」
您可以為 Title、Subtitle、Timer number 和 Timer label 設定行動版專用的大小,並設定行動版內距。
每個倒數都值得花一分鐘檢查這個區段。在電腦上以 25px 顯示效果良好的標題,在手機上通常太大,而以電腦版大小顯示的四個計時器單位,也常會換行或溢出。
Estimated delivery date 設計
Section titled “Estimated delivery date 設計”配送日期的 Design 標籤頁依其兩個部分分開:
- Design Main Widget:訊息的字型、顏色、大小、邊框和間距。
- Design Process Widget:Ordered → Dispatched → Delivered 進度列的圖示、顏色和間距。
如果您的版面配置是 Message only 或 Progress bar only,則只需注意相關的那一半。
Stock 和 Cart 倒數設計
Section titled “Stock 和 Cart 倒數設計”這兩種類型的設計控制項位於 Settings 標籤頁內。
Stock countdown 提供 Alignment、訊息、滑桿、庫存數字和背景各自的顏色,以及 Animation:None、Flash 或 Pulse。
Cart countdown 提供位置、訊息、計時器和背景的顏色、邊框和字型。
自訂 CSS
Section titled “自訂 CSS”每種類型的最後都有一個 Custom CSS (Developer Zone) 方塊,可處理控制項未涵蓋的需求。請參閱自訂 CSS。
參考您的佈景主題。 使用品牌色的倒數看起來像是商店的一部分,使用範本預設值的則顯得格格不入。佈景主題的強調色通常是適合的背景色。
對比比顏色更重要。 數字才是重點,請確保它們在任何背景上都清晰可讀,包括在字型大小範圍的最小端。
在真實頁面上檢查。 預覽只在自己的背景上顯示倒數。而您的商品頁面還有價格、按鈕和圖片與它競爭注意力。
在手機上檢查。 請使用 Design Mobile Section,而不是接受電腦版大小在小螢幕上的呈現結果。