Hi,
Is it possible to have different colored backgrounds for different products. For example say I have 4 products, can I have 4 different backgrounds, let’s say green, red, blue, pink, on the product grid page so I can use this across multiple areas and not have to make css for each specific section id. Thanks
But what means you want to use this across multiple areas? Do you want to use this also on product pages or cart or only on the collection grid?
Do you want to add these background colors for specific or random products?
Like wherever I want to put collection/feature collection/you may also like, wherever has the product grid. I just dont’ want to have to use each section id specific to that page to do it if there is a way to do it once perhaps using some liquid code
Hello @shellbell
It’s GemPages support team and glad to support you today.
To provide you with the most precise solution in this case, could you please share the store link?
I am not sure if this is what you mean but assuming that you have products grid like this:
First product
Second product
Third product
Fourth product
...
you can use :nth-child CSS selector to add background to specific products:
.product-grid-item:nth-child(4n + 1) {
background: green;
}
.product-grid-item:nth-child(4n + 2) {
background: red;
}
.product-grid-item:nth-child(4n + 3) {
background: blue;
}
.product-grid-item:nth-child(4n + 4) {
background: pink;
}
Gotcha, my suggestion is to edit .liqud files responsible for displaying grid images and CSS class based on some product property (for example product.handle):
and add background styles based on these CSS classes