How can I change my product title color without affecting other headings?

[matteo_p]

Hello

I want to change the color of the product title, however when I do this through the theme editor, not only the product title color changes but also the color of all headings in the website. I would like to change the color of the product titles from #191970 to #444444. How can I achieve this without changing the other headings of the website?

[joeybab3]

Which theme do you have and do you have a link to an example page?

You would likely target it using CSS, for example in the dawn theme, product titles are h1 tags with the class "product__title".

To change the title then, you would make a CSS rule like this:

h1.product__title {
    color: #444444;
}

You would put this in theme.css, base.css, or whatever your CSS file that deals with these headers is.

[nahladelices]

Hi, I have the same problem in my website : https://nahladelices.com/ someone to help, thanks

[joeybab3]

Same solution, seems like you edited the structure a bit but this should work if you put it on the bottom of base.css

.product__title h1 {
    color: #444444;
}

[matteo_p]

My store uses the warehouse theme. Should I use this same code?

[joeybab3]

I don't know, I don't have that theme but if you send a demo link I can find the exact class

[joeybab3]

It looks like for your theme it might instead be like this:

.product-meta__title.heading.h1 {
    color: #444444;
}

[matteo_p]

The solution worked, but only for the product pages. How can I make this change effective for the featured collections, collection pages, etc?

[joeybab3]

For specifically collections it would instead be:

.page__title.heading.h1 {
    color: #444444;
}

But for all h1 headings you could also just do:

.heading.h1 {
    color: #444444;
}

[matteo_p]

This collections code had the same effect as the other - it only worked for the product pages, while the code for all h1 heading will change all the site's heading which is not what I'm looking for. I will leave a link to a collection page of my site for you to check.

These are the active codes:

.product-meta__title.heading.h1 {
color: #444444;
}

.heading.h1 {
color: #444444;
}

Link to website:

https://iconicshop.com.br/collections/mais-vendidos

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

h1.product-meta__title.heading.h1 {
color: #444444;
}

[matteo_p]

Hi there,

This worked for the product pages, but not for the collections pages and featured products section. I would like all the product titles in the website to be this same color (but only the product titles). Do you have a solution?

[joeybab3]

For just products and collections use this:

.product-meta__title.heading.h1, .collection__title.heading.h1 {
    color: #444444;
}

 I think I just accidentally copied and pasted the same thing earlier...