How can I change the color of a product grid in Broadcast theme?

Store Design

Topic summary

Main issue: Changing the product grid background color in the Broadcast theme. The initial CSS targeting #ProductGridContainer in theme.css did not work; the goal is to match the homepage background color.

Proposed fixes:

  • Share the homepage URL so selectors can be checked in context.
  • Try a different selector with higher priority: .index-tab-collections { background: #fffbb5 !important; }.
  • If the white comes from product images (not the grid), adjust images; otherwise target tiles: .product-grid .product-item { background: #fffbb5; }.
  • Another variant suggests .product-grid.product-item { background: #fffbb5 !important; } (note one reply misspells !important, which would break the rule).

Notes:

  • The white appearance may be due to image backgrounds rather than the grid container.
  • CSS selectors determine which elements are styled; !important can override existing theme rules.

Current status: No confirmed solution yet. Contributors requested the store URL to provide an exact selector, and another user reports the same issue. The thread remains open with code snippets central to troubleshooting.

Summarized with AI on December 18. AI used: gpt-5.
1

Hi Everyone,

I am attempting to change the color of a product grid on my homepage for the Broadcast theme.

I was told to try adding this to my assets - theme.css

#ProductGridContainer {
background: #fffbb5;
}

This isn’t working for me any ideas?

Matthew_0-1665115431711.png

The backgrounds are white for each individual product in the grid and i am attempting to match them to my homepage background color

2

@Matthew_39 can you please share homepage link?

3

Hi @Matthew_39 ,

Go to Assets > theme.css and paste this at the bottom of the file:

.index-tab-collections {
      background: #fffbb5 !important;
}

Hope it helps!

4

Hello @Matthew_39 ,

First, check if there is any issue with the product image, maybe the product image has a white background.

If not, you can try adding this below-provided code.

.product-grid .product-item{

background: #fffbb5;

}

In case the issue still exists then share your website URL and we will check the issue for you and provide the exact solution.

Regards,

CedCommerce

5

Hi @Matthew_39 .

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code and add this code on file theme.css

.product-grid.product-item{

   background: #fffbb5 !imporant;

}

Hope this answer helps.

Best Regards,

PageFly

6

I am having a similar issue. I have not been able to get it to work. Please help.