在 Shopify 购物车与结账页面添加支付图标

· Updated
1 分钟阅读
在 Shopify 购物车与结账页面添加支付图标
目录

TL;DR

The best way to add payment icons in Shopify is to use built-in theme settings first, then fall back to a Custom Liquid snippet using shop.enabled_payment_types for cart, cart drawer, or product pages. Direct checkout edits are now limited, so most merchants should use Shopify-approved tools like Checkout Blocks for checkout icon placement. Keep icons accurate, place them near the conversion point, and always test on mobile before publishing.

如果你的 Shopify 店铺提供多种支付方式,让顾客自由选择他们偏好的付款方法,你就更有可能促成成交。

那么,如何在结账页和购物车页面添加支付图标,例如 American Express、MasterCard 和 Visa 呢?

一起来看看。

payment option

添加支付图标的好处

在 Shopify 店铺中集成支付图标有很多优势,能对你的业务产生积极影响:

  • 提升信任感与可信度:展示 American Express、MasterCard、Visa、Apple Pay 和 Google Pay 等知名支付图标,能让顾客更安心,认为你的店铺安全且值得信赖,从而更愿意下单。
  • 优化用户体验:清晰可见的支付选项能让顾客快速确认是否支持他们偏好的付款方式,简化结账流程并降低弃购率。
  • 提高转化率:提供多种支付方式并醒目展示,可以覆盖更广泛的人群,包括偏好不同支付方式的国际顾客。研究表明,展示可信的支付方式能增强顾客信心并带来更高的转化率;2025 年电商平均转化率通常在 2% 到 4% 之间。
  • 更专业的视觉呈现:在结账页和购物车页面加入支付图标,能让店铺看起来更精致、更专业,符合顾客对现代电商网站的期待。
  • 竞争优势:提供多种支付方式能让你在竞争对手中脱颖而出(他们可能无法提供同等便利),帮助你吸引并留住更多顾客。Shopify 目前支持 700+ 种支付方式,包括 Klarna、Buy Now Pay Later 服务以及数字钱包等新选项,因此展示你的支付灵活性比以往任何时候都更重要。

通过添加这些支付图标,你可以提升 Shopify 店铺的功能性与吸引力,打造更安全、更友好、也更能带来利润的购物体验。

在购物车与结账页面添加支付选项

如果你想在购物车和结账页面展示更多支付选项,就需要调整代码。前往主题中你希望显示图标的位置,并粘贴以下代码:

<ul class="payment-icons list--inline site-footer__icon-list">

                {% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}

                  {% for type in enabled_payment_types %}

                  <li class="payment-icon">

                    {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}

                  </li>

                {% endfor %}

              </ul>

操作步骤如下:

  • 在后台进入 Online Stores(在线商店)并点击 Themes
  • 选择要编辑的 Theme,然后进入 Actions
  • 点击 Edit Code
  • 进入 Sections,选择 footer.liquid
  • 找到以下代码:
{% for type in shop.enabled_payment_types %}
  • 将其替换为以下代码:
{% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}

{% for type in enabled_payment_types %}
  • 在这段代码中,你可以用逗号分隔支付服务商,例如 visa,master,american_express,paypal,apple_pay,google_pay,klarna。你可以加入 Shopify 目前支持的 700+ 种支付方式中的任意一种,包括常见的数字钱包和 Buy Now Pay Later 选项。
  • 最后点击 Save(保存)

想了解 Shopify 支持哪些支付服务商,可在支付设置中查看,或访问 Shopify 官方的支付图标文档。

如何从支付选项中移除 PayPal

如果你不想显示 PayPal 选项(因为 PayPal 在某些国家/地区无法使用,因此部分商家不会提供该支付方式),你可以在 theme.liquid 中移除对应代码。它大致如下:

{% if additional_checkout_buttons %}

  <div class="additional-checkout-buttons">

    {{ content_for_additional_checkout_buttons }}

  </div>

{% endif %}

从代码中删除这一段后,支付方式中的 PayPal 图标就会被移除。

 

使用 Ping 展示独特的产品与店铺卖点(包括支付方式)

Trust Badges Ping Shopify

如果你想把访客转化为顾客,很多时候你的产品需要一点“助攻”。由于你无法随时配备销售人员,就很难突出顾客为什么要购买的理由。

借助 Ping,你可以创建精美的产品与店铺卖点提示(callouts),帮助提升转化。你可以全站部署,也可以只针对特定产品展示——在最关键的位置灵活组合。

现在就从 Shopify app store 免费试用 Ping。

结论

在 Shopify 店铺中提供多种支付方式,会显著提高成交的可能性,因为顾客很看重能自由选择自己偏好的付款方式。在结账页和购物车页面添加 American Express、MasterCard、Visa、Apple Pay、Google Pay,以及 Klarna、Buy Now Pay Later 等新选项的支付图标,可以提升购物体验并增强店铺可信度。

只需几个简单步骤,你就能轻松把这些支付图标集成到店铺主题代码中。Shopify 目前在全球支持 700+ 种支付方式,让你比以往更容易服务国际顾客。如有需要,你也可以通过相应调整主题代码来移除某些支付选项(例如 PayPal)。此外,也可以考虑使用 Ping 这类工具创建更有说服力的产品与店铺卖点提示,进一步推动转化。

通过落实这些策略,你可以打造顺畅、友好的购物体验,鼓励顾客完成购买,并在当今竞争激烈的电商环境中提升转化率。

分享这篇文章

相关文章