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.

All code modifications require manual updates, as new version releases may overwrite the manually modified parts.

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."

Modify Footer Code

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

{%- 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:

{% 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.

{%- 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:

{% 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.