创建基础横幅
使用内容元素构建基础横幅,设置横幅样式,添加关闭按钮或点击跳转链接,并选择显示位置。
基础横幅是由内容元素(标题、消息、按钮、倒计时、图片)组成的横条,这些元素分组放在一个或多个区块中。编辑器分为两个标签页: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 字段,输入目标地址,并使用旁边的开关决定是否在新标签页中打开链接。

启用每个复选框后会显示对应的设置,即关闭按钮颜色或链接 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 状态则可以继续编辑而不发布。