Product images for every image on my shop, load as a black box, and then quickly switch to the product image,
Can any one help with this?
Topic summary
A Shopify store owner is experiencing an issue where product images briefly display as black boxes before loading the actual images.
Problem: All product images initially appear with a black background placeholder that quickly switches to show the correct image.
Solution provided: Modify the theme’s CSS to change the placeholder background color:
- Navigate to Online Store > Themes > Edit code
- Locate the base.css file (or component-card.css/theme.css depending on theme)
- Search for classes like
.global-media-settings,.product-media-container, or.loading - Add CSS to set background to white or transparent:
background: white !important;orbackground: transparent !important;
The discussion remains open with no confirmation yet on whether the solution resolved the issue.
1 Like
Hi @jayjay5000 ,
To fix this, you need to change the placeholder background color in your theme’s CSS files. Here’s how:
-
Go to Online Store > Themes > Edit code.
-
Open your theme’s base.css file (or sometimes component-card.css or theme.css, depending on your theme).
-
Search for a class like .global-media-settings, .product-media-container, or .loading.
-
Add or edit the background color property. For example, to make it white or transparent, add:
css
.global-media-settings, .product-media-container, .loading { background: white !important; background-color: white !important; }
Or use transparent if you prefer:
css
.global-media-settings, .product-media-container, .loading { background: transparent !important; }