Re: Shopify automatically adds black background to the collection image

Solved

Shopify automatically adds black background to the collection image

AlexandrVoz
Tourist
3 1 3

When I upload the image to the server, it looks correct.

AlexandrVoz_1-1662303941212.png

 

After I save and look at the page - it adds a black background to the image

AlexandrVoz_2-1662303981628.png

 

AlexandrVoz_0-1662303909709.png

 

I already used the solution from here, and it didn't help

https://community.shopify.com/c/shopify-design/transparent-image-background-on-collections-page/td-p... 

Any ideas on how to solve it?

The website URL is 

https://kbhugs.com/

 

Accepted Solution (1)
AlexandrVoz
Tourist
3 1 3

This is an accepted solution.

As you can see, the images are in png format, so it's a surprise that if I upload PNG image it changes to JPEG.

AlexandrVoz_0-1662321437293.png

Fortunately, I found a solution. If you drag and drop the image onto the "upload form" in the collection, it doesn't change the background!! Magic!!!

 

View solution in original post

Replies 7 (7)

AmitGodoble
Shopify Partner
62 2 6

Hey @AlexandrVoz, hope you are doing great.

Yeah, when we hover, mouse over on product grid, it shows black overlay, are you talking about this?
If  yes,

1. Go into edit code,

2. Into theme. scss. liquid file and then go to line 6541

Here you should remove the code which makes your block transparent so remove the lines I have highlighted in screenshot:

 

AmitGodoble_0-1662314006256.png

 

 

6546,  6547,  6548

 

After it, the part of this code should look like the following screenshot:

 

AmitGodoble_1-1662314005968.png

 

Let me know what happened after you will try.

Best of luck.

-Was my reply helpful? Click Like to let me know!
-Was your question answered? Mark it as an Accepted Solution
AlexandrVoz
Tourist
3 1 3

1)my theme.scss.liquid doesn't have the line you referring to

2)The black background appears not on hover but constantly. It's permanent. Look at the screenshots. 

3)Previously I set up hover effect to not change color, and it works fine with 4 collection images out of 6. Only 2 new images I added today have the issue.

Vitis kbhugs.com and check it yourself

made4Uo
Shopify Partner
3839 716 1177

Hi @AlexandrVoz,

 

It looks like it uploaded as a JPEG. I was checking the other images and all are PNG format except the two images mentioned. 

 

Please double check the image you uploaded

 

made4Uo_0-1662318073759.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
AlexandrVoz
Tourist
3 1 3

This is an accepted solution.

As you can see, the images are in png format, so it's a surprise that if I upload PNG image it changes to JPEG.

AlexandrVoz_0-1662321437293.png

Fortunately, I found a solution. If you drag and drop the image onto the "upload form" in the collection, it doesn't change the background!! Magic!!!

 

toplocations
Tourist
8 0 4

I tried this, no success.. anyone able to figure this out? i have the same .psd file outputting to png with the same settings, and still it's a seemingly random affect - but even re-exporting from photoshop doesn't fix the issue, idk why it's choosing some images over others 😕

Richard_Monette
Shopify Staff
19 2 6

I suspect what is happening is that when you are uploading a new image to a collection which already has a featured image assigned the format of the original image is being preserved. In other words if you do:

 

1. Create a new collection

2. Assign a jpg to the featured image for that collection

3. Later, return to the collection and then try to upload a png

4. Shopify sees that you already have a file path for the collection image which is .jpg and thus converts the png to a jpg

 

This is likely happening because the system is trying to avoid writing the bytes i.e. content of the png image into a file path which ends with jpg. Since the system is also probably trying to not change the file path / URL in case there are links to it, then the only option is to do that conversion.

 

As a workaround, I believe if you 

 

1. Remove the featured image (to get rid of the jpg)

2. Save the collection

3. Add the png

 

then you will be able to add the png as you intend. Appreciate that this is annoying but it might be a temporary solution.

 

The question we have to resolve is whether it would be acceptable to change the URL of the image from jpg to png as necessary, and is it OK if that breaks any links to the jpg URL. Another idea would be to make trying to upload a png to replace a jpg an error, so the UI would not allow it, and it would provide a message about having to remove the jpg first. That maybe is even more annoying but at least it would be clear as to what is happening.

To learn more visit the Shopify Help Center or the Community Blog.

pu-vienna
Shopify Partner
3 0 0

The workaround of removing the picture and then uploading it again works.

But if this is a known issue, why can't Shopify just fix it?