Help Center

How do I enable payment icons in the footer?

Updated

All our themes include the option to display payment icons in the footer. You can enable payment icons in your theme editor by following the following steps:

Show payment icons.png

Impulse / Motion / Streamline

  1. In the theme editor, navigate to the Footer section.
  2. Activate the Show payment icons setting.
  3. Click Save.

Expanse / Fetch / Gem

  1. In the theme editor, locate the Footer section and open the Payments and localization block.
  2. Activate the Show payment icons setting.
  3. Click Save.

Payment icons are not showing

Payment icons were implemented through an SDK created by Shopify. Shopify has now decided to deprecate this SDK, you can read more on this here: https://shopify.dev/apps/payments/hosted-payment-sdk. 

This means that any merchant that is not using Shopify Payments will no longer have any payment icons available to display natively in their footer. That said, you can manually add the payment icons in the footer.

How to add custom footer icons?

Please note that some of the changes recommended in this guide involve making direct changes to the theme code. If you encounter difficulties with this, please contact a third-party developer for more troubleshooting, customization, or functionality.

1. Navigate to the Content > Files in your Shopify admin.

2. Click on the Upload files button and upload your custom icon. We recommend using a PNG image. Copy the file URL after the image has been uploaded.

3.  Open up the theme code editor by navigating to Online store > Themes , and then click on ... and select Edit code.

4. Depending in your theme, you'll be looking for the footer.liquid file in your sections folder or footer-payments.liquid in your snippets folder. In this file, you'll want to find this line of code:

{% for type in shop.enabled_payment_types %}

For example, if you are looking to add an AfterPay payment icon you will need to paste the line of code Just above that line:

<li class="icon--payment"><img class="icon afterpayicon" src="your_file_url"/></li>

5. Add the file URL that you copied in Step 2 to the code above, click Save and the icon should appear in your footer.

6. Depending on the size of the icon, you might need to add some CSS to adjust the height. You can add the following code under Theme settings > Custom CSS:

.afterpayicon { height: 25px !important;}

You can follow the same steps to add other custom icons replacing afterpay in the code above with the name of the payment provider that you would like to add.

 

Related articles