How can I change the text colour of specific words on my page?

Treasora
New Member
10 0 0

Hi!

I would like to change specific text on my shopify webpage, however, I see that this cannot be done without CSS.

Could you guys help me in this?

Here is an example that I would like to change:

Treasora_1-1714495895295.png

 


I would like to change this to this color: #008ECC

Sincerely,

Treasora

Replies 8 (8)

sahilsharma9515
Shopify Partner
976 122 183

Hi @Treasora It can be done with editing the HTML element as well, It seems like this is some page in your store, so you have added the text on that page and there is a option in that page as well to see the HTML code of that page. You need to click on that HTML code, and add this code, on the text where you want to change the color.

 

style="color: #008ECC;"

  

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Treasora
New Member
10 0 0

Hi Sahil,

Thanks for your help, trying to figure it out now.
For example, I want to change this specific text:

Treasora_0-1714556621959.png

Having a bit of trouble of where to insert the code that you provided, it keeps saying error invalid json.
Do you know where exactly to put the code? 

Thanks in advance Sahil!

Kind Regards,

Treasora

sahilsharma9515
Shopify Partner
976 122 183

Hi @Treasora Yes it will show the error, because it is not the correct place where you need to add the code, Just give the screenshot where you have added that text in your store, I will specify you where you can add the code.

 

Here is the example:

 

If this is a page then you need to go in that page and click on this sign "</>" and you will find the code.

 

sahilsharma9515_0-1714557890635.png

<strong style="color: #008ECC;" > your text </strong>

 So your code will look like this.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Treasora
New Member
10 0 0

Hi Sahil,

Here is a screenshot of where I have added the text in the page:

Treasora_0-1714564374686.png

Treasora_1-1714564422536.png

In this section there is no HTML button as far as I can tell.

Any ideas? 

Thanks in advance!

Treasora
New Member
10 0 0

I did this and it seemed to work in the preview:

Treasora_2-1714565083988.png

However, when saving, it turns back to this: 

Treasora_3-1714565112636.png

 

sahilsharma9515
Shopify Partner
976 122 183

Hi @Treasora It will not work here as HTML code didn't use to work here, because it's defined in shopify as a normal rich text.

 

The better way to accomplish this is through JS code, if the text is coming from here.

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Treasora
New Member
10 0 0

Thanks Sahil, any idea how to do this? have no clue

 

sahilsharma9515
Shopify Partner
976 122 183

Hi @Treasora I can provide you the base code because for providing you the exact code I need the access of your store, but you edit the base code according to your theme file code and needs and it will work.

 

Here's an example of how you can change the text color of specific words with Javascript&colon;

 

 

// Replace 'target-word' with the class or identifier of the HTML element containing the target words
var targetElements = document.querySelectorAll('.target-word');

targetElements.forEach(function(element) {
  // Replace 'specific-word' with the specific word you want to change the color for
  var newText = element.innerHTML.replace(/specific-word/g, '<span class="highlighted-word">specific-word</span>');
  element.innerHTML = newText;
});

 

  • Add CSS Styling: Define CSS styles for the .highlighted-word class to specify the color you want to apply to the target words.

 

.highlighted-word {
  color: red; /* Change to the desired text color */
}

 

 

Note: Copy and pasting of this code will not do anything and it will not work, this is the base code and you need to edit it according to your theme file codes.

 

Also you need to add the code in your theme.liquid file.

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️