Shopify产品页面添加PayPal以及Buy Now动态付款按钮的设置

图片[1]-Shopify产品页面添加PayPal以及Buy Now动态付款按钮的设置 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

最近 (2018年04月17日) Shopify默默的对所有 themes.shopify.com 上的主题完成了一次个人觉得比较重要的更新,就是“Dynamic Checkout Button” – 动态快速结款购物按钮功能, 也就是在产品页面的Add to cart按钮下面添加了一个Buy Now按钮,可以跳过购物车流程直接到付款页面。

图片[2]-Shopify产品页面添加PayPal以及Buy Now动态付款按钮的设置 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

最近 Shopify 在国内不太稳定,如果打不开 Shopify 官网, 或者打开速度很慢,无法注册或者登录 Shopify 账户,请使用“魔法”重试,你懂的。

就是下面这个样子了:

Shopify产品页面添加PayPal以及Buy Now按钮

通常Shopify的产品页面只有一个Add to Cart按钮,当客户想要购买产品的时候,需要点击Add to Cart按钮进入到购物车页面,然后再点击Checkout页面进入到付款流程,而启用了Dynamic Checkout Button功能之后,在Add to Cart按钮下方会添加一个BUY NOW按钮。、

当客户点击Buy Now按钮之后,页面会直接打开Checkout的付款流程页面,而不是购物车页面。这就直接缩短了客户从浏览产品到下单购买的过程,可以防止因为购物车页面加载过慢,或者客户突然想起可以先去亚马逊上比比价等等因素导致的订单的流失,也就意味着更好的用户体验和更高的订单转化率。

Shopify结款流程

那么问题来了,为什么叫动态结款按钮?哪些主题可以使用这一功能?如何启用这一功能?这一功能对我们做FB的广告有哪些影响?使用这一功能的话,还会出现哪些其他问题?下面来一一回答这几个问题:

为什么叫Shopify动态结款按钮?

简单的来说,就是这个新的按钮通常显示是BUY NOW字样的,但是如果Shopify通过技术手段检测到用户的设备环境里面支持Paypal / Apple Pay / Amazon Pay的功能的话,就会直接使用上面提到的任意一个支付功能替换掉BUY NOW按钮。也就是说,开启了动态结款按钮功能的话,在Add to Cart按钮下方就会出现一个新的按钮,按钮上显示什么支付方式,使用哪种支付流程,完全依赖于Shopify对用户的设备的监测。因为目前我这边只使用了Paypal收款,因此下面只以Paypal为例来说明。

我使用同一台电脑,使用不同的浏览器打开我网站的同一个产品,常用的浏览器(经常使用Paypal付款,支持Paypal快速付款功能)打开的产品页面上动态付款按钮显示的内容如下图:

Shopify产品页面添加PayPal按钮的设置方法

使用另外一个不常用的浏览器登陆,打开同一产品页面,Add to Cart 按钮下方显示的动态结款按钮如下图

Shopify产品页面添加Buy Now按钮的设置方法

具体来说,这两个动态结款按钮有三点不同

  • 显示的按钮内容不同,一个是Buy with Paypal, 一个是Buy now
  • 支付流程不同,点击Buy with Paypal按钮之后,页面会直接跳转到Paypal网站的付款页面,而点击Buy Now按钮之后,会直接跳转到Shopify的Checkout Page
  • Buy now按钮下方不会有More payment options选项,其他支付方式会出现。点击More Payment Options链接之后在当前页面就会直接弹出一个窗口显示产品信息,折扣码选项,以及其他你支持的支付方式
Shopify产品页面添加PayPal以及Buy Now按钮的设置方法

如果你开通了 Amazon Pay,Apple Pay 或者 Google Pay 支付通道的话,这些按钮会都显示出来。

Shopify 产品页面开启或者关闭 Buy Now 按钮的方法

要启用动态付款按钮这一功能,有两种办法,一种是直接从Shopify官方网站的主题市场 themes.shopify.com 安装最新的Shopify主题,基本上在4月15号 (2018年) 之后从Shopify官方主题市场上安装的免费或者付费的主题都是支持这一功能的。

进入到主题的Customize页面,然后在Product Pages页面,选择Product Pages Section,点开Setting,勾选上Show dynamic checkout button,然后点击右上角的保存按钮就会在产品页面出现“Buy it now”或者“PayPal”按钮了。如下图:

Shopify产品页面添加PayPal以及Buy Now按钮的设置方法

如果你不想启用动态付款按钮,则如上图所示,直接在你的Shopify店铺主题设置中取消勾选“Show dynamic checkout button”选项即可。

另外一种方法就是要修改主题的代码了。(2019年2月2日更新:不推荐,现在大部分主题都是支持这一功能的,直接购买安装或者更新到最新的主题版本就可以。

Shopify主题不会自动更新,因此,你要将你的主题更新到最新版本,就相当于重新安装主题,重新设置一遍。尤其是当你修改了主题的代码的时候,比方说之前有篇文章关于《Shopify主题Brooklyn的优化》就对主题代码进行了大量的修改,重新安装主题,也是一个不大不小的工程。(目前我只在Shopify免费主题上修改代码,修改成功了。从第三方网站购买的Shopify主题不清楚能否通过同样的修改代码的方法添加动态结款按钮,可自行添加测试。)

通过修改代码的方式给主题添加动态结款按钮,Shopify官方教程看这里:https://help.shopify.com/themes/customization/store/dynamic-checkout-buttons

按照教程一步步操作就可以了,一定要细心啊,我是因为粗心丢三落四的,改了好多次才改成功,这里要重点说明下:

在任何时候修改主题的代码之前,请务必首先使用Shopify的Duplicate功能备份你的Shopify主题,以防止因为代码错误导致网站前台无法正常显示。

shopify主题备份

如果因为没有备份主题,代码错误保存导致网站前台出现问题的,也不要太急,Shopify在你修改代码进行保存的过程中可以自动备份你的文件,可以使用Shopify的自动备份功能(Older Version)恢复到修改代码之前的状态

图片[10]-Shopify产品页面添加PayPal以及Buy Now动态付款按钮的设置 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C
shopify主题修改

除了Shopify官方主题外,在Themeforest上绝大多数最新版的主题都是支持动态付款按钮功能的。感兴趣的可以了解下Themeforest上的Shopify主题:https://themeforest.net/shopify

要不要启用Dynamic Checkout Button?

要不要启用要看自己的需求,这一功能和一些App,如货币转化类的App,会出现冲突,这种情况下就需要自己去做一个取舍;另外一方面,要不要启用,建议通过A/B测试方法实际测试下,也就是启用前和启用后的订单情况的数据对比,来判断要不要启用这个功能。当然这个数据是要有参考价值,判断价值的。

目前Shopify官方指出的不适合使用Dynamic Checkout Button的情况包括如下:

如果你安装以下类别的App,会和Dynamic checkout button功能产生冲突:

  • Currency converters 货币转换类的App
  • Apps that interact with the cart 购物车页面功能增强类的App
  • Apps that take customers to an external checkout 其他第三方支付类的app

如果你的购物车页面有功能增强,则不适合开启Dynamic checkout button:

  • Terms and conditions checkboxes 有各种附加条件可选的购物服务
  • Gift-wrapping options 订单礼品包装选项
  • Delivery date pickers 送达日期选项

除此之外,Dynamic Checkout Button按钮在功能上还会有一定的限制。例如,你的产品是变体产品,有多个变体,如红色的T恤,白色的T恤,那么通过Buy Now按钮购物的话,一次购买可以购买任意数量的红色T恤或者白色T恤,但是无法一次购买一件红色T恤和一件白色T恤。

另外,如果你之前有将Add to Cart按钮修改成Buy Now按钮的话,在启用Dynamic Checkout Button功能之后建议将Add to Cart按钮的字样修改回来,以防止产品页面上出现两个buy now按钮。

启用Dynamic Checkout Button之后发现的一些问题以及思考:

我个人使用的Shopify主题是Brooklyn,选择这个主题的重要原因就是Slide-out cart功能,可以在不跳出产品页面的情况下,客户点击Add to cart按钮,从页面右侧滑出购物车,点击购物车的checkout按钮之后就直达Checkout页面。不过在启用了Dynamic Checkout Button按钮之后,Slide-out cart这一功能就无法使用了,客户点击Add to cart按钮之后,页面会刷新进入到cart页面,而不是从当前页面的右侧滑出购物车。

目前我个人是选择了Dynamic Checkout Button而放弃了Slide-out cart按钮功能。各有利弊吧。

另外刚刚启用了Dynamic Checkout Button这个功能的时候,关于要不要做Add to Cart为转化目标的Facebook广告,困惑了很久,现在看来这个问题其实也不是个问题。

Facebook广告的广告主Help Page页面,以及国外很多的Facebook广告教程是说在做Facebook广告的时候,在前期没有足够的转化数据的情况下,先使用Link Click,Add to Cart类型的转化目标的广告积累数据,然后再做PUR的广告。如果我的产品页面上面有了一键付款按钮的话,为什么还要去投Add to Cart类型的广告呢?尤其对于杂货店General Store来说,需要进行大量的选品,这种类型的赚钱模式,选品的目的就是要选很多款“好卖”的各种类型的产品,既然是选出来的,就有很大的把握卖出去的,上FB广告的话直接上PUR类型的广告就好了,顶多再加上PPE积累互动数据,因为对大部分人来说,做FB广告的最终目标就是要把货卖出去赚钱,选品选的好就多赚些,选的不好赔一些广告费。因此对于这种业务模式来说,个人觉得没有必要去搞ATC转化类型的广告。

以上仅个人做法,欢迎各路大神理性拍砖,参与讨论。

图片[12]-Shopify产品页面添加PayPal以及Buy Now动态付款按钮的设置 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C
© 版权声明
THE END
喜欢就支持一下吧
点赞33 分享
评论 共5条

请登录后发表评论

    • 头像paul0
      • Conway的头像-歪猫跨境 | WaimaoB2CPro 永久会员Conway徽章-元老玩家-歪猫跨境 | WaimaoB2C等级-LV8-歪猫跨境 | WaimaoB2C作者0