Change thumbnail background color for the TASTE theme

Store Design
,
1

Hello! I’ve been researching to figure out how to change the background color (white) of the thumbnail images for my site. I’ve seen answers for updating codes in different themes, but can’t seem to find the code line or setting for the TASTE them.

I’d like to change the background color to match my site color so that it looks seamless. I appreciate the support in advance.

2

Hello @KenishaB
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

@KenishaB Please provide your store URL and screenshot of the problem to help you on this.

4

Hi @KenishaB ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.thumbnail img {
    background: transparent;
}
5

Hi! I don’t see the base.css file. But, there is theme.css.liquid file under Assets. I tried pasting the code there, but no change.

6

Hi! Here’s the URL: https://ourkindredpaper.com/

I'm wanting to update these white background to be the same color as the site or transparent.
I'm wanting to update these white background to be the same color as the site or transparent.1348×786 238 KB

7

Hi! It’s a client store and I have limited access. Is there another way that I can give you access?

8

Hi @KenishaB ,

i checked and your image always has white background, so if you want, you need to change the image to transparent and add the following code, it will work fine.

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.image-wrap {
    background: transparent !important;
}
9

Hello @KenishaB I just requested the store URL so i can check your issue and provide you possible solution

10

Here’s the URL: https://ourkindredpaper.com/.

I saw you asked for the password and I wouldn’t be able to provide that. Let me know if this works.

11

Thanks for the suggestion. I’ve added the line of code, but still no update. The thumbnail background is still white.

12

Hi @KenishaB ,

Did you change the image to png with transparent background?
Because the image you uploaded has a white background, so there is no way to change it if you don’t change the image, my code only works after the image is changed. Refer

Screenshot.png
Screenshot.png1388×976 80.9 KB

13

@KenishaB We have checked the images on your site and the image itself in the white background. So, we can’t change that by code.

First you have to update the image to transparent with PNG format with the help of image editor and upload it in the store.

Then, follow below steps to change the image background color to transparent through code. Let me know whether it is helpful for you.

  1. From admin, go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Go to “theme.css” file and paste the below code at the bottom of the file and save changes.
    NOTE: You can change the background color as per your need.
.grid .collection-image {
    background-color: transparent !important;
}

Result will be like,

Vinsinfo_0-1719467702978.png
Vinsinfo_0-1719467702978.png275×322 62.8 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

14

Hi there! Thanks for the follow-up. My client had a delay and we’re just getting around to trying your solution. I’ve added the code and updated one of the product images to include a transparent PNG file, but the product image is still appearing with a white background. The specific image we’ve uploaded is this: https://ourkindredpaper.com/collections/encouragement-cards/products/life-be-lifin-encouragement-card. I also attached an image of where I’ve added the code. Can you assist?

code.png
code.png1855×799 99.8 KB

15

Hi there! We’ve tried the above and the images are still appearing with a white background. This specific product has a PNG image as the main image and still appears with a white background: https://ourkindredpaper.com/collections/encouragement-cards/products/life-be-lifin-encouragement-card. Can you provide any additional assistance?

16

Hi @KenishaB ,

Please add code:

.image-wrap .photoswipe__image {
    background: var(--colorBody);
}
17

Hi! I added this code instead of the previous one and all of the images are still appearing with the white background. Not sure what I’m doing wrong. Any other solution to get all of the images to match the site background color?

18

Hi @KenishaB ,

I tried adding the code and it worked fine:

Screenshot.png
Screenshot.png1710×1106 229 KB

Can I send you a collaborator invite? it will help me debug better