跳到內容
免費試用 7 天
繁體中文
在 Claude 中開啟 針對此頁面提問在 ChatGPT 中開啟 針對此頁面提問

建立基本橫幅

以內容元素建立基本橫幅、設定橫幅樣式、加入關閉按鈕或點擊連結,並選擇顯示位置。

基本橫幅是由內容元素(標題、訊息、按鈕、倒數計時、圖片)組成的橫條,這些元素可分成一個或多個區段。編輯器分為兩個分頁:Design(內容與樣式)和 Placement(橫幅顯示的位置與對象)。

  1. 在 Shopify 後台中,開啟 Sami Product Labels 應用程式,點擊應用程式側邊欄中的 Extra Features,然後切換到 Banners 分頁。

    The Banners section in the app sidebar

    從 Sami Product Labels 側邊欄開啟 Banners。

  2. 點擊 Create banners,然後選擇 Basic

    Section titled “點擊 Create banners,然後選擇 Basic”

    點擊 Create banners。在 Select Type 對話框中,點擊 Basic 旁的 Select,此類型支援單一或多個內容群組。

    The Select Type dialog with the Basic and Infinite Scroll options

    選擇 Basic 以建立標準的公告橫幅。

  3. 全螢幕編輯器會開啟在 Design 分頁。將預覽上方名稱欄位中的 New Banner 替換為不超過 50 個字元的名稱。此名稱僅供內部使用,用於在清單中辨識橫幅,不會顯示給顧客。

    名稱旁還有語言選擇器、桌機與手機預覽切換,以及 Active / Draft 狀態開關。

    The banner editor toolbar with the name field, language selector, preview toggles, and Active/Draft switch

    預覽上方的工具列包含橫幅名稱、語言、預覽裝置和狀態。

  4. 在 Content 下,Section 1 會列出組成橫幅的元素。點擊任一元素即可編輯其文字和樣式,拖曳左側的把手可重新排序,也可使用該列右側的圖示來隱藏、複製或刪除元素。

    點擊 Add element 新增元素:

    元素 新增的內容
    Message 一行內文。
    Heading 大標題。
    Line break 元素之間的垂直間距。
    Button 具有專屬連結的行動呼籲按鈕。
    Countdown 以天/時/分/秒顯示的計時器。
    Image 圖片或標誌。

    The Content panel listing the elements in Section 1 next to the live preview

    新增、重新排序並編輯組成橫幅的元素。

  5. 點擊 Add Group 建立 Section 2、Section 3 等區段。每個區段都是獨立的訊息,橫幅會輪流顯示這些區段,時間可在後續步驟的 Animation 下控制。

    如果只想顯示一則固定訊息,保留單一區段即可。

  6. 在 Style 面板中:

    • Background Type:選擇 Single Color、Gradient Color 或 Pattern Image,然後設定顏色或圖片。
    • Font Style:設定字型、大小、粗細和文字顏色。
    • Padding:控制橫幅內部的間距。

    The Style panel with Background Type, Font Style, and Padding options

    設定整個橫幅的背景、字型和內距。

  7. 這兩個選項都位於 Button 面板中,預設為關閉:

    • 勾選 Include Close Button,即可在橫幅上顯示「x」,讓顧客關閉橫幅。接著會出現兩個欄位:Color 和 Hover Color。
    • 勾選 Bar Clickable,即可將整個橫幅變成連結。接著會出現 Link URL 欄位,請輸入目的地,並使用旁邊的開關決定是否在新分頁中開啟連結。

    The Button panel with Include Close Button and Bar Clickable enabled

    勾選各個核取方塊後會顯示對應的設定,包括關閉按鈕的顏色或連結網址。

  8. 在 Animation 面板中,選擇 Horizontal 或 Vertical 轉場,然後以秒為單位設定時間:

    欄位 控制內容
    Disappear After 橫幅在畫面上停留多久後隱藏。
    Interval Between Bar Display 橫幅再次出現前的間隔時間。
    Time For The Bar To Fade In 淡入動畫的長度。
    Time Per Group 每個區段顯示多久後輪到下一個。
  9. 開啟 Advance Section,在 Custom CSS (Developer Zone) 方塊中撰寫您自己的 CSS。下方的 CSS reference 清單會列出可用的選擇器,點擊其中一個即可插入。

  10. 切換到 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 面板會提供可貼到佈景主題中的程式碼片段。

    各條件類型的完整說明,請參閱設定顯示條件。

    The Placement tab showing the six display positions and the condition panels

    選擇顯示位置,再加入條件來控制誰能看到橫幅。

  11. 將預覽上方的狀態開關設為 Active,然後點擊右上角的 Save。若保持 Draft,則可繼續編輯而不發佈。

這對您有幫助嗎?