建立基本橫幅
以內容元素建立基本橫幅、設定橫幅樣式、加入關閉按鈕或點擊連結,並選擇顯示位置。
基本橫幅是由內容元素(標題、訊息、按鈕、倒數計時、圖片)組成的橫條,這些元素可分成一個或多個區段。編輯器分為兩個分頁:Design(內容與樣式)和 Placement(橫幅顯示的位置與對象)。
-
開啟 Banners 頁面
Section titled “開啟 Banners 頁面”在 Shopify 後台中,開啟 Sami Product Labels 應用程式,點擊應用程式側邊欄中的 Extra Features,然後切換到 Banners 分頁。

從 Sami Product Labels 側邊欄開啟 Banners。
-
點擊 Create banners,然後選擇 Basic
Section titled “點擊 Create banners,然後選擇 Basic”點擊 Create banners。在 Select Type 對話框中,點擊 Basic 旁的 Select,此類型支援單一或多個內容群組。

選擇 Basic 以建立標準的公告橫幅。
-
全螢幕編輯器會開啟在 Design 分頁。將預覽上方名稱欄位中的 New Banner 替換為不超過 50 個字元的名稱。此名稱僅供內部使用,用於在清單中辨識橫幅,不會顯示給顧客。
名稱旁還有語言選擇器、桌機與手機預覽切換,以及 Active / Draft 狀態開關。

預覽上方的工具列包含橫幅名稱、語言、預覽裝置和狀態。
-
在 Content 下,Section 1 會列出組成橫幅的元素。點擊任一元素即可編輯其文字和樣式,拖曳左側的把手可重新排序,也可使用該列右側的圖示來隱藏、複製或刪除元素。
點擊 Add element 新增元素:
元素 新增的內容 Message 一行內文。 Heading 大標題。 Line break 元素之間的垂直間距。 Button 具有專屬連結的行動呼籲按鈕。 Countdown 以天/時/分/秒顯示的計時器。 Image 圖片或標誌。 
新增、重新排序並編輯組成橫幅的元素。
-
(選用)新增更多內容群組
Section titled “(選用)新增更多內容群組”點擊 Add Group 建立 Section 2、Section 3 等區段。每個區段都是獨立的訊息,橫幅會輪流顯示這些區段,時間可在後續步驟的 Animation 下控制。
如果只想顯示一則固定訊息,保留單一區段即可。
-
設定橫幅樣式
Section titled “設定橫幅樣式”在 Style 面板中:
- Background Type:選擇 Single Color、Gradient Color 或 Pattern Image,然後設定顏色或圖片。
- Font Style:設定字型、大小、粗細和文字顏色。
- Padding:控制橫幅內部的間距。

設定整個橫幅的背景、字型和內距。
-
加入關閉按鈕或讓橫幅可點擊
Section titled “加入關閉按鈕或讓橫幅可點擊”這兩個選項都位於 Button 面板中,預設為關閉:
- 勾選 Include Close Button,即可在橫幅上顯示「x」,讓顧客關閉橫幅。接著會出現兩個欄位:Color 和 Hover Color。
- 勾選 Bar Clickable,即可將整個橫幅變成連結。接著會出現 Link URL 欄位,請輸入目的地,並使用旁邊的開關決定是否在新分頁中開啟連結。

勾選各個核取方塊後會顯示對應的設定,包括關閉按鈕的顏色或連結網址。
-
設定動畫時間
Section titled “設定動畫時間”在 Animation 面板中,選擇 Horizontal 或 Vertical 轉場,然後以秒為單位設定時間:
欄位 控制內容 Disappear After 橫幅在畫面上停留多久後隱藏。 Interval Between Bar Display 橫幅再次出現前的間隔時間。 Time For The Bar To Fade In 淡入動畫的長度。 Time Per Group 每個區段顯示多久後輪到下一個。 -
(選用)新增自訂 CSS
Section titled “(選用)新增自訂 CSS”開啟 Advance Section,在 Custom CSS (Developer Zone) 方塊中撰寫您自己的 CSS。下方的 CSS reference 清單會列出可用的選擇器,點擊其中一個即可插入。
-
選擇橫幅的顯示位置
Section titled “選擇橫幅的顯示位置”切換到 Placement 分頁,並選擇顯示位置:
位置 行為 Top 將頁面內容往下推。 Top Sticky 將內容往下推,並在捲動時保持可見。 Top Overlay 覆蓋在頁面內容頂端。 Overlay Sticky 覆蓋在內容上,並在捲動時保持可見。 Bottom Sticky 固定在頁面底部。 Custom 使用短代碼將橫幅放在任何位置。 在位置選擇器下方,可使用 Product conditions、Customer conditions、Page conditions、Language conditions、Country conditions、Other conditions 和 Visibility date 縮小受眾範圍。選擇 Custom 時,Shortcode 面板會提供可貼到佈景主題中的程式碼片段。
各條件類型的完整說明,請參閱設定顯示條件。

選擇顯示位置,再加入條件來控制誰能看到橫幅。
-
將預覽上方的狀態開關設為 Active,然後點擊右上角的 Save。若保持 Draft,則可繼續編輯而不發佈。