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

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

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

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

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

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

如上图所示,公告栏是展示包邮、销售或其他促销活动的好办法。本文介绍一个不需要使用收费的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 赞
最新
Kilimall跨境电商卖家登录指南:官方入口网址与详细流程
Kilimall跨境电商卖家登录指南:官方入口网址与详细流程
Kilimall跨境电商卖家登录指南:官方入口与详细流程 在当今数字化时代,跨境电商已成为连接全球买家与卖家的重要桥梁。作为领先的跨境电商平台之一,Kilimall为众多商...
揭秘2024国外最火跨境电商平台:卖家必备指南
揭秘2024国外最火跨境电商平台:卖家必备指南
揭秘2024国外最火跨境电商平台:卖家必备指南 随着全球电商市场的持续发展和融合,跨境电商平台已成为众多商家拓展国际市场的重要渠道。面对琳琅满目的平台选择,卖家...
国内跨境电商实操指南:必备条件与步骤详解
国内跨境电商实操指南:必备条件与步骤详解
国内跨境电商实操指南:必备条件与步骤详解 随着全球化进程的加速,跨境电商已成为越来越多企业和个人的选择。为了在跨境电商领域取得成功,需要具备一定的条件和准备...
探究TikTok最新动态:当前状况深度分析
探究TikTok最新动态:当前状况深度分析
国外抖音电商发展现状:短视频平台引领电商新潮流 随着移动互联网的飞速发展,电商行业已成为全球经济的重要支柱之一。近年来,国内抖音电商作为一股新生力量迅速崛起...
国外电商平台有哪些?2024国外最火的跨境电商平台
国外电商平台有哪些?2024国外最火的跨境电商平台
全球跨境电商平台大汇总:探索各大洲的主流电商平台 在全球化的今天,跨境电商已经成为连接不同国家和地区消费者与商家的重要桥梁。本文将为您详细介绍全球各大洲的...
一步一脚印:跨境电商海外运营详细流程分享
一步一脚印:跨境电商海外运营详细流程分享
一步一脚印:跨境电商海外运营详细流程分享 在全球化的今天,跨境电商已经成为许多企业拓展海外市场的重要途径。然而,海外运营并非易事,需要遵循一定的流程和策略。...
Copyright ? 2016-2022 ? ? 亚马逊卖家导航? ? 晋ICP备20005961号-2 声明:网站上的服务均为第三方提供,与网商动力无关。请用户注意甄别服务质量,避免上当受骗。