Liquid, JavaScript, themes, sales channels
Site: betterjoy.co
I would like to bold just the "-50% OFF" of the announcement bar on the top.
What would be the code to do that. (I should paste it on the theme.scss.liquid right ?) (I use the theme Brooklyn)
Thank you!
Hey @Masaru if you're using the Debut theme you can follow the steps below:
- Open header.liquid file in the Code Editor
- Search for announcement-bar__message
- Delete the curly braces and everything inside <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
- Replace what you deleted with this: "<strong>-50% OFF</strong> On All Orders"
- Save and you're good to go
By doing this you'll only be able to edit the announcement bar text in the code editor, also anything you place inside of <strong></strong> will become bold
I'm on Brooklyn..
I pasted
<p class="announcement-bar__message"><strong>-50% OFF</strong> On All Orders</p>
but doesn't work...
HTML tag for Bold is <b></b>, try that if not check your CSS files and add a class:
.announcement-bar__message > strong {
font-weight: bold;
}
Thanks but I would just like to bold the "-50% OFF !"
would it be possible ?
Yes first try and replace strong with <b> tags. If you still don’t have the text bold than use the CSS. It will only target what’s in the strong tags. Hope you get it always here if you need more help.
I typed
.announcement-bar__message ><b>-50% OFF !</b> {font-weight: bold;}
on my theme.scss.liquid
and it didn't work, any suggest ?
What does the HTML look like, still like this?
<p class="announcement-bar__message"><strong>-50% OFF</strong> On All Orders</p>
I recommend you first try and replace <strong /> tags with <b /> tags:
<p class="announcement-bar__message"><b>-50% OFF</b> On All Orders</p>
If that still does not work add this to your theme.scss.liquid
.announcement-bar__message > b {
font-weight: bold;
}
where do I need to paste for the second one ?
in the theme.scss.liquid or the timber.scss.liquid or which one ??
Dear @Masaru
Hope the following suggestion will help you
/* Start */
.announcement-bar__message > b { font-weight: bold; }
/* End*/
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024