How to change credit card logos under payment method on checkout

Last updated

First, here are the images of credit card logos:  

Discover: https://sassme.ecwid.com/static/v1/icons/discover.svg

Mastercard: https://sassme.ecwid.com/static/v1/icons/mastercard.svg

Amex: https://sassme.ecwid.com/static/v1/icons/amex.svg

Visa: https://sassme.ecwid.com/static/v1/icons/visa.svg

Next step is to add it to Ecwid. Upload the image to your site. Then add the following custom CSS rules

div.ecwid-PaymentMethodsBlock-PaymentOption div.ecwid-PaymentMethodsBlock-PaymentOption-htmlBlock img {
display:none;
}

div.ecwid-PaymentMethodsBlock-PaymentOption div.ecwid-PaymentMethodsBlock-PaymentOption-htmlBlock { 
background-image: url(https://example.com/your_image.jpg);
background-repeat: no-repeat;
margin: 0px 18px; 
height: 250px;
width: 230px;
}

where https://example.com/your_image.jpg should be replaced with actual URL to your image.

Back to top
Was this article helpful? 0 out of 1 found this helpful