Transparent background on PNG not always working on Venture Theme

Store Design
1

I’m trying to import the image for some collections as transparent PNGs in order to add a list of collections to my menu.

Each mage is the logo of a vendor in a 700x700 png in sRGB created in photoshop and exported to web without any interlacing, compression and with transparency enabled.

Funny thing is that some of them show correctly on shopify, some of them have black background, some have a black bounding box with a very pale blue background and some have lots of artifacts in the background.

All of them are created and exported from the same file in layers using the same options, but I can’t figure out why some of them are failing, and others don’t.

Has anyone else ran into this same bug?

capture.JPG
capture.JPG1001×248 23.8 KB

2 Likes
2

Hello, @FdelaVega

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

3

Thanks for the welcome
the store URL is
hm.supply

it is password protected (pass: taladro ) for the moment since it’s still in development

the MARCAS submenu is the one with the problem but I suspect that it will continue in every other section once I move from jpg to png

4

@FdelaVega

already background on image

5

there shouldn’t be any background on those images, they are pngs with transparent background

Not sure why they are showing like that in shopify, they work just fine elsewhere as shown below.
Unfortunately shopify’s forum doesn’t allow me to set colored background to the cells in this table to better illustrate, but these are the same images failing on our store once they are set as a collection image.

|

Anclo.png
Anclo.png700×700 78.6 KB

|
dewalt.png
dewalt.png700×700 6.5 KB

|
konkore.png
konkore.png700×700 68.1 KB

|
| - | - | - |
|
flowguard.png
flowguard.png700×700 105 KB

|
Index.png
Index.png700×700 13.4 KB

|
ITSA.png
ITSA.png700×700 105 KB

|

6

Hello, @FdelaVega

I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?

7

Yes, please send the access request as a collaborator

8

@FdelaVega

Yes I have sent, please let me know if you have accept

9

Thanks, I have granted you the permissions

10

Think I found the solution

1-Image has to be cut and pasted into a new RGB file using sRGB color profile, if possible should be vector created in Illustrator in RGB mode

2-No other layer should be present in the file in order for it to have a better chance of success

3-Export as PNG-24 no interlaced, no compression, no metada, convert as sRGB

4-Delete current image on collection, save and close collection

5-Open collection again and import new image, do not drag-and-drop

6-Save collection, close and open again to confirm it’s working

Chance of success 80%
If this fails, repeat steps 4-6 until it works (can take several attempts)

Missing any f those steps results in the same error almost every time (10-20% chance of success)

1 Like
11

Thank you so much!

My problematic file was indeed in RGB with no other layer present, whilst I also made sure to export to the optimal PNG settings; and yet, pasting it onto a new Photoshop document (and removing the underlying layer) was the action that made it show up transparent on Shopify.

1 Like
12

@FabFalls

Yes, please try

13

From a person that has never used Photoshop, is there anyway you could walk me through everything?

14

Yes, I have run into a similar bug! I have hundreds of product png images which have semi transparent shadows. Many of the images have been on the site for years without problems, but gradually the shadows in some of the images have turned opaque and black. It hasn’t affected all pngs and it seems to be quite random.

This is how it should look

This is how it should look
This is how it should look808×1098 302 KB

After years of looking fine, it now looks like this…

This is what happened recently, although for years the images was fine
This is what happened recently, although for years the images was fine808×1098 283 KB

I have resaved the images in Photoshop using “Save for Web” and so far that seems to have worked. But we are worried that it will happen again. Shopify tech team were unable to give an adequate explanation, saying it was likely to be caused by a Private App, but our private Apps only have read permissions…

I would grateful for any further insights!

1 Like
15

@MattGestalten

store url please

16

https://gestalten.com/products/monocle-travel-guide-bangkok

1 Like
17

@MattGestalten

try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.scss ->paste below code at the bottom of the file.
.product .product_gallery, .product-voucher .product_gallery {
    background: #fff;
}

.product .product_section .image__container, .product-voucher .product_section .image__container {
    background: #fff;
}
18

Thanks for you reply, but I am afraid that isn’t the solution. It is definitely not a CSS problem.

Please compare these images to illustrate the problem:

This one is broken

https://cdn.shopify.com/s/files/1/2717/4124/products/The_Monocle_Travel_Guide_series_Berlin_350x350.png?v=1588778728

This one if fine:
https://cdn.shopify.com/s/files/1/2717/4124/products/The_Monocle_Travel_Guide_series_Barcelona_a36f8024-0d14-4ba2-a35d-f61f36391325_350x350.png?v=1644836585

19

@MattGestalten

nope that’s css issue backend code color fil that section

20

Sorry, I am not sure if I understand you correctly… Are you saying the problem is CSS?

If you look at the 2 image paths in my previous comment sent you will see there is no CSS involved just 2 images. One has a nice looking shadow one has a black block with no dithering where the shadow should be.

1 Like