Changing the color of a specific word in a paragraph

Technical Q&A
,

Topic summary

A user seeks to change the color of specific words (like “TRUE”) within paragraph text on their website.

Solution Provided:

  • Edit the theme’s global.js file by adding JavaScript code
  • The code uses document.querySelector to target specific paragraphs
  • Wraps target words in <span> tags with inline color styling
  • Includes conditional logic for different screen sizes (mobile vs desktop)

Implementation Challenge:
The original poster reports difficulty locating the global.js file in their theme.

Follow-up Response:
A more comprehensive code snippet was provided that handles responsive design (screen width < 756px) and replaces entire paragraph content with formatted HTML, highlighting words like “TRUE,” “INSPIRING,” “BUILD,” “KEY,” and “LAST” in the desired color.

Status: The solution involves custom JavaScript manipulation rather than pure CSS. The discussion remains open as the user works through file location issues.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hello,

as the title suggests, I’d like to know how I could change the color of a specific word or sentence in a simple paragraph.

I have attached a screenshot of 1 of the paragraphs on my website, e.g. the word ‘‘TRUE’’ in that paragraph, I’d like to be red colored.

I’d appreciate any help!

website url: jasaoslaj.com - specifically optimized for mobile

Screenshot_20230726_180904_Chrome.jpg
Screenshot_20230726_180904_Chrome.jpg1080×1776 258 KB

2

Hi @jasa11 ,

Go to Themes → Edit code.

Search global.js. file

Add these lines of code at the end of the file:

setInterval(()=> {
    changeColor()
}, 10)
function changeColor () {
    let paragraph = document.querySelector("#shopify-section-66f0799f-7a42-4714-84ff-d2b2d04e948c > div > div > div > div.rich-text__text.featured_text > p:nth-child(5)");
    if(window.innerWidth < 500){
        paragraph.innerHTML = "<p>You will go through an incomparable experience that will help you unleash your <span style='color: red'>TRUE</span> potential & most importantly transform you into a disciplined hard-working machine!</p>"
    }
    else {
        paragraph.innerText = "You will go through an incomparable experience that will help you unleash your TRUE potential & most importantly transform you into a disciplined hard-working machine!"
    }
}

You will see the result like this:

When screen size < 500px (mobile device):

view (66).png
view (66).png490×764 142 KB

And screen size > 500px:

view (67).png
view (67).png583×905 255 KB

Good luck @jasa11 !

3

Hi,

I’m having trouble finding the global.js file.

Doesn’t pop up when I search for it

4

Hi @jasa11 ,

setInterval(()=> {
    changeColor()
}, 10)
function changeColor () {
    let paragraph = document.querySelector("#shopify-section-66f0799f-7a42-4714-84ff-d2b2d04e948c > div > div > div > div.rich-text__text.featured_text");
    if(window.innerWidth < 756){
        paragraph.innerHTML = `

Alright, so the issue with most fitness services nowadays is that they simply look way too bland and don't have that INSPIRING feel to it.

Seems like everyone is focusing way too much on selling you some mediocre ''gain muscle fast'' scheme that ends up benefiting you for a few months before ultimately going back to square one.

Now of course UEX offers you exclusive workouts you never tried before, customized meal plans, fast and modernized database and many other amazing features,

And while all of that is crucial for a successful fitness program,

What truly defines it and makes it stand out is the fact it focuses on long-term growth & at the same time provides a unique experience that will help you BUILD up that discipline to always stay on track without ever losing focus!

And that right there is the KEY to unlocking genuine and long-lasting progress.

The goal at the end of the day will always be to help you unlock your TRUE potential & get you towards your goals without any bullsh*tting

Now if you're looking for something that will truly LAST & not waste your precious time, then stop waiting around and get to it.

And believe me...

This, is the real deal.

`
    }
    else {
        paragraph.innerHTML = `

Alright, so the issue with most fitness services nowadays is that they simply look way too bland and don't have that INSPIRING feel to it.

Seems like everyone is focusing way too much on selling you some mediocre ''gain muscle fast'' scheme that ends up benefiting you for a few months before ultimately going back to square one.

Now of course UEX offers you exclusive workouts you never tried before, customized meal plans, fast and modernized database and many other amazing features,

And while all of that is crucial for a successful fitness program,

What truly defines it and makes it stand out is the fact it focuses on long-term growth & at the same time provides a unique experience that will help you BUILD up that discipline to always stay on track without ever losing focus!

And that right there is the KEY to unlocking genuine and long-lasting progress.

The goal at the end of the day will always be to help you unlock your TRUE potential & get you towards your goals without any bullsh*tting

Now if you're looking for something that will truly LAST & not waste your precious time, then stop waiting around and get to it.

And believe me...

This, is the real deal.

`
    }
}
1 Like