橫幅內容與元素
橫幅可包含的六種元素、如何排序,以及如何用群組讓一個橫幅傳達兩則訊息。
Content 面板是建構器側欄中的第一個圖示,包含橫幅要說的所有內容。

元素在橫幅中由左至右排列,順序與它們在此清單中的順序相同。
- Add element 會開啟六種類型的選單。新元素會加到清單的最後。
- 拖曳控點(位於每列左側)即可移動該列。橫幅會依此處的順序排列。
- 將游標移到某一列上,會顯示複製和刪除按鈕。
- 點擊某一列,即可在右側欄中開啟其設定。
訊息本身。可設定文字內容、大小、粗體、斜體、底線,以及專屬的顏色。
顏色留空時,文字會沿用橫幅本身的文字顏色,因此重新設計橫幅樣式時,訊息也會一併更新。
Countdown
Section titled “Countdown”橫幅內的即時計時器,有三種模式:
| 模式 | 顧客看到的內容 |
|---|---|
| Count down to a date | 所有人看到相同的剩餘時間 |
| Fixed minutes per visitor | 每位顧客抵達時都有自己的計時 |
| Daily recurring | 在選定的星期幾,於兩個時間之間執行 |
您還可以選擇要顯示哪些單位(天、小時、分鐘、秒)、是否在數字下方顯示單位說明,以及說明的文字。說明留空即會使用英文預設值。
When the timer ends 決定倒數到零時會發生什麼事:隱藏橫幅、停在零,或重新開始。
Button
Section titled “Button”一個標籤加上一個動作:
| On click | 作用 |
|---|---|
| Open a link | 將顧客帶到某個 URL |
| Scroll to a section | 以 CSS 選擇器跳到目前頁面的某個區塊 |
| Apply a discount code | 將折扣碼套用到顧客的購物車 |
對於連結,您也可以開啟 Open in a new tab,讓您的商店保持在背景開啟。
其餘是樣式設定:形狀(方形、圓角、膠囊形)、字型大小、尺寸預設、粗體/斜體/底線、背景、標籤顏色和邊框。
Discount code
Section titled “Discount code”折扣碼本身,以虛線外框顯示。開啟 Copy on click 後,顧客只要點擊就能複製,無需選取,也無需輸入。
可設定其邊框樣式、圓角半徑和專屬顏色。
標誌或徽章。貼上 URL,或上傳檔案,欄位會自動填入。可設定高度和替代文字。
替代文字是螢幕閱讀器會朗讀的內容,也是圖片載入失敗時顯示的內容。
Line break
Section titled “Line break”沒有可見的內容。它後面的所有內容都會從新的一行開始,讓較長的橫幅能分成兩列,而不是擠成一列。
將它拖曳到兩個元素之間,就能在您想要的位置分行。
一個元素,兩種螢幕
Section titled “一個元素,兩種螢幕”開啟除 line break 以外的任何元素,其 Style 區段的開頭是 Device settings,包含三個圖示:眼睛、桌機和手機。

Device settings 位於 Style 的頂端,其下方的所有設定都會依您選擇的圖示而定。
眼睛是一般情況:您的設定會套用到兩種螢幕。
桌機和手機圖示會將其下方的設定限縮到該螢幕。選擇手機並將字型大小調為 12,就只有手機會是 12,桌機則維持眼睛所設定的值。Style 中的所有設定都能這樣拆分:字型大小、倒數計時的數字和標籤大小、顏色和顯示的單位、圖片高度、按鈕的形狀和大小、折扣碼的邊框和顏色。
選擇某種螢幕後,還會顯示 Hide on desktop 或 Hide on mobile 切換開關。您可以藉此隱藏不適合手機的元素(例如長句子或圖片),而不必另外建立第二個橫幅。該元素仍會顯示在另一種螢幕上。
Line break 沒有 Style 區段,因此保留單純的 Show on 控制項:Both screens、Desktop only 或 Mobile only。
群組:一個橫幅,兩則訊息
Section titled “群組:一個橫幅,兩則訊息”在元素清單下方是 Add group。
一個群組是一般情況。新增第二個群組後,橫幅會在它們之間循環:先顯示第一個群組,接著是第二個,然後再回到第一個。每個群組各有自己的元素,因此一個橫幅可以在「Free shipping over $50」和「Sale ends tonight」之間輪流顯示。
切換的速度,以及是淡入淡出還是滑動,請參閱動畫與群組。