How can I change the background color of PNG files on my website?

Store Design
1

Hello,

This is my website: https://truffletopia.com

I am having issues knowing if there is a single place where I can change the background color of PNG files, both for my collections and image previews on the product page. The Main image looks like it has a greyish background color while the thumbnails are perfect. I’ve took a couple screenshots as an example.

As a FYI, I would be fine if the dropdown menus, search boxes, and form fields kept the current background color.

McToshLLC_0-1639766835212.png
McToshLLC_0-1639766835212.png718×793 222 KB

McToshLLC_1-1639766864961.png
McToshLLC_1-1639766864961.png1090×675 213 KB

Thank you very much for any help!

2

Hi @Truffletopia ,

Go to Assets > timber.scss.liquid and paste this at the bottom of the file:

.grid-product__image-link,
.product-single__media-group-wrapper a, 
.product-single__media-group-wrapper img, 
.product-single__thumbnails a, 
.product-single__thumbnails img{
	background: transparent !important;
}

Hope it helps!

1 Like