# 自定义支付图标

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

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

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

### 打开代码编辑器

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

<figure><img src="/files/QnnulabP956FqY4xQ726" 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` 文件中的支付方式图标列表来调整显示内容。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ascent.webvista.studio/webvista-studio-docs/ye-jiao/zi-ding-yi-zhi-fu-tu-biao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.