HI!
I already tried many CSS I found in the community but none of them worked. I want to change the product images background to transparent, now it’s white even with the PNG file.
Thank you!
Topic summary
Goal: make product images appear with transparent backgrounds on collection pages in the Impact theme. PNG images looked transparent on product pages but showed a white background on collection cards.
Details and investigation:
- Preview links were shared; example product: Outdoor Portable Battery 15000mAh Sandy Beige.
- The collection card was pulling a JPEG asset, which doesn’t support transparency (unlike PNG).
Proposed solutions:
- Use the PNG version for collection thumbnails to preserve transparency.
- Add a CSS override to the product card container to control the visible backdrop: .product-card__image { background-color: #f0f0f0; }.
Outcome:
- The CSS change was applied and confirmed to fix the visual issue for the user.
Notes:
- A screenshot showing the white background on the collection grid was central to diagnosing the problem.
- Status: resolved; no further action items.
1 Like
@NatHypo - what color do you want in the background? can you please share your website link where you have these images?
Hi!
I want it transparent. It’s not published yet, the theme is IMPACT.
@NatHypo - can you share the preview link?
I testes with the 15000maH Beige battery, as you can see it’s already in PNG file but it shows white.
https://6zkhfd1iaghfvh0s-55915937865.shopifypreview.com
@NatHypo - which product do you have with png images? I just checked this one as test and it has jpg image
This one , but please check it in the collections page - the background shows in white.
Hi @NatHypo
Would you mind taking a look and sharing your store’s URL along with the password if it’s protected? Thanks!
@NatHypo - because it is using this image which is jpeg, you need to add png image and it should work
In the product page it looks good (transparent), but in the collection looks like this:
@NatHypo - add this css to the very end of your theme.css file and check
.product-card__image{background-color: #f0f0f0;}
1 Like
It worked!! Thank you so much! 
1 Like
@NatHypo - welcome, do let me know if you need anything , you have my email below, I will check it tomorrow.