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

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

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

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

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

网商动力
网商动力(https://www.eckey.cn)跨境电商,致力于提供一手资讯、干货知识。
2019-07-28 20:21:05
17

如上图所示,公告栏是展示包邮、销售或其他促销活动的好办法。本文介绍一个不需要使用收费的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 赞
最新
Coupang跨境电商现状详解:探讨Coupang平台的发展现状与新兴趋势
Coupang跨境电商现状详解:探讨Coupang平台的发展现状与新兴趋势
Coupang跨境电商平台现状与趋势分析:全面解析韩国电商巨头的全球扩张之路 一、引言 随着全球电子商务市场的蓬勃发展,越来越多的电商平台开始跨足国际市场。作为韩...
fruugo跨境电商平台入驻指南:全面评估fruugo平台的商业机会与入驻可行性
fruugo跨境电商平台入驻指南:全面评估fruugo平台的商业机会与入驻可行性
Fruugo跨境电商平台入驻指南:全面评估商业机会与入驻可行性 一、引言 随着全球电商市场的不断发展,越来越多的商家开始寻求跨境电商的机会。Fruugo作为一家知名的...
Shopee入驻全攻略:新手卖家如何轻松起步,站点选择与开店流程详解
Shopee入驻全攻略:新手卖家如何轻松起步,站点选择与开店流程详解
Shopee新手攻略:全面解析Shopee入驻要求和流程,助您轻松开店 文章摘要:想要在Shopee平台开店的新手卖家,了解入驻要求和流程至关重要。本文将为您详细解读Shopee入驻...
亚马逊开店全指南:可靠性分析与开店步骤详解
亚马逊开店全指南:可靠性分析与开店步骤详解
亚马逊开店全指南:可靠性分析与开店步骤详解 在数字化时代,电子商务已经成为许多创业者的首选。作为全球最大的在线零售平台之一,亚马逊为卖家提供了巨大的市场潜力...
eBay 商品发布指南:详细上传步骤解析
eBay 商品发布指南:详细上传步骤解析
eBay上架全攻略:新手卖家必读教程与注意事项 标签:eBay上架教程、eBay新手卖家、跨境电商、eBay商品发布 正文 对于涉足跨境电商的新手卖家来说,如何在eBay上成功...
如何在 eBay 分享商品链接:实用指南
如何在 eBay 分享商品链接:实用指南
如何在 eBay 分享商品链接:实用指南 在 eBay 上分享商品链接是一种有效的推广方式,可以帮助您吸引更多潜在买家。本文将详细介绍如何在 eBay 上分享商品链接,并提供...
Copyright ? 2016-2022 ? ? 亚马逊卖家导航? ? 晋ICP备20005961号-2 声明:网站上的服务均为第三方提供,与网商动力无关。请用户注意甄别服务质量,避免上当受骗。