Change color of product titles only - Dawn Theme

[Jodiebe]

I'd like to change the color of the Product Titles and make it different to the Product text. It baffles me that this isn't an option when setting the color scheme. Can anyone help? Thanks!

[BaileyPaserk · Accepted solution]

Hi Jodiebe!
This can be done. Do you want this to be the same color on all products? Or do you want a different color per product?

For all products to have the same product title color:
1) Open the theme customizer

2) go to the product template that these products use. (If you are not editing the "Default Product" template, then you need to assign the template to the products after you are done if you have not already done this. 

3) Select the "Product Information" section on the left side of the editor menu

4) Scroll down into this sections settings until you see "Custom CSS" and click on that arrow to open it. 

5) Enter the piece of code below into the css field. You can use this color code tool to pick any color you want: https://htmlcolorcodes.com/  

Make sure to place the # sign placed in of the 6 numbers you copy from the picker's code: 

.product__title h1 {
  color: #4acafa;
}

6) Click save. 

 

 

If you would like to have different colors based on the products you can follow similar steps but there is more to be done. 

First we need to create a custom color input setting for products:

1) go to admin Settings (bottom left) -> Custom Data -> click products -> add definition

2) Name it Title Color

3) For the Type select Color

4) All other settings here can stay default and click save.

5) After you click save, you will see what the metafield handle is to access your newly created setting. In my below example its "product.metafields.custom.title_color. Assigned to 0 products. Copy that metafield handle for later or open a new tab so we still have this. 

6) Go to products admin

7) go to your product you want to add the color title to. Scroll all the way down to here. Click there and it will open up a color picker and save your color. Click save.

7) Go back to theme customizer and open the product template

😎 Click on "add block" and add "custom liquid"

9) Click on the custom liquid block and add this code below. (This code cannot work in section Custom CSS so we do it as a liquid block)

{% style %}
.product__title h1{
color:{{product.metafields.custom.title_color}};
}
{% endstyle %}

9) Now this way, the code will change the color of the title depending on the product setting and you can still keep one template. 

[BaileyPaserk · Accepted solution]

Hi Jodiebe!
This can be done. Do you want this to be the same color on all products? Or do you want a different color per product?

For all products to have the same product title color:
1) Open the theme customizer

2) go to the product template that these products use. (If you are not editing the "Default Product" template, then you need to assign the template to the products after you are done if you have not already done this. 

3) Select the "Product Information" section on the left side of the editor menu

4) Scroll down into this sections settings until you see "Custom CSS" and click on that arrow to open it. 

5) Enter the piece of code below into the css field. You can use this color code tool to pick any color you want: https://htmlcolorcodes.com/  

Make sure to place the # sign placed in of the 6 numbers you copy from the picker's code: 

.product__title h1 {
  color: #4acafa;
}

6) Click save. 

 

 

If you would like to have different colors based on the products you can follow similar steps but there is more to be done. 

First we need to create a custom color input setting for products:

1) go to admin Settings (bottom left) -> Custom Data -> click products -> add definition

2) Name it Title Color

3) For the Type select Color

4) All other settings here can stay default and click save.

5) After you click save, you will see what the metafield handle is to access your newly created setting. In my below example its "product.metafields.custom.title_color. Assigned to 0 products. Copy that metafield handle for later or open a new tab so we still have this. 

6) Go to products admin

7) go to your product you want to add the color title to. Scroll all the way down to here. Click there and it will open up a color picker and save your color. Click save.

7) Go back to theme customizer and open the product template

😎 Click on "add block" and add "custom liquid"

9) Click on the custom liquid block and add this code below. (This code cannot work in section Custom CSS so we do it as a liquid block)

{% style %}
.product__title h1{
color:{{product.metafields.custom.title_color}};
}
{% endstyle %}

9) Now this way, the code will change the color of the title depending on the product setting and you can still keep one template. 

[Jodiebe]

Worked perfectly - thank you Bailey! If I want the H2 on my product pages to be the same color as H1, is it a similar bit of code? 

[BaileyPaserk · Accepted solution]

You're welcome! Yea although depending on your setup you might have to just do this instead. 

h2 {
  color: #4acafa;
}

 This is the part it might get more complicated, but you can see in my screenshot, you can right click and click "inspect element" when viewing your store as a user. This will open up this code view and you will see different names in class="" or you can do it just by tag name <h2>. Thats essentially the process you'd go through to find which class names or selectors you need to use. Let me know if you have any other questions. 

[Jodiebe]

That worked too - big thanks!

[BaileyPaserk]

Of course. Forgot to mention, 

to avoid having to write color styles twice, you can combine them with commas like this:

h1, h2 {
color: #4acafa;
}

[Jodiebe]

One more question, I promise! What about if I want to change the color of the main heading on the home page - the Featured Collection Heading? 

[BaileyPaserk]

h2{
color:#000000;

}
if that doesn’t work try adding !important before the semicolon.

also, have you seen that you can create color schemes and one of the options is to change the font color. You can add multiple color schemes too so you can do one for each section without needing to type the code.

[Jodiebe]

It worked with putting !important before the semicolon. Thank you!

Thank you Bailey! Yes, I know you can create colour schemes but if you choose a text colour then all the text is the same colour, including the headings. In my mind, you shouldn't need code to make headings one colour and text another. Or is that just me?!

[Vinsinfo]

@Jodiebe Please follow below steps to change the color of the product title. Let me know whether it is useful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Search "base.css" file.

4. If you want to change the product title color only for product page, paste below code at the bottom of the file.

.product .product__info-wrapper .product__title h1{
    color:#0000ff;
}

5. Else, if you want to change the product title color for the collection page, cart page, product page and search page, paste below code at the bottom of the file.

.product .product__title h1, .card__information .card__heading.h5 a.full-unstyled-link, .cart-item .cart-item__details .cart-item__name {
    color: #0000ff;
}

NOTE: You can change the color as per you need.

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.