Shopify themes, liquid, logos, and UX
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?
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.
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
already background on image
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.
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?
Yes, please send the access request as a collaborator
Yes I have sent, please let me know if you have accept
Thanks, I have granted you the permissions
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)
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.
Yes, please try
From a person that has never used Photoshop, is there anyway you could walk me through everything?
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
After years of looking fine, it now looks like this...
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!
store url please
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;
}
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
This one if fine:
https://cdn.shopify.com/s/files/1/2717/4124/products/The_Monocle_Travel_Guide_series_Barcelona_a36f8...
nope that's css issue backend code color fil that section
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.
yes this css issue
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:
can you please use master images
Thanks again for your time. The first image is uploaded the second is generated on Shopify
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.
This is what the same image looks like on my server:
https://matthewdavis.de/The_Monocle_Travel_Guide_series_HongKong.png
yes, you have upload file manager image
Shopify ADmin >>> setting >>> files
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.
wow great thank for update
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024