How do I Enable Payment Icons in the Footer?

Edited

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:

  1. Go to the Theme editor (navigate to /admin/themes, click Customize on the theme you want to edit)

  2. Click Footer.

  3. Check the Show payment icons checkbox.

  4. 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

You can do this by customizing your theme. 

1. Navigate to the Content menu in the Shopify admin panel and go to Files.

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. Then, open up your theme editor (navigate to /admin/themes, click Actions on your copy of your theme, and then click Edit code.)

4. You'll be looking for the footer.liquid file in your Sections 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 something like this to your 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.

Was this article helpful?

Sorry about that! Care to tell us more?

Thanks for the feedback!

There was an issue submitting your feedback
Please check your connection and try again.