Solved

Change color of product titles only - Dawn Theme

Jodiebe
Excursionist
16 0 3

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!

Accepted Solutions (2)

BaileyPaserk
Shopify Partner
115 9 27

This is an 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

BaileyPaserk_0-1713417218112.png

 

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

BaileyPaserk_1-1713417346824.png

 

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: 

BaileyPaserk_2-1713417587049.png

 

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

BaileyPaserk_3-1713417978729.png

 

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.

BaileyPaserk_4-1713418173509.png

 

 

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

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

BaileyPaserk_5-1713418628632.png

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. 

 

Bailey Paserk

View solution in original post

BaileyPaserk
Shopify Partner
115 9 27

This is an 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. 

BaileyPaserk_0-1713422094212.png

 

 

Bailey Paserk

View solution in original post

Replies 9 (9)

BaileyPaserk
Shopify Partner
115 9 27

This is an 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

BaileyPaserk_0-1713417218112.png

 

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

BaileyPaserk_1-1713417346824.png

 

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: 

BaileyPaserk_2-1713417587049.png

 

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

BaileyPaserk_3-1713417978729.png

 

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.

BaileyPaserk_4-1713418173509.png

 

 

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

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

BaileyPaserk_5-1713418628632.png

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. 

 

Bailey Paserk
Jodiebe
Excursionist
16 0 3

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
Shopify Partner
115 9 27

This is an 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. 

BaileyPaserk_0-1713422094212.png

 

 

Bailey Paserk
Jodiebe
Excursionist
16 0 3

That worked too - big thanks!

BaileyPaserk
Shopify Partner
115 9 27

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

Bailey Paserk
Jodiebe
Excursionist
16 0 3

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
Shopify Partner
115 9 27

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.

Bailey Paserk
Jodiebe
Excursionist
16 0 3

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
Shopify Partner
302 112 107

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

 

Vinsinfo_3-1713421199685.png

 

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

 

Vinsinfo_4-1713421211086.png

 

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

 

Result will be like,

Vinsinfo_0-1713421169886.png
 
Vinsinfo_2-1713421187583.png

Vinsinfo_1-1713421176842.png
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support