Shopify如何在产品页面购买按钮下方添加付款图标

很多中国商家在建站过程中经常面临的一个问题是：无法在网站上展示商店支持的付款图标，本篇教程为你详解展示付款图标的原因，原理与方法。

为什么无法在产品页和网站页尾展示付款图标？

通常情况下，shopify模板都具有展示付款图标的选项功能，但是只有开通Shopify payments的商家才能正常使用这个功能，而国内多数商家都难以开通ShopifyPayments。

在Shopify商店中展示付款图标的3种方式:

1.最简单的方式：使用Liquid代码

复制以下代码，在产品模板页面中点击”添加 Block块”，找到并添加一个 “custom liquid（自定义Liquid）” 区块，把代码复制进去即可

<style>
  .methods-of-payment img { padding: 0.2em; }
  .lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }
  .methods-of-payment { display: flex; justify-content: center; }
  span.methods-of-payment { margin-top: -8px; }
</style>
<span class="methods-of-payment">
  <img src="{{ 'paypal' | payment_type_img_url }}" height="35" alt="paypal" />
  <img src="{{ 'apple_pay' | payment_type_img_url }}" height="35" alt="apple_pay" />
  <img src="{{ 'google_pay' | payment_type_img_url }}" height="35" alt="google_pay" />
  <img src="{{ 'visa' | payment_type_img_url }}" height="35" alt="visa" />
  <img src="{{ 'master' | payment_type_img_url }}" height="35" alt="master" />
</span>

效果预览：

你可以自定义上方代码的中的img标签元素来显示多种付款方式，shopify支持以下付款方式图标：

afterpay – american_express – apple_pay – bitcoin – dankort – diners_club – discover – dogecoin – dwolla – facebook_pay –forbrugsforeningen – google_pay – ideal – jcb – klarna – klarna-pay-later – litecoin – maestro – master – paypal – shopify_pay – sofort – unionpay – visa

如果有兴趣看看我做的付款和物流方式卡片

提升转化率：如果你的商店使用Airwallex空中云汇收款，可以尝试开通Klarna先买后付和分期付款来提升订单转化率，shopify也是支持显示klarna付款图标的

2.修改主题模板代码

此种方式需要您具有前端和Liquid基础技术。

shopify主题模板一般支持在两个地方显示付款图标：产品页面和页尾

我们可以通过添加Liquid代码来实现这个功能，对于不同主题由于其功能结构的不同修改的文件也不同，通常修改 main-product.iquid 和 footer.liquid 即可实现

3.使用shopify app store中的付费插件

在app商店中有许多信任徽章应用，搜索相关关键词例如 “payment icon” 就可以找到，一些插件也提供免费套餐

一种更好的方法：在购物车中显示付款和物流图标

多数付费shopify主题都支持动态弹出式购物车，我们可以在购物车底部添加，这样用户在加购后就能看到它们。如果需要开发此功能，需要修改 cart-drawer.liquid 文件