Re: Change to product title color

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

matteo_p
Excursionist
59 0 7

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?

Replies 12 (12)

joeybab3
Shopify Partner
130 16 32

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".

Screenshot 2022-12-01 at 3.33.51 PM.png

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
Tourist
5 2 0

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

Nahla
joeybab3
Shopify Partner
130 16 32

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
Excursionist
59 0 7

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

joeybab3
Shopify Partner
130 16 32

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

joeybab3
Shopify Partner
130 16 32

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

.product-meta__title.heading.h1 {
    color: #444444;
}
matteo_p
Excursionist
59 0 7

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

joeybab3
Shopify Partner
130 16 32

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
Excursionist
59 0 7

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
Shopify Partner
5833 1058 1396

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;
}

ZestardTech_0-1669963980083.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
matteo_p
Excursionist
59 0 7

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
Shopify Partner
130 16 32

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...