When uploading a product with transparent background, the current color is black. Both on Collection page and on the Product page. Where can I change that?
Thank you so much in advance!
Topic summary
A user is trying to change the black background color that appears behind product images with transparent backgrounds on both collection and product pages in the Shopify Habitat theme.
Problem identified:
- Products with transparent backgrounds display with a black background by default
- The user cannot find the setting in the theme’s Typography or Color customization options (as shown in attached screenshots)
Proposed solution:
- Add custom CSS code to change the background color to white (or another color)
- Target classes:
.product__media imgand.collection__image img - Code should be added to
base.cssortheme.cssin the Assets folder
Current blocker:
- The user cannot locate
base.cssortheme.cssfiles in their Assets folder (screenshots show different file structure) - The discussion remains unresolved as the user awaits guidance on where to place the CSS code in their specific theme setup
Multiple screenshots were shared showing the theme customization interface and file structure to help troubleshoot the issue.
1 Like
Thank you for helping out! These steps is not available under Typography or Color options. Please see attachment.
Unpublished. Can I share link and code in a private message?
Hi @JimiT1
Please, share your store URL. Thanks!
Hello @JimiT1
The black background appears because Shopify automatically applies a default background color when a transparent image is uploaded.
How to Change the Background Color for Transparent Images:
Go to Shopify Admin → Online Store → Themes → Edit Code.
Open base.css (or theme.css) file under the Assets folder.
Add this CSS at the bottom:
.product__media img, .collection__image img {
background-color: white !important;
}
Thank you! This is the solution I am looking for. But under Assets folder I don’t have base.css or theme.css? Please see attached images.
