To display custom payment icons on your store, you'll need to make some changes to a few theme files: footer.liquid, main-cart.liquid, and side-cart.liquid. In each of these files, you should look for the following line of code:
โ
{%- if section.settings.show_payment_methods -%}
{%- for payment_method in shop.enabled_payment_types -%}
<li>{{ payment_method | payment_type_svg_tag }}</li>
{%- endfor -%}
{%- endif -%}
Then replace it with this code:
{%- if section.settings.show_payment_methods -%}
{% assign enabled_payment_types = 'visa,master,american_express,discover,paypal' | remove: ' ' | split: ',' %} {% for type in enabled_payment_types %}
<li>{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}</li>
{%- endfor -%}
{%- endif -%}
In the second code block, you'll notice a list of payment providers separated by commas: visa, master, american_express, paypal, google_pay, klarna, apple_pay, and maestro. The payment providers that you include in this list will determine which payment icons are displayed on your online store. You can edit this list of payment providers to suit your needs.
Here are the values that you can use for this list:
afterpay, american_express, apple_pay, bitcoin, dankort, diners_club, discover, dogecoin, dwolla, facebook_pay, forbrugsforeningen, google_pay, ideal, jcb, klarna, klarna-pay-later, litecoin, maestro, master, paypal, shopify_pay, sofort, visa
For more information and guidance, you can refer to the Shopify documentation at the following link: https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-credit-card-icons