How to modify the code for your payment icons in Shopify

There is the fact that Shopify themes, which are free of charge, all do include the option to display payment icons in the footer. Those icons displayed are determined by the payment settings of your store, and able to be enabled in the theme editor. In case you want to add or delete payment icons while not changing your payment settings, then you are allowed to do so by modifying your theme code.

However, please keep reading our instructional writing on How to modify the code for your payment icons to know more deeply about this topic.

How to modify the code for your payment icons

Specificly, we are going to configure how payment icons are assigned to the footer. The fact is that your theme does show the icons, which are associated with the payment gateway that you have enabled in payment settings section by default nut you could be able to manually add or delete the payment icons which you would like to show with this customization.

Modify the code for your payment icons on Desktop

  • Step 1: Go to Online Store > Themes from your Shopify Admin panel.

  • Step 2: Choose the theme you want to edit and click Actions > Edit code.

  • Step 3: Tap footer.liquid which is in the Sections directory. In case your theme does not include this file, please tap theme.liquid in the layout directory.

  • Step 4: Find the code given below in the file:

{% for type in shop.enabled_payment_types %}

And replace it with:

{% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
  • Step 5: There is a list containing payment providers separated by commas: visa,master,american_express,paypal in the code that you have just pasted. The payment providers that you include in the list will determine which payment icons will be shown on your website. You are allowed to modify the payment provider list to meet your expectation.

There are several values listed below that you are able to employ:

  • american_express
  • apple_pay
  • bitcoin
  • dankort
  • diners_club
  • discover
  • dogecoin
  • dwolla
  • forbrugsforeningen
  • google_pay
  • jcb
  • klarna
  • klarna-pay-later
  • litecoin
  • maestro
  • master
  • paypal
  • shopify_pay
  • sofort
  • visa

  • Step 6: Tap Save.

Modify the code for your payment icons on iPhone/Android (Click here)

  • Step 1: From the Shopify app, choose Store.

  • Step 2: Click Online Store in the Sales channels section.

  • Step 3: Choose Manage themes.

  • Step 4: Choose the theme you want to edit and click Actions > Edit code.

  • Step 5: Tap footer.liquid which is in the Sections directory. In case your theme does not include this file, please tap theme.liquid in the layout directory.

  • Step 6: Find the code given below in the file:

{% for type in shop.enabled_payment_types %}

And replace it with:

{% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}

  • Step 7: There is a list containing payment providers separated by commas: visa,master,american_express,paypal in the code that you have just pasted. The payment providers that you include in the list will determine which payment icons will be shown on your website. You are allowed to modify the payment provider list to meet your expectation.

There are several values listed below that you are able to employ:

american_express
apple_pay
bitcoin
dankort
diners_club
discover
dogecoin
dwolla
forbrugsforeningen
google_pay
jcb
klarna
klarna-pay-later
litecoin
maestro
master
paypal
shopify_pay
sofort
visa

  • Step 8: Tap Save.

Conclusion

Thanks for reading the instruction. We hope it could be much easier for you now by following all those steps above!