Shopify automatically adds black background to the collection image

Technical Q&A
1

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

AlexandrVoz_1-1662303941212.png
AlexandrVoz_1-1662303941212.png885×647 42.9 KB

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

AlexandrVoz_2-1662303981628.png
AlexandrVoz_2-1662303981628.png272×325 10.9 KB

AlexandrVoz_0-1662303909709.png
AlexandrVoz_0-1662303909709.png977×709 162 KB

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

https://community.shopify.com/topic/1420981

Any ideas on how to solve it?

The website URL is

https://kbhugs.com/

2

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

3

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
made4Uo_0-1662318073759.png2597×1657 603 KB

4

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
AlexandrVoz_0-1662321437293.png836×188 19.7 KB

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!!!

5

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 :confused:

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.

7

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?

8

LEGIT FIX. Thanks man, I was going crazy. :fire: