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

[Treasora]

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:

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

Sincerely,

Treasora

[sahilsharma9515]

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

[Treasora]

Hi Sahil,

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

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]

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.

<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

[Treasora]

Hi Sahil,

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

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

Any ideas? 

Thanks in advance!

[Treasora]

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

However, when saving, it turns back to this: 

[sahilsharma9515]

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

[Treasora]

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

[sahilsharma9515]

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

[Levi]

Hi Treasora,

I was in the same situation a couple of weeks ago, so I decided to build my own app to solve this. It made my life a lot easier, and I’m sure it will help you too. Plus, it’s free! 🙂

You can check it out here: https://apps.shopify.com/pulsar

Best,
Levi