动态结账按钮会根据店铺后台所支持的第三方快速结账付款方式和顾客设备浏览器的记录动态展示快速结帐按钮,比如PayPal Express Checkout、Apple Pay等。当然如果浏览器没有记录或者店铺后台没有支持的快速结帐付款方式,按钮则会显示为“buy it now”。

Dynamic checkout button

顾客可以使用动态结帐按钮快速购买他们想要的商品,直接跳过购物车,缩短了购物流程,对店铺的转化率会有一定的提升。所以说,给商品模块添加“立即购买”按钮还是有必要的。

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

一般模板会有两个地方需要手动更新代码来支持Dynamic checkout button,第一是商品详情页模板,第二是首页Featured product section模块。两个地方的操作都是类似的,都是更新模板里的Product form部分。下面是操作演示。

步骤:

  1. 登陆到Shopify店铺后台, 找到Online Store > Themes
  2. 选择要编辑的模板,然后点击Actions > Edit code
  3. 在section文件夹中,找到以下两个文件:
    1. 点击 Product-template.liquid,有些模板可能直接是 product-form.liquid,打开文件;
    2. 点击 featured-product.liquid,打开文件;
  4. 通过Command+F(Mac)/Ctrl+F(PC)搜索查找<form action="/cart/add". 找到之后,记录该form标签的属性,比如class或者ID,这些属性在我们更新form的时候还要添加上去,不然可能会有一些样式上或者功能上的差别;
  5. 删除<form> 标签,替换为:{% form 'product', product %} ,如果form之前有一些属性,我们还得加上,格式为:{% form 'product', product, id: "oldID", class: "old-class" %},替换里面的oldID或者old-class;
  6. 接着搜索找到</form>,并替换为:{% endform %}
  7. 然后搜索 input 或者 button 标签找到add to cart按钮,一般会带有 type="submit"这个属性;
  8. Add to cart 按钮的下面一行, 添加动态结账按钮的代码:{{ form | payment_button }}
  9. 点击保存,更改之后的form里面的内容应该类似:

{% form ‘product’, product %} … <button type=”submit”>Add to cart</button> {{ form | payment_button }} … {% endform %}


布局独立站首选Shopify,现在注册可享14天免费体验+赠送价值$180精美模板一套+更多建站支持

Create your online store today with Shopify​www.shopify.com

原文请查阅云跨境官网

如何给Shopify店铺添加“立即购买”动态结账按钮​www.yunecommerce.com

js动态给按钮赋id_如何给SHOPIFY店铺添加“立即购买”动态结账按钮相关推荐

  1. 怎么在php中设置收藏按钮,如何在ecshop首页给商品加入立即购买与收藏按钮

    在ecshop首页给商品加入立即购买与收藏按钮,直接模板当中操作修改,无需修改任何PHP代码.方法简便.以下是最模板提供的方法,如果出现错误,请拿错误在最模板网站搜索,继续修改下去. 第一步:首先查看 ...

  2. python从excel读彩票数据统计分析,用matplotlib.pyplot做可视图在程序窗口显示,并可动态切换Canvas的可视图,窗口里还添加了菜单和Button按钮工具栏,按钮换图

    # -*- coding: utf-8 -*- """ Created on Tue May 14 18:58:50 2019 把图片保存成了文件,供gui窗口读取,取消 ...

  3. js微信禁用右上角的分享按钮,,和vue中微信页面禁用右上角的分享按钮的问题

    1.隐藏微信网页右上角的按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {     // 通过 ...

  4. java做类似于qq空间动态加载_实现类似微博、QQ空间等的动态加载

    微博.QQ空间等的动态加载方式属于滚屏加载技术,获取当前滚动条位置来触发onscroll()函数,向服务器发起请求,将请求得到的新的数据动态加载在页面上 本文利用该原理实现了动态加载,但不是检测当前滚 ...

  5. win10动态壁纸怎么设置_想把我的女朋友设置为动态壁纸:看过来,教你啊

    动态壁纸,最近已经越来越受用户的欢迎.炫酷的桌面效果非常动人,让人蠢蠢欲动,但有非常多的网友都不会设置win10动态桌面.所以今天小编就把设置win10动态桌面的方法告诉大家,下面就是设置win10动 ...

  6. 【转】博客美化(3)为博客添加一个漂亮的分享按钮

    阅读目录 1.社会化分享 2.选择一个分享按钮 3.添加到博客园博客 博客园美化相关文章目录:博客园博客美化相关文章目录 在前2篇博客"博客美化(1)基本后台设置与样式设置"与&q ...

  7. 怎么给WordPress网站添加固定的百度分享按钮?

    怎么给WordPress网站添加固定的百度分享按钮?WordPress固定在页面左侧的百度分享按钮,可方便读者分享自己喜欢的文章,本文教你把这个固定的分享按钮添加到其它主题中. 1.第一步,在你所用主 ...

  8. 【Visual Studio 2019】创建 MFC 桌面程序 ( 安装 MFC 开发组件 | 创建 MFC 应用 | MFC 应用窗口编辑 | 为按钮添加点击事件 | 修改按钮文字 | 打开应用 )

    文章目录 一.安装 MFC 开发组件 二.创建 MFC 应用 三.MFC 应用窗口编辑 四.为按钮添加点击事件 五.修改按钮文字 六.打开系统其它应用 七.博客源码 一.安装 MFC 开发组件 打开 ...

  9. Qt中为工程添加资源文件、给按钮添加图片

    Qt中为工程添加资源文件.给按钮添加图片 1.使用QIcon类.代码如下: QIcon icon;icon.addFile(tr("res/icon/wall.png"));ui- ...

最新文章

  1. 从代码设计到应用开发,入坑深度学习看这本书就够了
  2. TensorFlow tf.nn.conv2d是怎样实现卷积的?
  3. Android初学第34天
  4. 操作系统:基于页面置换算法的缓存原理详解(下)
  5. Linux make menuconfig查找并快速跳转指定驱动选项
  6. 游戏数仓分析(三)SpringBoot项目对数据进行可视化展示,每日注册用户
  7. 数据结构和算法(01)--- 算法复杂度
  8. Diaspora-v1.3.0 素锦WordPress博客主
  9. Blazor验证控件
  10. oracle_Grid Infrastructure 启动的五大问题
  11. python 翻译库本地库_利用python爬取并翻译GEO数据库
  12. VS2017编写C++多文件时,出现LNK2005、LNK1169报错的解决方法
  13. 机器学习中的numpy的array_Python中机器学习的Numpy指南
  14. STM32F072RB 实作笔记(七)- LCD 1602 的使用
  15. 如何转换视频格式?推荐这3款视频格式转换工具
  16. 中控考勤机 本地mysql_中控考勤机接口开发
  17. 计算机网络原理视频学习教程
  18. windows安装ffmpeg,yasm,opencv
  19. 区块链跨链技术之BTC Relay
  20. Django 博客开发教程 8 - 博客文章详情页

热门文章

  1. CF755G PolandBall and Many Other Balls(多项式/倍增fft)
  2. #530. 「LibreOJ β Round #5」最小倍数 二分 + 数论
  3. P4137 Rmq Problem / mex 主席树求mex
  4. P4288 [SHOI2014]信号增幅仪 最小圆覆盖
  5. cf1556A. A Variety of Operations
  6. P2664 树上游戏
  7. L - Who is the Champion
  8. 1151 LCA in a Binary Tree 甲级
  9. P3706-[SDOI2017]硬币游戏【高斯消元,字符串hash】
  10. CF835E-The penguin‘s game【交互】