Black and white Payment Icon at footer in theme Reformation

Store Design
, ,

Topic summary

A user seeks help converting colored payment icons in their Shopify Reformation theme footer to black and white (grayscale).

Solutions Provided:

Multiple community members offered CSS-based solutions:

  • Primary approach: Add CSS code to theme files (theme.css, base.css, or app.css) using the filter: grayscale(1); property
  • Target selector: Apply the filter to .payment-icons__icon or svg.payment-icons__icon elements
  • Optional enhancement: One solution includes adding a black border with border: 1px solid black;

Implementation steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Locate the appropriate CSS file (theme.css, base.css, or app.css in assets folder)
  3. Paste the grayscale filter code at the end of the file
  4. Save changes

Status: Multiple working solutions provided; awaiting confirmation from original poster on which solution was accepted.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello good people,
I was wondering how to make the payment icons black and white in the website footer menu.
Can anyone help please.

GiasUddin_1-1734328924577.png
GiasUddin_1-1734328924577.png1191×613 25.8 KB

website link- https://zj9yyw-ux.myshopify.com/

2

Hi @GiasUddin ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
svg.payment-icons__icon {
    filter: grayscale(1);
    border: 1px solid black;
}

Result:

steve_michael2_0-1734330195546.png
steve_michael2_0-1734330195546.png1080×624 33.9 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

3

@GiasUddin Hey, thanks for posting here.

please this style CSS code:

svg.payment-icons__icon path {
    filter: grayscale(1);
}
4

Hello @GiasUddin
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->app.css
add this code at the end of the file and save.

.footer .payment-icons {
filter: grayscale(1);
}

result

74.png
74.png488×202 2.98 KB

If this was helpful, hit the like button and accept the solution.
Thanks