Hi, could anyone help me the change the weight of the word “GRIND” to bold without changing the other words as well?
On the hero banner
https://marymill.amsterdam/
Topic summary
Goal: make only the word “GRIND” bold in the hero banner of a Shopify store.
Key guidance:
- CSS cannot target an arbitrary single word by itself. The word should be wrapped in its own HTML element (e.g., , , or ), then styled via CSS. Using JavaScript is possible but considered overkill for this.
- After wrapping, target that element/class with CSS. Example provided: .hero__content .text__standard .standard__heading strong { font-weight: 900 !important; -webkit-text-stroke: 1px !important; }, which assumes “GRIND” is wrapped in .
Implementation advice:
- Prefer adding CSS via the theme’s Custom CSS setting rather than editing theme files, to avoid upgrade issues. If editing files, back up the theme and know how to roll back.
- One suggestion was to insert code in theme.liquid above , but the actual code snippet was missing in the post.
Status:
- No confirmation from the original poster that the change worked; outcome unverified.
Notes:
- Screenshots were shared but not essential to the solution.
1 Like
CSS can’t target single words, you need to change the underlying html to at minium wrap the word in a tag, or even an tag.
Then CSS can target just that word by targeting that element, or a class you put on that element.
While it’s possible to do this with javascript it’s massive overkill and doesn’t address the underlying process problem of having better control over the cotnent/design/copy.
If you need this customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Hi @Daniel19901 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
1 Like
@Daniel19901 for any given CSS band-aid solutions try to use a custom-css setting first before modifying files code directly.
This can avoid inadvertently breaking a theme or complicating future version. upgrades
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
The custom-css setting does not need the surrounding opening and closing style tags: …
If you must modify files directly always make a back up duplicate of the theme first.
And learn how to rollback eligible files
.hero__content .text__standard .standard__heading strong {
font-weight: 900 !important;
-webkit-text-stroke: 1px !important;
}
Can you add this code to last line file theme.css @Daniel19901
1 Like