[2024] How to Add, Remove & Edit Shopify Payment Icons
You want to choose which Shopify payment icons are shown on your store.
Maybe in the footer…
Maybe under the add to cart button or perhaps under the checkout button.
Shopify payment icons tell shoppers how they can pay for what they want to buy.
Helping to build confidence and trust that you will deliver and improving your conversion rates.
But they are easily forgotten – and sometimes you need to change the icons you want to display.
This post takes you through how you add, remove or edit the Shopify payment icons on your store.
What are Shopify payment icons?
It’s basic for shoppers to want to know how they can pay for things.
The methods used to pay will vary with location and the expectations of target customers but in North America, almost everyone is familiar with Visa, Mastercard, Amex, PayPal, Amazon Pay and Apple Pay at least.
Enabling these payment facilities is the first step. Doing that is a story for another post. But once you’ve enabled them, you need to let shoppers know that they are up and running and ready to use.
Shoppers will expect to see these icons somewhere on your store, usually in the footer of every page as well as on checkout pages.
Here’s how Gymshark does it, for instance:
Velasca in Italy prefer to do it like this:
This functionality can be enabled in all free Shopify themes. You can enable icons to be displayed in your store’s footer through the payment settings or by editing code in the theme editor.
Payment options icons can be added, removed or changed without changing your payment settings simply by making a few basic edits to the theme code.
How to add or remove payment icons to your store’s footer
Step 1: Access Themes
After logging in to your Shopify store, navigate to your Online Store – Themes page:
Step 2: Go to the theme editor
You access the theme editor by clicking Customize:
Step 3: Click footer
From the theme editor page’s left-hand menu, click Footer:
Step 4: Check the Show payment icons checkbox
From the menu on the right-hand side of the page, check Show payment icons:
If you want to REMOVE the payment icons from the footer on your store, simply uncheck the Show payment icons box.
Step 5: Click Save
Don’t forget to Save the changes you make. Your theme will then add or remove the icons from the footer according to your actions (note: in our demo store shown in the screenshots, no icons appear as we do not accept payments for anything from our store!)
How to edit the Shopify payment icons in the theme code
If you want to modify the Shopify payment icons in your footer, you will need to access the theme code of your store.
By default, your theme will display the icons according to the payment gateways you have enabled in the payment settings section. You’ve seen how you can add or remove all of these icons in a few clicks – but what if you want more control over what is displayed in the footer?
That’s easy too if you follow these steps:
Step 1: Go to Themes and select Edit Code
Once you navigate from Online store Themes, select Edit Code from the Actions dropdown menu:
Step 2: Find the footer.liquid file
A list of section files will appear on the left-hand side, which you can scroll through. Navigate to the footer.liquid file:
Step 3: Start editing the code
Search for the following code in the file that displays in the main viewing panel:
{% for type in shop.enabled_payment_types %}
Replace it with the following code:
{% assign enabled_payment_types = ‘visa,master,american_express,paypal’ | remove: ‘ ‘ | split: ‘,’ %}
{% for type in enabled_payment_types %}
Step 4: Edit the list of payment providers
In the code you just pasted, you can check the list of payment providers shown. These are separated by commas within the code like this: visa,master,american_express,paypal.
You can add to this list of payment providers. According to Shopify, any of the following payment icons can currently be added:
Step 5: Save your changes
As ever, don’t forget to save the changes you make before exiting or you will have to go back and do it all again.
How to remove Shopify payment icons from the theme code
To remove icons from the footer via your store’s theme code, repeat steps one and two above.
Then search for the payment icon code using ctrl + f and paste the following line into the code:
{% unless template ==‘index’ %}
Close the code with the following line:
{% endunless %}
That will remove the Shopify payment icons from the footer.
Show shoppers you accept their money with Shopify payment icons!
As you have seen, it’s easy to instantly let customers around the world know how they can pay for goods and services in your Shopify store.
Add, remove or edit your Shopify payment icons in your footer so that visitors know you are credible and open for business.