How can I display payment method icons in black and white in my footer?

Store Design
,

Topic summary

Goal: show payment method icons in the footer, left-aligned and in black & white.

  • Initial guidance: Edit theme code (Online Store > Edit Code), open theme.liquid, and insert a code snippet above the tag to display the payment icons and align them left. The storefront confirmed this worked for displaying/alignment.

  • Black & white styling: Suggested adding CSS to apply a grayscale filter (CSS filter that desaturates colors) using a selector targeting the footer column (e.g., .footer__localization:empty + .footer__column–info { -webkit-filter: grayscale(100%); }).

  • Placement question: After confusion about where to put the CSS, the guidance changed to remove earlier changes and add a final code snippet again above in theme.liquid.

  • Important context: The exact code snippets are referenced but not visible in the transcript, and screenshots were shared but are not essential to follow the steps.

  • Outcome/status: Icons display and left alignment are confirmed working. Black-and-white styling instructions were provided, but final implementation and confirmation are not recorded; discussion appears open.

Summarized with AI on January 25. AI used: gpt-5.
1

Hello , I want to show my paiment method icons in my footer, yet I would like them to be black and white and on the left corner so aligned with the texts, is it possible to do something like that ?

Thanks in advance

Store URL : https://0e0f82.myshopify.com/

Capture.JPG
Capture.JPG1870Ă—910 105 KB

2

Hey @GadVenin

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Moeed_0-1686303565174.png
Moeed_0-1686303565174.png1896Ă—622 23.3 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Thank you it is working perfectly, do you know by any mean how to make these logos black&white ?

4

Add this code in css under tag

.footer__localization:empty+.footer__column--info {
    -webkit-filter: grayscale(100%);
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

Thanks for your answer, in wich section?

6

Hey @GadVenin
Remove all the previous code you have added and add this final code

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like