Changing the color of a current word

[ChoobShop]

Hey there, 

I hope you are doing well. I have a small issue with the design of my homepage. 

I wish to change the color only of one word. I will attach a screenshot of the exact way that I want it. 

Can I do it with a custom CSS?

I really appreciate any help you can provide.

Best,
Choob Shop 

 

 

[WalkYourStyle]

Can you please provide us a picture of the homepage's customization, specifically the image section with the text?

[ChoobShop]

Hey! I think I need a clarification on what part you need because the text and image sections are in two different sections? 

[ProtoMan44]

@ChoobShop hey, thanks for posting here.
for it you need to put in span tag or any other to target .

or it will posible with custom js.
 can you please share the link to inspect it, thanks.

[ChoobShop]

Yea, sure! 
https://www.choobshopbg.com/en
The pass is: 112233

[WalkYourStyle]

Instructions

1. Go to 'Online Store' -> Themes -> Customize

2. Go to the Image Banner Section and click on the heading block

3. Surround the wooden word with the span element like this: 

4. Go to your Active Theme and click on the 3 dots (...) -> Edit Code

5. Inside the Assets Folder locate the file 'base.css'

6. At the bottom of the file paste the below code

#Banner-template--21622885351751__image_banner .banner__heading span{
   color: green;
}

[Moeed]

Hey @ChoobShop 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<script>
const bannerHeading = document.querySelector('.banner__heading');
if (bannerHeading) {
    const text = bannerHeading.innerHTML;
    const replacedText = text.replace(/wooden/g, '<span style="color: #63cd35;">wooden</span>');
    bannerHeading.innerHTML = replacedText;
}
</script>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed