The cards that display my products have a white background, but my images are.png. I was hoping to make these cards show just the product with a transparent background. Is there a way to change this? Image and site link below:
Topic summary
A user wants to remove the white background from product cards to display transparent PNG images directly.
Solution Provided:
Another user shares CSS code to achieve this:
- Navigate to Online Store → Theme → Edit code
- Open Asset → base.css
- Add the provided CSS snippet at the bottom:
.product-grid .card,
.product-grid .card-information {
background: transparent !important;
}
Outcome:
The original poster confirms the solution worked successfully.
Follow-up Issue:
A third user reports experiencing the same problem but states the proposed CSS solution and other approaches haven’t resolved it on their site. They’ve been asked to share their store URL for further troubleshooting.
1 Like
yes, please add this code
- Go to Online Store->Theme->Edit code
- Asset->/base.css ->paste below code at the bottom of the file.
.product-grid .card:not(.ratio), .product-grid .card-information {
background: transparent !important;
}
After View
2 Likes
That worked, thank you!
1 Like
its my pleasure to help us
Hi Ketan,
having the same issue as identified in the question, im trying to get my product backgrounds to be transparent across all products on my site. I’ve tried the proposed solution, and may other approaches given on this platform, to no avail. could you possible help?
1 Like
oh sorry for that issue can you please send your store url so i will check and let you know proper solution