Transparent background on PNG not always working on Venture Theme

FdelaVega
Tourist
6 0 3

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

Replies 28 (28)

KetanKumar
Shopify Partner
36839 3635 11972

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
FdelaVega
Tourist
6 0 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

KetanKumar
Shopify Partner
36839 3635 11972

@FdelaVega 

already background on  image

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
FdelaVega
Tourist
6 0 3

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.pngdewalt.pngkonkore.png
flowguard.pngIndex.pngITSA.png

 

KetanKumar
Shopify Partner
36839 3635 11972

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?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
FdelaVega
Tourist
6 0 3

Yes, please send the access request as a collaborator

KetanKumar
Shopify Partner
36839 3635 11972

@FdelaVega 

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
FdelaVega
Tourist
6 0 3

Thanks, I have granted you the permissions

FdelaVega
Tourist
6 0 3

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)

FabFalls
Visitor
2 0 1

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.

KetanKumar
Shopify Partner
36839 3635 11972

@FabFalls 

Yes, please try 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Trey8
Visitor
1 0 0

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

MattGestalten
Tourist
9 0 5

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 lookThis is how it should look

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

This is what happened recently, although for years the images was fineThis is what happened recently, although for years the images was fine

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! 

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@MattGestalten 

store url please 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36839 3635 11972

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MattGestalten
Tourist
9 0 5

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

 

This one if fine:
https://cdn.shopify.com/s/files/1/2717/4124/products/The_Monocle_Travel_Guide_series_Barcelona_a36f8...

KetanKumar
Shopify Partner
36839 3635 11972

@MattGestalten 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MattGestalten
Tourist
9 0 5

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. 

KetanKumar
Shopify Partner
36839 3635 11972

@MattGestalten 

yes this css issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MattGestalten
Tourist
9 0 5

Thank you for your time looking into this but I think you misunderstand me. I am NOT taking about the grey box surrounding the image. Am talking about the black rounded shape around the book. Please look again at the 2 images in the previous post and you will see they are different but there is no CSS.

 

To prove this I have changed the CSS temporarily as you suggested. It now looks like this:

 

The black shape is still thereThe black shape is still there

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@MattGestalten 

can you please use master images 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MattGestalten
Tourist
9 0 5

Thanks again for your time. The first image is uploaded the second is generated on ShopifyThe_Monocle_Travel_Guide_series_HongKong.pngMattGestalten_0-1645131815832.png

 

MattGestalten
Tourist
9 0 5

Ah that is interesting. Both images break on this forum! That means it must have something to do with the way images are displayed on the Shopify server.

MattGestalten
Tourist
9 0 5

This is what the same image looks like on my server:

https://matthewdavis.de/The_Monocle_Travel_Guide_series_HongKong.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@MattGestalten 

yes, you have upload file manager image 

Shopify ADmin >>> setting >>> files

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MattGestalten
Tourist
9 0 5

Ok, I am pretty sure I have the solution. Using Photoshop File > Export > Save for Web (legacy) fixes the problem. Examples below. Top image resaved for web.Saved for Web in PhotoshopSaved for Web in PhotoshopNot saved for webNot saved for web

KetanKumar
Shopify Partner
36839 3635 11972

@MattGestalten 

wow great thank for update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing