Payment icons in gray

Highlighted
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
Highlighted
Shopify Partner
1840 177 718

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
2 Likes
Highlighted
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
Highlighted
Shopify Partner
1840 177 718

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
1 Like
Highlighted
New Member
25 0 0

Ok I will do that. THANKS !

0 Likes
Highlighted
New Member
3 0 0

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

https://gyazo.com/2d751f222dee3b88202827c9e5cff100

0 Likes
Highlighted
New Member
1 0 0

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

 

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

 

0 Likes