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

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

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

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

亚马逊下架超百万件产品,原因竟是......

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

同大多数固定金额固定文案的Free Shipping bar不同,我们今天要实现的是动态Shipping bar,最终的效果会是在购物车页面中出现 “ You are $ XX.XX away from free shipping” ,提醒顾客还需再买多少钱就可以包邮了,而不是笼统的说满$ XX.XX包邮,相比之下,动态的这种提醒会更直接一些,国内的很多平台如淘宝、饿了么、美团,都是这种形式。

小贴士
1. 在进行代码修改之前记得先去确认下模板编辑器中有没有相关功能的设置项,如果有的话,就没必要额外开发代码来实现了;
2. 在做任何大的代码修改之前,一定要记得备份模板,这样即使把模板改乱了后面也可以轻松回滚代码;
3. 需要懂一些基本的HTML、CSS、JS和liquid代码知识。

此功能的实现完全免费且无需安装任何APP插件,当然仅仅针对有代码开发能力的小伙伴们哈,没有技术背景的朋友们也能够按照我的教程一步一步操作来实现功能,但一定不能急,慢慢来。请记住,太多的插件会影响店铺的页面打开速度,因此模板内直接编码总是比安装插件更好。APP开发者确实没有考虑页面速度,但我们应该考虑!

先上效果图,PC端是这样的

动态Shipping Bar效果图-PC

移动端效果是这样的


动态Shipping Bar效果图-移动端


操作步骤:

1、登陆到Shopify店铺后台, 找到Online Store > Themes
2、选择要编辑的模板,然后点击Actions > Edit Code
3、我们需要找到 {% for item in cart.items %} ,比较老的模板一般是在cart.liquid 这个文件中,比较新的模板你可以在 cart-template.liquid 中找;

图1. 代码安装位置示意图

4、浏览器新开页打开代码文件,拷贝所有代码并按照上图图1中的位置安装代码,代码是存放在Github上的,需要翻Qiang才能打得开,打不开的小伙伴可以私信我单独发送;
5、保存文件,并前往店铺前台购物车页面页面查看效果。
6、当然,这个Shipping bar的样式都是可以修改的,比如背景、文案、按钮、图标、字体字号这些,可以根据自己的需求去修改。

说明
如果您从我们的推荐链接注册SHOPIFY店铺并且最终付费订阅了套餐,我们将会从SHOPIFY官方获得一定的返利。这也会支持我们一直为中国的独立站卖家提供最优质而且免费的SHOPIFY教程,感谢您的支持。


二维码
我们建了一个亚马逊卖家交流群,里面不乏很多大卖家。
现在扫码回复“ 加群 ”,拉你进群。
目前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 声明:网站上的服务均为第三方提供,与网商动力无关。请用户注意甄别服务质量,避免上当受骗。