# 自定义支付图标

如果您使用的是**第三方**支付服务提供商（例如 Airwallex），Shopify 平台默认情况下不会自动显示相关支付方式的图标。这是因为第三方支付服务可能未与 Shopify 的支付图标系统进行直接集成，因此无法像 Shopify Payments 等内置支付解决方案那样自动加载和显示支付方式图标。

为了确保您的店铺能够正确展示客户可用的支付方式（如 Visa、MasterCard、PayPal 等），需要通过手动修改代码的方式来添加这些图标。

{% hint style="warning" %}
所有代码修改都需要手动更新版本，因为新版本上线时，手动修改的部分可能会被覆盖。
{% endhint %}

### 打开代码编辑器

进入在线商店页面，找到需要修改的 Ascent 主题模板，点击右侧的“三点”按钮，然后选择“编辑代码”。

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-cdf595284b4ee406b6c93c4158189a61cb104cc2%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### 修改页脚代码

在 `footer.liquid` 文件中，搜索关键词 `shop.enabled_payment_types`，定位到相关代码块。

```liquid
{%- for type in shop.enabled_payment_types -%}
  <li class="list-payment-item">
    {{ type | payment_type_svg_tag: class: 'icon' }}
  </li>
{%- endfor -%}
```

将上面的代码块替换为下面的，并根据需要修改 `payments` 列表中的支付方式以匹配您的实际需求：

```liquid
{% assign payments = 'visa, master, paypal, apple_pay, google_pay, american_express, discover, jcb, diners_club, unionpay, maestro, alipay, samsung_pay, stripe, klarna, afterpay, sezzle, bitcoin, ethereum, litecoin, dogecoin, sofort, ideal, giropay, eps, poli, affirm, splitit, paytm, bancontact' | split: ',' %}
{% for payment in payments %}
  <li class="list-payment-item">
    {{ payment | strip | payment_type_svg_tag: class: 'icon' }}
  </li>
{% endfor %}
```

### 修改产品页面代码

打开 `main-product.liquid` 文件，搜索关键词 “`shop.enabled_payment_types`”，找到以下代码块。

```liquid
{%- for type in shop.enabled_payment_types -%}
  <li>
    {{ type | payment_type_svg_tag: class: 'icon' }}
  </li>
{%- endfor -%}
```

将上面的代码块替换为下面的，并根据需要修改 `payments` 列表中的支付方式以匹配您的实际需求：

```liquid
{% assign payments = 'visa, master, paypal, apple_pay, google_pay, american_express, discover, jcb, diners_club, unionpay, maestro, alipay, samsung_pay, stripe, klarna, afterpay, sezzle, bitcoin, ethereum, litecoin, dogecoin, sofort, ideal, giropay, eps, poli, affirm, splitit, paytm, bancontact' | split: ',' %}
{% for payment in payments %}
  <li class="list-payment-item">
    {{ payment | strip | payment_type_svg_tag: class: 'icon' }}
  </li>
{% endfor %}
```

同样的方法，我们可以通过修改 `featured-product.liquid` 文件中的支付方式图标列表来调整显示内容。