Automatic background color for PNG images

Shopify Discussion

Topic summary

A user encountered an inconsistency where PNG images with transparent backgrounds automatically display the site’s secondary color as background on product pages, but not on collection pages.

Issue Details:

  • Product pages correctly show the secondary background color (#F5EC1F) behind transparent PNGs
  • Collection pages display transparent backgrounds instead of applying the same color
  • Both pages use identical product images

Solution Provided:
A CSS code snippet was shared to force the secondary background color on collection page product images:

  • Add custom CSS to theme.liquid file before the closing </body> tag
  • Targets .product-item__image-wrapper elements
  • Sets background-color to #F5EC1F with !important flag

Outcome:
The solution was successfully implemented and resolved the background color inconsistency across both page types.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hey,

I noticed that in my product page when my images are without background color as PNG, automatically the secondary color that I chose will become the background.

But in the collection page the product background does not change the same way it is inside of the product page.
I uploading 2 images so you can see and the product file has the same images both of them transparent.

Is it possible by code to do that my Secondary background color which is #F5F1EC , will also be the background in the products on the “Collection Pages”

Thanks!

875a2ece-ef8d-4424-9f15-a99bc9d2c0ef.jpeg
875a2ece-ef8d-4424-9f15-a99bc9d2c0ef.jpeg1600×650 34.5 KB

e2d8e892-6bae-4db9-8500-608fb26f7148.jpeg
e2d8e892-6bae-4db9-8500-608fb26f7148.jpeg1600×608 46.4 KB

2

Hello @onygroup100

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
.product-item__image-wrapper.product-item__image-wrapper--multiple {
background-color: #F5F1EC !important;
}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

3

Its works!

Thank you very much!

1 Like