Changing the color of a specific phrase/word in product title?

[WillIFM]

Hello!

Im looking for some help in regards to changing a specific word/phrase color in a product title and/or product heading text

Example:  

FRED WILDA "SCORZALITE / CHARLES DAVIS MINE" PRINT

https://inveniofineminerals.com/products/fred-wilda-wulfenite-pyromorphite-easthampton-ma-print

The product title is both the text of the button and the heading for the product page so I would like the color change to be present for both - Hope that makes sense - Thanks in advance!

[theycallmemakka]

Hi @WillIFM ,

This cannot be done my adding CSS. We will have to add meta field to make this possible.

[WillIFM]

Appreciate the reply - Can you point me to a tutorial on how I can do this? Thank you.

[theycallmemakka]

Are you comfortable with meta field? If yes, you can follow below steps to achieve this.

Step 1: Create a meta field that can store product title. This will store html version of the title example <span>FRED WILDA</span> "SCORZALITE / CHARLES DAVIS MINE" PRINT

Step 2: On the main-product template, replace the default title with the meta feild

Step 3: Update the CSS as per your need.

As you are using a different theme i cannot provide the exact codes. If you are not comfortable with meta field, do let me know. I can help you update the theme. 

I have been able to use this on my theme https://mangit.myshopify.com/products/copy-of-adidas-mens-postmove-mid-basketball-shoes

[WillIFM]

My theme allows me to add product metafields but I have never done it before - I do have experience with coding but I need assistance.

Thank you 

[Raj-webdesigner]

Can You Try My Code

[WillIFM]

I tired but it didn't work - I added it to the theme.css.liquid file and cleared my cached data. Any further help would be appreciated!

[Raj-webdesigner]

1) Open Edite Code

2) Find Theme.css

Add This Css in your Theme.css File

h1.h2.product-single__title:first-of-type::before {
    color: yellow;
    font-size: 26px;
    content: "FRED WILDA ";
}

[WillIFM]

I'm still looking for assistance with this issue - I can arrange a payment if you can help me!

[Raj-webdesigner]

I add This Css in Theme.css And This Work Perfectly Please Make Sure What's Problem Of This Code
See This Sceenshot --->> https://prnt.sc/uzQ4p-8LsWCK

Again Try This Code Add Theme.css 

h1.h2.product-single__title:first-of-type::before {
    color: yellow;
    font-size: 26px;
    content: "FRED WILDA ";
}