创建无限滚动横幅

无限滚动横幅是一种内容从右向左连续循环的横条，类似新闻跑马灯。可用于重复展示促销信息、免运费通知，或希望客户注意到的简短公告。

注意

无限滚动横幅只有一个内容区块，没有 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 字段，输入目标地址，并使用旁边的开关决定是否在新标签页中打开链接。

   

   启用每个复选框后会显示对应的设置，即关闭按钮颜色或链接 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] 联系我们。