建立無限捲動橫幅

無限捲動橫幅是內容由右向左持續循環的橫條，就像新聞跑馬燈。適合用於重複的促銷活動、免運費通知，或您希望顧客注意的簡短公告。

注意

無限捲動橫幅只有單一內容區段，沒有 Add Group 選項。如果您需要多則訊息依序輪流顯示，請改用基本橫幅。

1. 開啟 Banners 頁面

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

   

   從 Sami Product Labels 側邊欄開啟 Banners。

2. 點擊 Create banners，然後選擇 Infinite Scroll

   點擊 Create banners。在 Select Type 對話框中，點擊 Infinite Scroll 旁的 Select，此類型會無限循環橫幅內容，營造無縫捲動的效果。

   

   選擇 Infinite Scroll 以建立跑馬燈式的橫幅。

3. 為橫幅命名

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

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

   

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

4. 編輯捲動內容

   Section 1 一開始只有一個 Description 元素，內含範例文字，例如 ✨ Free ship on order $40+ ✨。點擊它即可在右側開啟其設定：

   • Content：富文字編輯器，支援粗體、斜體、底線、表情符號、對齊方式和 HTML 檢視（</>）。語言標籤會顯示您正在編輯的語言。
   • Text：字型 Size 和 Color。
   • Padding 和 Margin：元素周圍的間距，單位為像素。

   點擊 Add element 可在循環中加入更多項目，包括 Message、Heading、Line break、Button、Countdown 或 Image，並可拖曳該列左側的把手來重新排序。

   

   編輯在橫幅上循環的元素，或在序列中加入更多元素。

5. 設定橫幅樣式

   在 Style 面板中：

   • Background Type：選擇 Single Color、Gradient Color 或 Pattern Image。無限捲動橫幅預設為 Pattern Image；使用 Change Image 可更換圖樣，使用 Remove 可清除。
   • Font Style：設定字型、粗細和預設文字顏色。
   • Padding：控制橫幅內部的間距。

   注意

   圖樣圖片須為 PNG、JPG 或 SVG 格式，大小不超過 5 MB，尺寸為 512 × 512 px。

6. 加入關閉按鈕或讓橫幅可點擊

   這兩個選項都位於 Button 面板中，預設為關閉：

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

   

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

7. 設定捲動速度與時間

   Animation 面板中的四個欄位皆以秒為單位：

   欄位	控制內容
   Scroll speed	完整循環一次所需的時間。數字越大，捲動越慢。
   Disappear After	橫幅在畫面上停留多久後隱藏。
   Interval Between Bar Display	橫幅再次出現前的間隔時間。
   Time For The Bar To Fade In	淡入動畫的長度。

   注意

   將欄位保留為 0 即可停用該行為，例如 Disappear After = 0 會讓橫幅一直顯示，直到顧客關閉為止。

   

   Scroll speed 設定一次循環的時間長度，調大即可讓跑馬燈變慢。

8. （選用）新增自訂 CSS

   開啟 Advance Section，在 Custom CSS (Developer Zone) 方塊中撰寫您自己的 CSS。下方的 CSS reference 清單會列出可用的選擇器，包括 .samita_banner_groups.infinityScroll，這是啟用無限捲動時使用的外層容器。點擊選擇器即可插入。

9. 選擇橫幅的顯示位置

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

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

   

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

10. 儲存並啟用

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

    警告

    只有在佈景主題中啟用應用程式嵌入後，橫幅才會顯示在您的商店前台。請參閱在佈景主題中啟用應用程式。

後續步驟

• 設定顯示條件：控制橫幅顯示的位置與對象。
• 建立基本橫幅：改為建立靜態或輪播的公告橫幅。

提示

需要支援嗎？

如果您在操作這些步驟時遇到任何困難，請透過 [email protected] 聯絡我們。