Bold a part of my announcement bar

Masaru
Tourist
14 0 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!

0 Likes
Proficient
Shopify Expert
5 0 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 <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

Masaru
Tourist
14 0 1

I'm on Brooklyn..

 

 

I pasted 

<p class="announcement-bar__message"><strong>-50% OFF</strong> On All Orders</p>

 

but doesn't work...

0 Likes
achieveapplabs
Shopify Partner
497 39 78

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;
}

 

 

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
0 Likes
Masaru
Tourist
14 0 1

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

 

would it be possible ?

0 Likes
achieveapplabs
Shopify Partner
497 39 78

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.

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
0 Likes
Masaru
Tourist
14 0 1

I typed 

 

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

 

on my theme.scss.liquid

and it didn't work, any suggest ?

0 Likes
achieveapplabs
Shopify Partner
497 39 78

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;
}

 

 

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
0 Likes
Masaru
Tourist
14 0 1

where do I need to paste for the second one ?

0 Likes
Masaru
Tourist
14 0 1

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

0 Likes