Change Color of Text for Featured Products in Specific Collection

Store Design
1

I have searched for this all over, but cannot find a viable solution. TrinityThrift.com

Basically, I would like to change the color of the text for my Featured Collections for each specific collection. I have several, and have created custom themes in the Theme Editor. But I cannot get the color of the text to change for each individual collection theme.

For my Astrology Drip and BackDrip collections, the text is the correct color (white), however, I want the text to be a different color for my other themes (like the petite, small, etc for my thrift shop). Could someone please tell me what to type into my theme.scss.liquid?

As you can see in the picture below for Astrology Drip, the text is white, which is fine.

TrinityThrift_0-1665624816683.png
TrinityThrift_0-1665624816683.png785×525 496 KB

TrinityThrift_1-1665624904632.png
TrinityThrift_1-1665624904632.png538×530 188 KB

But for this collection (petite), the text is also white, and I need it to be black. How can I change the text for each individual collection?

TrinityThrift_2-1665625026787.png
TrinityThrift_2-1665625026787.png910×527 384 KB

2

Could you please clarify:

  1. should the font colour apply to product titles only, in the collection page?

  2. is this going to be a colour per collection template (in this case you can create a setting in your collection section) or per individual collection? (in this case you will need metafields)

3

Hi @TrinityThrift ,

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

#astrology-drip * {
    color: #fff !important;
}
#petites * {
    color: #000 !important;
}

Hope it helps!

1 Like
4

Hello @TrinityThrift

It will be helpful if you try this code.

Go to the online store ->Theme → Assets → theme.scss.liquid → Add code at the bottom

.ProductList.ProductList--grid.ProductList--removeMargin.Grid .Heading {    
color: #000;
}
5

Oh goodness, thank you SO MUCH Litos!!! That was the trick. Thank you, Thank you, THANK YOU!! :grin:

1 Like
6

Hi @TrinityThrift ,

If you have any further questions, you can contact me.
Happy to help you.

7

One more quick question:

I notice now that there are two headers on my collection pages now. Not sure how that happened, and I’m not sure where to change it, as I can’t located it on the page inspector. If you have any ideas, I’d be grateful!

TrinityThrift_0-1665670700019.png
TrinityThrift_0-1665670700019.png1024×284 365 KB

8

Hi @TrinityThrift ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

1 Like
9

Good idea. I’ll do that, thank you!

1 Like
10

Here’s the link to the new question! Thanks again. :slightly_smiling_face:

https://community.shopify.com/c/shopify-design/two-headers-showing-up-on-collection-pages-in-prestige-theme/m-p/1775122#M474740