How to change a few words color in Header?

Solved
Acid2Rain
Explorer
53 0 18

Hello, I was wondering If I can change the color of "No More" In my Heading to a different color: Hex: #FB6107

 

Capture.JPG

 Website: www.ecogarby.com

Password: zzz

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2300 413 542

This is an accepted solution.

@Acid2Rain,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function changeTextColor(){
var color = "#FB6107";

var $el = document.querySelector(`.image-with-text-overlay__heading`);

if (!$el){
    return;
}

var text = $el.textContent;
var updated = text.replace("No More", `<span style="color:${color};">No More</span>`)

$el.innerHTML = updated

}

changeTextColor();

</script>


This is not the most ideal way to go about it but it will resolve your problem.

Kind regards,
Diego

 

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 2 (2)
dmwwebartisan
Shopify Partner
9824 2236 3073

@Acid2Rain 

Please check following URL for help

https://www.quora.com/How-can-I-change-the-color-of-one-word-in-HTML

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
diego_ezfy
Shopify Partner
2300 413 542

This is an accepted solution.

@Acid2Rain,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function changeTextColor(){
var color = "#FB6107";

var $el = document.querySelector(`.image-with-text-overlay__heading`);

if (!$el){
    return;
}

var text = $el.textContent;
var updated = text.replace("No More", `<span style="color:${color};">No More</span>`)

$el.innerHTML = updated

}

changeTextColor();

</script>


This is not the most ideal way to go about it but it will resolve your problem.

Kind regards,
Diego

 

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post