My url is https://thesweetspot21.com
When clicked into the product it is displayed as white/transparent, but when I am on the home page it is grey.
Thank you!
Topic summary
Product images show a grey background on the homepage but appear white/transparent when viewing the product page. Investigation via Chrome DevTools suggests inconsistency in the uploaded images: some product photos have transparent backgrounds while others have a white background.
A greyish CSS “background-color” (noted as something like hsl(0, 0%, 90%)) is being applied in the theme, which becomes visible behind transparent PNGs, making them look grey. Images with a baked-in white background don’t show the grey.
Proposed fixes:
- Edit the theme code where product images are rendered (e.g., product.liquid or similar) and change/remove the CSS background-color so it becomes white/transparent.
- If theme code can’t be located/edited, re-upload affected product photos with a white background to mask the grey.
Status: Not fully resolved; the recommended workaround is re-uploading images since the CSS location wasn’t found by the site owner.
Hi [email removed]Leejr0216
Some of your product backgrounds are and some are white because I think you uploaded some with a transparent background and some with a white background. I’m not sure exactly where in your theme this is happening but I see when I inspect your images in the Chrome developer console that there is a background-color attribute with the grey-ish tone applied. This makes me think that some of your products like the INTO YOU Velvet Mist Liquid Lipstick and the Joocyee Spiral Shell Highlight Powder have transparent backgrounds and so the background is changing to that grey color. But other products like Marchare Beauty Blender were uploaded with a white background so the background-color attribute doesn’t apply to it and it stays white.
I would say to fix this you can either:
-
Go into your theme code and find where product photos are displayed (probably in product.liquid or a similar file). They would be in an
TML tag. And then find the background-color: hsl(0, 0%, 90%) CSS part and change it to background-color: white or take it out.
-
Re-upload the products with transparent backgrounds and change them to white backgrounds.
Hope that helps!
Hi @plentiful_comm ,
Thank you the help! But I am unable to img or background colour, I have looked up product.liquid, product-template.liquid, product-recommendation.liquid and every snippets with product in it.
If you are unable to edit your theme code then I would recommend re-uploading the product photos with this issue with white backgrounds to override this setting.