How to change background color of collection grid?

Store Design
,
1

Hello, could someone kindly help me change the background to my collection items from white to hex #424242 grey?

I have tried within the theme settings, however it changes other areas of the page background too… I only want the area behind the product images to be grey.

I will also need to change all the text on this section to white, so it can be readable!

Here’s the webpage link: https://printscharming.com/collections/in-the-gallery

Thanks in advance for your help!

2 Likes
2

Hello @PrintsCharming1
You want like this.

devcoders_0-1738952444029.png
devcoders_0-1738952444029.png1329×646 219 KB

3

Hi! The only background I want to be grey is the box “In The Gallery” which contains all the product images, if that’s possible?

1 Like
4

Right ?

devcoders_0-1738953002391.png
devcoders_0-1738953002391.png1343×528 201 KB

1 Like
5

Yes that’s right, plus the titles will need to be black instead of white

1 Like
6

Hi @PrintsCharming1

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#shopify-section-collection-template .layout__section .collection * {
    background:#424242;
    color: white;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
7

Hi, thank-you for your advice! This is very close to what I’m looking for, although I was hoping to keep the background to the top of the section in white (where it reads In The Gallery and has drop down selectors)… also, I would like the prices to remain in green. Is that possible with CSS?

8

Hi PrintsCharming1

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file theme.css and add this code at the end of the file
span.price {
    color: green !important;
}

Result:

LizHoang_0-1739015414939.png
LizHoang_0-1739015414939.png609×455 184 KB

Best,
Liz

9

Replace on this code.

div#shopify-section-collection-template .layout__section .collection * {
    background:#424242;
} 

.collection__header-inner *, .product-item__info a, 
.collection__toolbar.collection__toolbar--bordered *, .collection__dynamic-part .pagination {
    color: white;
}

And Save,

Result:

Made4uoRibe_0-1739034295479.png
Made4uoRibe_0-1739034295479.png1189×686 479 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
10

Thank-you so much for your help!