• 搜索
官方微信群 扫码添加,拉你进群
订阅号
服务号
跨境资讯

为你推送和解读最前沿、最有料的跨境电商资讯

90% 亚马逊卖家都在关注的微信公众号

精选今日跨境电商头条资讯

抖音收购英国音乐AI初创公司;天猫国际推出英文版网站;美国将解禁对华为供货 | Morketing Global一周出海15期

网商动力
(eceky.cn)实用跨境电商导航工具,致力打造集全球开店服务、 !。
2019-07-28 20:21:05
34

如上图所示,公告栏是展示包邮、销售或其他促销活动的好办法。本文介绍一个不需要使用收费的app。只需在主题中复制几行代码就可以了(可以先熟悉一下如何在shopify添加css)!这个简单的功能,没必要装个app,越少的app,网站打开的速度就越快,对于优化shopify店铺来说,是个好方案。

这个公告栏还可以显示一个可选的“包邮计算”,所以购物者总是知道他们离包邮还差多少钱!以促进客户加购,提高客单价,下面就跟着我一步一步来实现吧:)


01

在shopify后台打开模板编辑器


在后台,在线商店 > 模板 > 编辑 > 编辑代码,如下图所示:

如果您的网站已经是正在运行的情况,我建议您制作一份模板副本,并在未发布的模板中进行操作,以避免破坏您的正常店铺。


02

添加一个新的Section


在模板编辑器左侧栏。在“Section”下,单击“新增 section”。在出现的弹出窗口中,输入名称“announcement-bar.liquid”。之后删除里面的默认代码。


03

复制粘贴代码


把下面的代码粘贴到这个文件里面后保存。

{% if section.settings.message %}
{% if section.settings.home_page_only == false or template.name == 'index' %}
<style>
.announcement-bar {
background-color: {{ section.settings.color_bg }};
text-align:center;
{% if section.settings.header_padding > 0 %}
position:absolute;
top: -{{ section.settings.header_padding }}px !important;
left:0;
width:100%;
z-index:9;
{% endif %}
}
.announcement-bar p {
padding:10px 0;
font-size: {{ section.settings.font_size }}px;
margin:0 !important;
}
.announcement-bar__message,
.announcement-bar--link {
color: {{ section.settings.color_text }};
}
.announcement-bar--link:hover,
.announcement-bar--link:hover .announcement-bar__message {
color: {{ section.settings.color_text_hover }} !important;
}
body {
position:relative;
top: {{ section.settings.header_padding }}px !important;
}
</style>

{% if section.settings.message_link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
{% endif %}

{% capture shipping_value %}{{ section.settings.free_shipping_threshold | times: 100 }}{% endcapture %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}
{% assign shipping_value_left_money = shipping_value_left | money %}
{% capture free_shipping_notqualified %}
{{ section.settings.free_shipping_notqualified | replace: '[price]', shipping_value_left_money }}
{% endcapture %}
{% assign free_shipping_qualified = section.settings.free_shipping_qualified %}
{% assign announcement_message = section.settings.message_text %}

{% if section.settings.free_shipping_countdown %}
{% if cart.total_price > 0 %}
{% assign announcement_message = free_shipping_notqualified %}
{% endif %}
{% if shipping_value_left <= 0 %}
{% assign announcement_message = free_shipping_qualified %}
{% endif %}
{% endif %}

<p class="announcement-bar__message">{{ announcement_message }}</p>

{% if section.settings.message_link == blank %}
</div>
{% else %}
</a>
{% endif %}

{% endif %}
{% endif %}

<style>

</style>

{% schema %}
{
"name": "公告栏",
"settings": [
{
"type": "header",
"content": "通用"
},
{
"type": "checkbox",
"id": "message",
"label": "显示公告",
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": "只在主页显示",
"default": false
},
{
"type": "range",
"id": "header_padding",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "顶部间距",
"default": 0,
"info": "将页面内容向下推到公告栏下方(仅在某些主题上需要)"
},
{
"type": "header",
"content": "内容"
},
{
"type": "text",
"id": "message_text",
"label": "公告",
"default": "这里填公告内容"
},
{
"type": "checkbox",
"id": "free_shipping_countdown",
"label": "显示包邮倒计时",
"info": "告诉客户需要添加到购物车中多少才能获得免费配送(仅当购物车中至少有一个商品时才会显示).",
"default": false
},
{
"type": "range",
"id": "free_shipping_threshold",
"min": 5,
"max": 100,
"step": 1,
"unit": "$",
"label": "包邮门槛",
"default": 25,
"info": "客户免费配送的金额(必须与您的配送设置匹配)。"
},
{
"type": "textarea",
"id": "free_shipping_notqualified",
"label": "不符合包邮的信息",
"default": "Add just [price] to your cart to receive free shipping!"
},
{
"type": "textarea",
"id": "free_shipping_qualified",
"label": "符合包邮的信息",
"default": "Your order qualifies for free shipping!"
},
{
"type": "url",
"id": "message_link",
"label": "链接",
"info": "可选"
},
{
"type": "header",
"content": "字体和颜色"
},
{
"type": "color",
"id": "color_bg",
"label": "背景颜色",
"default": "#333333"
},
{
"type": "color",
"id": "color_text",
"label": "文字颜色",
"default": "#ffffff"
},
{
"type": "color",
"id": "color_text_hover",
"label": "链接颜色",
"default": "#eeeeee"
},
{
"type": "range",
"id": "font_size",
"min": 8,
"max": 36,
"step": 1,
"unit": "px",
"label": "字体大小",
"default": 14
}
]
}
{% endschema %}

如下图所示:


04

在模板编辑器中打开 theme.liquid 文件



您可以在侧边栏顶部的layout文件夹中找到theme.liquid,如下图所示。



05

在 theme.liquid 文件里添加一行代码



在theme.liquid中,查找如下代码:

{% section 'header' %}


不同的主题模板,它可能被名字不太一样,但它可能有单词“header”。其他一些常见的名字是:

{% section 'general-header' %}

{% section 'dynamic-header' %}


在这行代码上方,复制并粘贴以下内容:

{% section 'announcement-bar' %}


如下图所示:


06

进入自定义模板设置公告栏


完成以上操作后,这个公告栏就已经大功告成了!我们进入自定义模板界面里面(在线商店 -> 模板 -> 自定义),就会看见多出来一个公告栏的项目,点击进入,可以看到里面有一些配置,可以根据你自己的需要来进行进一步的调整,比如公告信息、颜色、字体大小、链接、包邮价格设置等。


如此:就完成了这个功能,省去了安装app还要付费,岂不是很爽!

二维码
我们建了一个亚马逊卖家交流群,里面不乏很多大卖家。
现在扫码回复“ 加群 ”,拉你进群。
目前30万+人已关注加入我们
声明:此文章来源于网络,不代表网商动力立场。如有侵权,请联系我们。
快给朋友分享吧!
0 赞
最新
跨境电商入门指南:如何入驻Mercadolibre平台全解析
跨境电商入门指南:如何入驻Mercadolibre平台全解析
跨境电商入门指南:如何入驻Mercadolibre平台全解析 正文: 在全球化的大背景下,越来越多的国内卖家开始寻求跨境电商的机会。Mercadolibre作为拉丁美洲最大的电子商...
Ozon平台合法性解析:探究Ozon跨境电商业务的可行性与合规性
Ozon平台合法性解析:探究Ozon跨境电商业务的可行性与合规性
Ozon平台运营规范:揭秘Ozon跨境电商平台的规则与标准 在跨境电商日益繁荣的当下,Ozon平台凭借其良好的口碑和优质的服务,吸引了众多商家和消费者的关注。为了确保平...
Shein平台入驻揭秘:深入了解Shein入驻模式和注册流程要点
Shein平台入驻揭秘:深入了解Shein入驻模式和注册流程要点
Shein注册指南:轻松上手:Shein详细注册流程全攻略 在追求时尚与便捷购物的时代,Shein作为一家领先的时尚购物网站,不仅提供了丰富的潮流服饰和配饰,还支持全球快速发...
gmarket官网新用户注册攻略:一步步教你完成注册流程
gmarket官网新用户注册攻略:一步步教你完成注册流程
Gemini交易平台注册全攻略:松创建账户+身份验证流程详解 在全球数字货币交易领域,Gemini平台以其安全可靠和合规性著称。想要加入Gemini进行数字货币交易?本文将为您...
2024年Ozon跨境电商市场新机遇:卖家现状与运营策略解析
2024年Ozon跨境电商市场新机遇:卖家现状与运营策略解析
2024年Ozon跨境电商市场新机遇:卖家现状与运营策略解析 随着跨境电商的蓬勃发展,Ozon平台作为俄罗斯最大的在线购物平台之一,吸引了全球众多卖家的目光。面对2024年...
亚马逊官网登录入口:快速链接及详细登录步骤
亚马逊官网登录入口:快速链接及详细登录步骤
亚马逊全解析:深度揭秘平台优势与全球站点运营策略 摘要:亚马逊,作为全球最大的电子商务平台之一,以其卓越的平台优势和多站点布局吸引了无数卖家。本文将对亚马逊的...
Copyright ? 2016-2022 ? ? 亚马逊卖家导航? ? 晋ICP备20005961号-2 声明:网站上的服务均为第三方提供,与网商动力无关。请用户注意甄别服务质量,避免上当受骗。