How to change announcement bar font type on Brooklyn Theme

sebastianp
Tourist
7 0 6

Hello,

I would like to change the announcement header font type to Montserrat. My theme is Brooklyn! 

Any solutions?

Thank you!

Pallavi
Shopify Expert
2235 370 484

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Pallavi
Shopify Expert
2235 370 484

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >timber.scss.css and paste this at the bottom of the file:

p.announcement-bar__message {
font-family: 'Montserrat'!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
JerryLuu
Shopify Partner
11 1 4

Greetings @sebastianp,

I hope you are doing well with your online store!

I came across your post and I think I can help you with your announcement bar.

The simplest way to change the font type (or font-family) of your announcement bar is to add the below code to the very bottom of your theme.scss.liquid file:

 

 

 

.announcement-bar{
	font-family: 'Montserrat', "sans-serif";
    font-size: 16px;
}

 

 

 

Screenshot (2).png

  • font-family is the element to set your font family
  • font-size is the element to set the size of the font, change it as your preference.

If you don’t know where to access the file, in your Shopify admin, go to Online Store > Themes > Actions > Edit Code, then search for the file with the name “theme.scss.liquid”.

And here is the result after applying the code:

Screenshot.png

 

Screenshot (1).png

 

It’s also very safe for implementation as if you don’t want to use the code anymore, simply remove it from the file and save your changes.

I hope this will help you!

If you are interested in reading more about Shopify knowledge, particularly, check out the efficient ways to use your announcement bar for increasing conversion rate.

Best regards,

Jerry

HappyPoints | Shopify Tasks & Theme Tweaks
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To request a Shopify task, visit happypoints.io
0 Likes