add this code in asset/base.css at bottom
.card-information+.card{background: #C7C0C0;}
Topic summary
Goal: change the background behind product images (collections and product pages) to light grey without changing the whole page.
Key approaches:
- Use CSS + Shopify Liquid conditionals to target product templates. Example placements: theme.liquid (before ) with {% if template contains ‘product’ %} …, or in assets like theme.scss/theme.css/base.css.
- Collections grid (example that worked): selector #CollectionSection .grid-uniform .lazyload__image-wrapper with background #e2e0e0.
- Product pages: set .template-product background (e.g., #8080804d) to tint the page; or target the product image wrapper to change only the area behind the image. To remove grey, use .product-card .product-card__image-with-placeholder-wrapper { background: transparent }.
- Dawn/OS 2.0 examples: base.css with .card-information+.card for grid; dynamic classes like .pwzrjss3, .pwzrjss111 for product image/thumbnails.
Important caveat:
- Images must be transparent for a background color to be visible behind them. Non‑transparent images will not show the grey; bulk transparency requires image editing tools/apps.
Outcomes:
- Multiple stores confirmed working fixes; others faced issues due to theme differences or incorrect selectors. Some requested direct help or staff access.
Status: partially resolved; ongoing for users needing theme-specific selectors or image transparency solutions. Images attached illustrate desired grey backgrounds.
1 Like