How To Change Font Size Of Announcement Bar Text?

3 0 1

I would to increase the font size of my announcement bar, but I can't seem to find where to do that. I've read through the previous threads on this issue, but can't locate the styles.css anywhere.

Thanks in advance.

Replies 5 (5)
Shopify Partner
7865 1785 3020

Hi @mbbrennan ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

.header-bar__module.header-bar__message {
    font-size: 20px;

Note: You can change value to fit your store

Hope my answer will help you.

Best regards,

Victor | PageFly

1 0 0

I'd like to report that I entered this code into my theme.liquid before </body> and no change occured. I tested 20px and 10px and no change.

Shopify Partner
4263 985 1202

Hi @mbbrennan ,

I understand that you want to increase the font size of my announcement bar.

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "theme.scss.liquid" or "styles.scss.liquid" file, depending on which file your theme uses to store its CSS styles. (better you put in the theme.scss folder since it’s a header).
  4. At the bottom of the file, add the following CSS code:


.header-bar {
    font-size: medium;


  • You can also change any size you want. 
  • Result.
  • Rose_Dim_0-1682972196207.png
  • I hope it help.
Please don't forget to 



Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Shopify Partner
15736 2353 3051

Hello @mbbrennan 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.header-bar {
    font-size: 18px !important;


Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Shopify Partner
784 105 105

Hi @mbbrennan 


1. Go to the online store 

2. Edit the code and base.css file below paste the code 

.header-bar__module.header-bar__message {
 font-size: 20px;
Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here