How to remove Shopify Payment Icons from Store Footer

Hanh Dao
Hanh Dao November 16, 2019

Share:

This writing about how to remove Shopify payment icons from store footer, which will match your preference and make you satisfy if you find the icons inappropriate and want to remove it from the footer of your store page.

Many people including store owners and their customers feel uncomfortable with payment icons. This may be because they consume a lot of web page space or the display of them is excessive or because they negatively impact the customer experience. Therefore, let follow this simple instruction to remove Shopify payment icons.

How to remove Shopify Payment Icons from Store Footer

1. What are Shopify payment icons?

What are Shopify payment icons

If you are using a free Shopify theme, you will have the option to display the payment icons in your footer. In other words, payment icons will be able to appear like that on all Shopify’s free themes if you enable that option in the theme editor. These icons are displayed quite simple and compact. They have a small rectangular frame with a separate payment provider logo. They show the payment methods your store has integrated. This will give customers information about the online payment methods they can use to buy your product.

When you want to edit or remove these payment icons, you can go to sections 3 and 4 of this article to follow some easy steps to have it done. This will be extremely convenient and helpful for you as it can ensure you don’t have to change your payment settings.

2. Why does Shopify add these icons to their themes?

Why does Shopify add these icons to their themes?

Thanks to Shopify’s optimization, the shop owner can take advantage of many things. Among them are beautiful free themes with payment icons. Are you wondering why Shopify added these icons to your theme? I will talk briefly about why Shopify is doing so. This can also help you in deciding whether you want to remove them from the footer as well.

Payment icons play an important role in UI designs. In simple terms, it makes the interface simple, easy-to-see, and informative that only takes up a small space on your website. Your customers will need to learn about the payment methods accepted by your store. Therefore, when you present them on a section of the website, the clients are aware of all payments and compare them to the methods they can choose. This will help a lot because it not only provides information to customers but also shows the professionalism of the site. This is the reason that these payment icons are so popular in many e-commerce websites and Shopify is no exception.

I’ve prepared two different ways for you to edit Shopify payment icons from the footer. Each is worth a try and can help you edit the icons successfully. Therefore, let take a view and choose one way which is most suitable for you to carry out.

Option 1: Edit the code for the payment icons

Step 1: Go to Themes

In the first step, you will need to log in to your Shopify account and click on the Online Store button in the menu on the left of the admin page. Afterward, make sure to select the Themes button to go to the Themes page.

How to edit Shopify payment icons from the footer

Step 2: Select Edit code

You must have known which theme has the payment icons you expect to be edited. Find that theme and click on the Actions button next to the theme’s name. A drop-down will appear. Then, choose the Edit code to start to edit the code for these icons.

How to edit Shopify payment icons from the footer

Step 3: Choose the footer.liquid file

There will be lots of files displaying on the left. You can enter the Sections word on the Search files text box. Or else, scroll down to look for that file and tap on it. In the Sections field, select the footer.liquid. In case this file doesn’t exist in your theme, you can click on the theme.liquid in the Layout field.

How to edit Shopify payment icons from the footer

Step 4: Replace the code

In this step, what you need to do is find the following code in the file you’ve opened. There is a small tip for you to look for it faster. You can press on Ctrl + F to open the search text box. Then, copy the text in this code and paste it on the text box.


 
{% for type in shop.enabled_payment_types %}
 

How to edit Shopify payment icons from the footer

After you’ve found the code, let replace it with the code below:


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

How to edit Shopify payment icons from the footer

Step 5: Edit the payment providers code

Take a view of the code you’ve pasted. You will see a list of payment providers that are separated by commas. It just an example and you need to make some changes. These payment providers will be presented on the footer of your store to let customers know about which payments are accepted by your online shop. Hence, edit them into the payment providers your store is using to make it right.

How to edit Shopify payment icons from the footer

You can use the values listed below:

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

Step 6: Tap on Save

Finally, tap on the Save button to complete. You now have appropriate payment icons for your online store and make your clients satisfied.

How to edit Shopify payment icons from the footer

Option 2: Add custom payment icons

Step 1: Go to Edit code

You now are on the admin page. Let click on the Online Store button and go to the Themes section. You must have known which theme has the payment icons you expect to be edited. Find that theme and click on the Actions button next to the theme’s name. A drop-down will appear. Then, choose the Edit code to start to edit the code for these icons.

How to edit Shopify payment icons from the footer

There will be lots of files displaying on the left. You can enter the Assets word on the Search files text box. Or else, scroll down to look for that directory and tap on it. In the Assets field, select the Add new asset link to upload a new custom icon.

How to edit Shopify payment icons from the footer

Step 3: Upload the file

A dialog will come out to let you choose the file you want to upload. After you’ve chosen, click Open to upload it from your computer to your online store. I will upload the file called paypal-icon.png as an example for you.

How to edit Shopify payment icons from the footer

Step 4: Open the widget-payment-methods.liquid file

In this step, you will have to open the widget-payment-methods.liquid file in the Snippets directory. Go to the next step to start to edit the payment icons.

Step 5: Change the image name

In the file you’ve opened, you will see a list of image names. They are the images of payment icons that are shown in the footer of your online shop. Hence, to edit them into the payment providers your store accepts, you just need to change the image name into the file name you’ve uploaded in the third step. For example, I will change the name Paypal logo with the file name paypal.jpg.

Step 6: Save

Make sure to tap on Save to save all changes. Refresh the page to view the changed payment icons.

In the previous section, you learned how to edit payment icons correctly. However, if you find these icons are not suitable for your site or you have more interesting things to display in that position, follow these simple steps below to remove the payment icons from the footer.

Step 1: Go to the Themes section

In the admin page, make sure to click on the Online Store button in the menu on the left of the admin page. Afterward, select the Themes button to go to the Themes page.

How to edit Shopify payment icons from the footer

Step 2: Choose Customize theme

You can choose to remove the theme you expect by tapping on the Customize button next to the theme’s name.

How to edit Shopify payment icons from the footer

You will access a page that allows you to customize the theme. There are many sections on the left. Let scroll down and select the Footer section.

How to edit Shopify payment icons from the footer

Step 4: Uncheck the checkbox

Take a look at the Show payment icons checkbox. You only need to uncheck the checkbox to hide them all.

How to edit Shopify payment icons from the footer

Step 5: Save

After you’ve done, click the Save button on the upper right of the page to complete removing Shopify payment icons from the footer.

How to edit Shopify payment icons from the footer

Summary:

In a nutshell, this article shows you how to remove Shopify payment icons from store footer. Besides, you can better understand the payment icons and the reason Shopify adds them to the theme. In particular, in case you want to edit the icons instead of removing them, I’m very pleased to provide you with two effective ways to do this.

I hope that you can perform quickly and successfully with the steps and illustrations that I provide. Are you interested in finding out a simple and effective way to change the current theme to a theme that you favored and find it match perfectly with your store? Click to our post about How To Change Theme In Shopify to check it out.

Themes

Remove Shopify Payment Icons from Store Footer Shopify Payment Icons Add a Logo to Shopify Store on all page Customize Shopify Themes Edit Theme Code Change Language in Themes Register a Google Maps API Key Add Favicon Create Translation for your Theme Choose a Language for your Theme Add Alt Text to Theme Image Edit the Code Templates for Password Page Hide Store Name on Password Page Hide Footer on Password Page Remove Content From Dynamic Section Add Google Maps API Key to Theme Edit Password Page Settings Remove Password Protection From Online Store Show Dynamic Checkout Buttons For Some Products but Not for Others Publish Themes from the Theme Editor Publish a Theme from the Admin Add Password Protection to Online Store Set the Social Sharing Image Remove Dynamic Sections Rearrange Dynamic Sections Hide Dynamic Sections Add Dynamic Sections Add Google Translate Widget to your Online Store Find the Right Theme Edit Static Sections Duplicate Themes Search a Translation for Missing or Completed Fields Test Dynamic Checkout Buttons on your Theme Show Dynamic Checkout Buttons on Featured Product Section Hide Dynamic Checkout Buttons on Featured Product Section View Paid Themes Review and Update Translation Hide Dynamic Checkout Buttons on Product Pages Show Dynamic Checkout Buttons on Product Pages Remove Unpublished Theme Add an Updated Version of your Theme to your Online Store Share Theme Preview With Others Download Themes Try Paid Theme in your Store Buy Theme From Shopify Theme Store Add a Free Theme From the Admin Upload a Theme File From your Computer


Hanh Dao
Hanh Dao
I'm a detail-oriented, honest and hard-working of Shopify Expert, ready to work with you to find solutions to help you start your business or grow it. We offer fast deliveries without compromising quality. Fast and effective!

Comments for Remove Shopify Payment Icons from Store Footer



Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up