可滑动的top bar展示效果比静态的往往更容易引起客户的注意，你可以在这个滑动的公告栏里面里面加入“free shipping”或者是折扣码信息来吸引客户的注意，从而促进用户的转化。
接下来我会手把手教大家如何创建一个可滑动的top bar
1.创建一个新的section区块
首先找到online store – Themes里面找到你要操作的模板然后点击Edit Code
接下来你可以找到Sections的区块点击右上角的创建Section，然后给文件夹命名为websensepro-announcement-bar.liquid
2.复制下面的代码到刚刚创建的section里面
{% comment %}
Powered By Jixindesign
{% endcomment %}
{%- style -%}
.websensepro-scroller {
background-color: {{ section.settings.bg_color }};
color: {{ section.settings.text_color }};
overflow: hidden;
white-space: nowrap;
padding: {{ section.settings.padding }}px 0;
display: flex;
align-items: center;
border-bottom: 1px solid {{ section.settings.text_color | color_modify: 'alpha', 0.1 }};
}
.scroller-inner {
display: flex;
flex-wrap: nowrap;
animation: scroll {{ section.settings.speed }}s linear infinite;
}
{% if section.settings.pause_on_hover %}
.websensepro-scroller:hover .scroller-inner {
animation-play-state: paused;
}
{% endif %}
.scroller-item {
display: flex;
align-items: center;
padding: 0 {{ section.settings.gap }}px;
font-size: {{ section.settings.font_size }}px;
font-weight: {{ section.settings.font_weight }};
text-transform: {{ section.settings.text_transform }};
}
.scroller-item a {
color: inherit;
text-decoration: none;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
{%- endstyle -%}
<div class="websensepro-scroller" id="section-{{ section.id }}">
<div class="scroller-inner">
{%- capture scroll_content -%}
{%- for block in section.blocks -%}
<div class="scroller-item" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}">{{ block.settings.text }}</a>
{% else %}
<span>{{ block.settings.text }}</span>
{% endif %}
{% if section.settings.show_separator %}
<span style="margin-left: {{ section.settings.gap }}px;">{{ section.settings.separator }}</span>
{% endif %}
</div>
{%- endfor -%}
{%- endcapture -%}
{{ scroll_content }}
{{ scroll_content }}
{{ scroll_content }}
{{ scroll_content }}
</div>
</div>
{% schema %}
{
"name": "WS Pro Scrolling Bar",
"settings": [
{
"type": "color",
"id": "bg_color",
"label": "背景颜色",
"default": "#000000"
},
{
"type": "color",
"id": "text_color",
"label": "文字颜色",
"default": "#ffffff"
},
{
"type": "range",
"id": "font_size",
"min": 12,
"max": 40,
"step": 1,
"unit": "px",
"label": "字体大小",
"default": 16
},
{
"type": "select",
"id": "font_weight",
"label": "字体粗细",
"options": [
{ "value": "400", "label": "常规" },
{ "value": "600", "label": "加粗" },
{ "value": "800", "label": "特粗" }
],
"default": "400"
},
{
"type": "select",
"id": "text_transform",
"label": "文字转换",
"options": [
{ "value": "none", "label": "默认" },
{ "value": "uppercase", "label": "全大写" }
],
"default": "none"
},
{
"type": "range",
"id": "speed",
"min": 5,
"max": 50,
"step": 1,
"unit": "s",
"label": "滚动速度 (越小越快)",
"default": 20
},
{
"type": "range",
"id": "gap",
"min": 10,
"max": 100,
"step": 5,
"unit": "px",
"label": "项目间距",
"default": 30
},
{
"type": "range",
"id": "padding",
"min": 5,
"max": 50,
"step": 1,
"unit": "px",
"label": "上下内边距",
"default": 10
},
{
"type": "checkbox",
"id": "pause_on_hover",
"label": "鼠标悬停时停止",
"default": true
},
{
"type": "header",
"content": "分隔符设置"
},
{
"type": "checkbox",
"id": "show_separator",
"label": "显示分隔符",
"default": true
},
{
"type": "text",
"id": "separator",
"label": "分隔图标/文字",
"default": "•"
}
],
"blocks": [
{
"type": "text_block",
"name": "文字公告",
"settings": [
{
"type": "text",
"id": "text",
"label": "公告内容",
"default": "🔥 欢迎来到我们的商店！限时免邮中。"
},
{
"type": "url",
"id": "link",
"label": "链接 (可选)"
}
]
}
],
"presets": [
{
"name": "WS Pro 无限滚动文字",
"blocks": [
{ "type": "text_block" },
{ "type": "text_block" },
{ "type": "text_block" }
]
}
]
}
{% endschema %}3.在theme.liquid引用写好的代码
theme.liquid里面找到 {{ content_for_header }}
然后在他上面加入一行代码：{%- section 'websensepro-announcement-bar' -%}
4.呈现效果
下面是通过本代码嵌入呈现的效果。
我们在代码里面做好了预设置，你还可以控制字体大小，滚动速度等等细节~非常好用
上述的代码都是经过精心优化的，不会影响到网站的加载速度放心使用，如果你有网站速度需要优化，也可以自行学习如何优化网站速度。