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

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

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

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

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

网商动力
网商动力(https://www.eckey.cn)跨境电商,致力于提供一手资讯、干货知识。
2020-02-28 18:07:39
23

同大多数固定金额固定文案的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 赞
最新
跨境电商平台与独立站对比:哪个更适合电商创业
跨境电商平台与独立站对比:哪个更适合电商创业
跨境电商之独立站模式解析:2021年最火的两个赛道除了新消费,另外一个应该就是跨境电商。 在电商创业的浪潮中,跨境电商平台和独立站成为了许多创业者关注的焦点。那...
Temu跨境电商平台入驻费用详解:多少钱能开店?完整入驻流程指南
Temu跨境电商平台入驻费用详解:多少钱能开店?完整入驻流程指南
Temu跨境电商平台入驻费用一览:揭秘开店成本与步骤详解 Temu跨境电商平台以其高效的物流和友好的用户体验,吸引了许多商家和创业者。想要在Temu开店,了解入驻费用和...
Shein跨境电商平台入驻费用详解:多少钱及入驻流程解析
Shein跨境电商平台入驻费用详解:多少钱及入驻流程解析
Shein跨境电商平台入驻费用详解及流程全解析 在当今数字化时代,跨境电商已成为众多商家拓展国际市场的重要途径。而Shein作为全球知名的快时尚电商平台,吸引了大量...
菲律宾跨境电商市场攻略:最适合销售的爆款产品盘点
菲律宾跨境电商市场攻略:最适合销售的爆款产品盘点
菲律宾跨境电商市场攻略:揭秘最畅销的爆款产品 1. 电子产品及配件1.智能手机与平板电脑:随着互联网普及率的提高,智能设备需求激增。2.耳机和音响设备:高品质音频体验...
精选跨境电商供应商名录:如何寻找优质供货商指南
精选跨境电商供应商名录:如何寻找优质供货商指南
跨境电商供应商选择全攻略:品质、成本与合规性全面解析 在跨境电商领域,选择合适的供应商是业务成功的关键。本文将从产品品质、成本控制、供货能力、售后服务以及...
跨境电商业务模式全景解析:主流运作模式一览
跨境电商业务模式全景解析:主流运作模式一览
跨境电商业务模式全景解析:主流运作模式一览 在全球化浪潮下,跨境电商已成为连接国际市场的重要桥梁。本文将对跨境电商的主流业务模式进行全景解析,帮助您全面了解...
Copyright ? 2016-2022 ? ? 亚马逊卖家导航? ? 晋ICP备20005961号-2 声明:网站上的服务均为第三方提供,与网商动力无关。请用户注意甄别服务质量,避免上当受骗。