# Custom Payment Icons

If you are using a **third-party** payment service provider (e.g., Airwallex), the Shopify platform will not automatically display the relevant payment method icons. This is because third-party payment services may not be directly integrated with Shopify's payment icon system, unlike built-in solutions like Shopify Payments, which can automatically load and display payment method icons.

To ensure your store properly displays the payment methods available to your customers (e.g., Visa, MasterCard, PayPal, etc.), you will need to manually modify the code to add these icons.

{% hint style="warning" %}
All code modifications require manual updates, as new version releases may overwrite the manually modified parts.
{% endhint %}

### Open Code Editor

Go to the Online Store page, locate the Ascent theme you want to modify, click the three-dot button on the right, and select "Edit Code."

<figure><img src="/files/qFLAyuz0wA28CXTYRdAX" alt=""><figcaption></figcaption></figure>

### **Modify Footer Code**

In the `footer.liquid` file, search for the keyword `shop.enabled_payment_types` to locate the relevant code block.

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

Replace the identified code block with the following, and update the `payments` list to match the payment methods you want to display:

```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 %}
```

### **Modify Product Page Code**

Open the `main-product.liquid` file, search for the keyword `shop.enabled_payment_types`, and locate the relevant code block.

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

Replace the located code block with the following, and update the `payments` list to match the payment methods you want to display:

```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 %}
```

Similarly, you can adjust the payment method icons displayed on the featured product section by modifying the `featured-product.liquid` file. Locate the relevant code block for payment icons and replace it with your customized payment list.


---

# 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://en-ascent.webvista.studio/footer/custom-payment-icons.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.