Payment icons in gray

[Muriel]

Hi,

I am wondering how to get payment icons in gray (or B&W). Using the minimal theme, there is this code in the footer section:

<li class="payment-icon">
 {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
 </li>

So I am wondering if there is a class for grey. 

Best

[KarlOffenberger]

Hi Muriel,

Unfortunately no, there isn't a grayscale equivalent. The payment icons come as part of a Liquid filter and in order to have some of their paths or fills properly colored, that class is required. Also, because the color information is on the SVG paths we only have a few options to make those grayscale using CSS filters. Those won't work in IE10 and 11 or below so yeah, it's a compromise unless you are willing to edit those fonts and make them true grayscale.

For the CSS filter you'd need to go to Themes > Actions > Edit code and open Assets / theme.scss.liquid and find the class .payment-icons and add the lines as described below

.payment-icons {

  /* other stuff ... */

  .icon {
    width: 38px;
    height: 24px;
    filter: grayscale(100%);         /* adding this */
    -webkit-filter: grayscale(100%); /* Safari unless you're using autoprefixer or similar */
  }
}

Hope this helps!

[Muriel]

Dear Karl, 

many thanks for the fast and great reply.
I hnow how to edit svg files but I am wondering where they are located in the theme.

Best,

M

[KarlOffenberger]

The default payment icons provided by Shopify are not part of the theme. They are called via a Liquid filter that essentially fetches them from the Shopify CDN.

You could use their SVG paths as is from the HTML or download them from the CDN, edit them then upload them to your assets folder and use them as any regular asset in your theme.

[HarryF]

How do you do this but for black and white logos like so: 

https://gyazo.com/2d751f222dee3b88202827c9e5cff100

[searaig]

You could try adding this to a custom stylesheet in liquid template,

/* footer - payment icons */
.payment-icon svg { filter: grayscale(1); }

[birdandhill]

I would also like to know the answer to this.

Mine looks like this, and I would love it to be grey or black and white not coloured

[MS-WEB-DESIGNER]

Hi,

• From your Shopify admin, go to Online Store > themes.
• Locate your current theme and then click Actions > Edit code
• After that in the Assets folder, click to open your theme.scss.liquid file.
• Go to the very bottom of this file and paste the following code:

/* Start */
footer .payment-icons .icon {  filter: grayscale(1); }
/* End*/

• Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.

• Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

[kfhnyc]

for some reason neither of the code solutions provided here are working for me. i added to the bottom of my theme.scss.liquid assets folders but the icons are still in color. any thoughts?

[jorge_perff]

Hi,

I don't have theme.scss.liquid file ! Do you know where I can paste this code?

My store is www.perff.com

Thanks

[Scott-Austin]

@jorge_perff - your theme's CSS file is styles.css.  You'll find it in the assets folder.

[Muriel]

Ok I will do that. THANKS !

[nkfstr]

use css

filter: grayscale(1);