Atelier theme - collection page products color background

Hi, I need some help with my product collection page.

Some of my product images are transparent, and I plan for all of my product images to be transparent. I want the background behind the products to be #F9F9F9 instead of white.

I tried adding custom CSS to the product cards and media containers, but the background still appears white behind the products.

Here is an example collection where the products are set to transparent):

URL: RUNWAY

Could someone help me identify the correct class or theme setting to change so the background behind the product images shows #F9F9F9?

Thanks!

Try this in “Custom CSS”, either section or in Theme Settings to apply to all collection product grids:

.main-collection-grid {
  --color-background: #F9F9F9;
}
1 Like

This worked thank you!

Would you know how to set recommended product background color to #F9F9F9

Add another selector to the rule:

.main-collection-grid,
.product-recommendations .section {
  --color-background: #F9F9F9;
}
1 Like

Highly appreciate it thanks. This worked!

1 Like