I Would like to change the product grid baground from black to white

Shopify Discussion
1

Greetings !!

I would like to change the product grid baground colour from black to white,

Any help pls ?

Website link

https://house-of-clouds-8085.myshopify.com/

product grid.png
product grid.png1920Ɨ863 282 KB

1 Like
2

Hi @Kurtins

If you want to change the color of the product grid, in the collection page, just follow the instructions below. Since you have a black and white background and text, you can use filter on this.

  1. From you admin store, go to Online store > Themes > Click the three dots > Edit code
  2. This should open the code editor. Find the Asset folder and open the base.css file
  3. Paste the code below at the very end of the file
.color-inverse.isolate.gradient {
    filter: invert(1);
}

.card__inner.color-accent-1.gradient.ratio {
    filter: invert(1);
}
3

Followed your instructions but still with black baground :disappointed_face:

code..png
code..png1920Ɨ863 66.2 KB

4

My bad. I see it is already white.

made4Uo_0-1677259677301.png
made4Uo_0-1677259677301.png1844Ɨ932 281 KB

5

Hi @Kurtins ,

This is Victor from PageFly - Landing page builder, Iā€™d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.card__heading {
    color: black;
    
}
.card-information>.price{
    color: black;
}

.product-grid-container {
    background: white;
}

PageFlyVictor_0-1677260153357.png
PageFlyVictor_0-1677260153357.png1894Ɨ839 224 KB

Hope my answer will help you.

Best regards,

Victor | PageFly

6

Still with black baground.

7

Hi @Kurtins ,

I do see you were at your theme editor. If you did not save the changes you made in the theme editor, it will not reflect to your live theme

8

Code was saved but still with white black baground. I did save other codes before this one which seemed to work.

But the product grid seems to stay black : (

9

@Kurtins You can try my solution to see

10

i have also tried your solution but it seems to have not worked aswell.

any other solutions? 3 hours to change the baground, im going crazy :confused:

11

You can try this code:

.card__heading {
    color: black !important;
    
}
.card-information>.price{
    color: black !important;
}

.product-grid-container {
    background: white !important;
}
12

Still did not work :confused:

13

Sorry about that, you can try again

  1. Go to Edit code on Online Store

  2. add my code above the tag on Theme.liquid: