Hello, I would like to change the color of one word in a product title. I’ve searched the internet and haven’t found a solution. Could any of you help me? I use debutify theme
Topic summary
Goal: change the color of a single word within a Shopify product title (Debutify theme), e.g., only “Laces” in “Slip On Laces.”
Initial attempts: CSS targeting h1.product__title was suggested (color red/orange), but this colors the entire title. A ::first-letter approach was also proposed, which affects only the first letter and didn’t meet the need.
Clarification: the requester wants just one specific word styled differently, not the whole title.
Latest solution: Debutify support provided a jQuery-based method. Add a script in theme.liquid (before ) that selects the title element via its class or ID, then replaces the target word with the same text wrapped in a span having an inline color style. The code runs on window load and requires replacing placeholders with the correct selector, exact word, and desired color.
Status: no confirmation from the requester that the jQuery solution worked. Images/screenshots accompany steps but are not essential to understand the approach.
1 Like
Hello There,
Admin go to online store → themes → actions → edit code
Find Asset >base.css and paste this at the top of the file:
h1.product__title {
color: red;
}
Hi @Voightas
This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css
h1.product__title {
color: orange !important;
}
Hope you find my answer helpful!
Best regards,
Victor | PageFly
Hi, thanks! But i want to change only one word in title, not all of it.
This code changes the hole title. I want to change only one word
You can try this code
Online Store ->Theme ->Edit code
Assets ->Base.css
h1.product__title::first-letter {
color: orange !important;
}
Unfortunately, this doesn’t change anything about my product title. In the word Slip On Laces, I would like the word - Laces - to be displayed in a different color. Is it possible at all?
Regarding this, I recommend you seek professional help or use a page builder to do this.
Hey @Voightas ,
To change the color of a specific word of an element, please add the code below, replacing highlighted elements of the code with actual data to the file “theme.liquid”.
<script>
$( window ).load(function() {
let text = $("ADD CLASS NAME OR ID HERE").html().replace(/THE SPECIFIC TEXT/g, '<span style="color:COLOR HERE">SPECIFIC TEXT</span>');
$("ADD CLASS NAME OR ID HERE").html(text)
});
</script>
You can add this before the closing tag on the file.
1 Like