How to change a few words color in Header?

Solved
Acid2Rain
Pathfinder
140 0 45

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)
diego_ezfy
Shopify Partner
2880 549 833

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

 

View solution in original post

Replies 2 (2)
dmwwebartisan
Shopify Partner
12215 2537 3661
diego_ezfy
Shopify Partner
2880 549 833

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