How can I change the color of a specific collection header title?

Store Design
, , , ,
1

I have several collections pages and I wanted each collection page header title to be with a specific color.

When I put below code, it changes all of them to the same color, which i do not want.

Can someone help me to change this for a specific collection page? assume the collection title is electronics

.section-header__title {

color: #572D68;

}

2

Hi @hmadian ,

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

the collection URL is below

https://primehodl.com/collections/electronics

1 Like
4

@hmadian

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.aio.min.css ->paste below code at the bottom of the file.
.collection-hero__content  h1.section-header__title {
    color: #572D68;
}

oh sorry for that issue can you please try this code

5

Hello @hmadian ,

I would like to give you some recommendations to support you.

Please go to Online Store > Themes > click 3 dots button > Edit code > Theme.liquid and add code above the tag on the file Theme.liquid

#shopify-section-template--15348417167453__collection-header .collection-hero .section-header h1.section-header__title {
	 color: #572D68;
}

I hope you find the answer helpful, if you need further support, do not hesitate to reach out to us.

Kind & Best regards,
GemPages Support Team.

6

@KetanKumar Thank you for the reply, but this did not work.

As i mentioned, when i put the below code, it does the job but for all collection pages. i want to do it only for electronics collection page.

.section-header__title {

color: #572D68;

}

7

@GemPages

Thank you for the reply, but this did not work.

As i mentioned, when i put the below code, it does the job but for all collection pages. i want to do it only for electronics collection page.

.section-header__title {

color: #572D68;

}

8

Hi @hmadian ,

Very sorry my code is not working well on your page. But I checked my code, I am missing some codes.

May you re-add this code above the tag on the file Theme.liquid?

Ex:

GemPages_0-1669021037967.png
GemPages_0-1669021037967.png1392×870 65.3 KB

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

1 Like
9

This worked like magic. Much appreciated @GemPages

10

Hi @hmadian ,

Thank you so much, your kind words have just made my day :heart_eyes: .