How can I bold a section of my announcement bar on betterjoy.co?

Technical Q&A
1

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!

2

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

    {{ section.settings.message_text | escape }}

  • Replace what you deleted with this: “-50% OFF 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 will become bold

1 Like
3

I’m on Brooklyn..

I pasted

-50% OFF On All Orders

but doesn’t work…

4

HTML tag for Bold is , try that if not check your CSS files and add a class:

.announcement-bar__message > strong {
  font-weight: bold;
}
5

Thanks but I would just like to bold the “-50% OFF !”

would it be possible ?

6

Yes first try and replace strong with 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.

7

I typed

.announcement-bar__message >-50% OFF ! {font-weight: bold;}

on my theme.scss.liquid

and it didn’t work, any suggest ?

8

What does the HTML look like, still like this?


**-50% OFF** On All Orders

I recommend you first try and replace tags with tags:


**-50% OFF** On All Orders

If that still does not work add this to your theme.scss.liquid

.announcement-bar__message > b {
  font-weight: bold;
}
9

where do I need to paste for the second one ?

10

in the theme.scss.liquid or the timber.scss.liquid or which one ??

11

Dear @Masaru

Hope the following suggestion will help you

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code.
  • After that in the Assets folder, click to open your theme.scss.liquid file.
  • Go to the very bottom of this file and paste the following code:
/* Start */
.announcement-bar__message > b { font-weight: bold; }
/* End*/
  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.
1 Like