Custom Payment Icons
Jalal avatar
Written by Jalal
Updated over a week ago

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 -%}<ul class="l4pm box">    {%- for payment_method in shop.enabled_payment_types -%}    <li>###{{ payment_method | payment_type_svg_tag }}</li>    {%- endfor -%}</ul>{%- endif -%}

Then replace it with this code:

{%- if section.settings.show_payment_methods -%}<ul class="l4pm box">    {% assign enabled_payment_types = 'visa,master,american_express,paypal,google_pay,klarna,apple_pay,maestro' | remove: ' ' | split: ',' %} {% for type in enabled_payment_types %}    <li class="list-payment__item">        ###{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}    </li>    {%- endfor -%}</ul>{%- 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:

Did this answer your question?