Payment icons in gray

Muriel
New Member
25 0 0

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

0 Likes
KarlOffenberger
Shopify Partner
1867 182 791

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Muriel
New Member
25 0 0

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

0 Likes
KarlOffenberger
Shopify Partner
1867 182 791

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.

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Muriel
New Member
25 0 0

Ok I will do that. THANKS !

0 Likes
HarryF
New Member
3 0 1

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

https://gyazo.com/2d751f222dee3b88202827c9e5cff100

searaig
New Member
1 0 1

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

 

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

 

birdandhill
Tourist
4 0 0

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

 

Screen Shot 2021-01-17 at 2.04.31 pm.png

0 Likes

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.

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
kfhnyc
New Member
1 0 0

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?

0 Likes