How can I make my announcement bar text bold and larger?

Store Design

Topic summary

A Shopify store owner wants to make their announcement bar text bold and larger. Multiple solutions providers offer the same CSS-based approach:

Solution Steps:

  1. Navigate to: Online Store → Themes → Actions → Edit Code
  2. Locate the base.css file in the Assets folder
  3. Add CSS code at the bottom of the file

Recommended CSS Code:

p.announcement-bar__message.center.h5 {
  font-weight: bold;
  font-size: 120%; /* or 18px/20px */
}

Customization:
Users can adjust font-size and font-weight values to fine-tune the appearance. All respondents provide consistent guidance with minor variations in specific pixel sizes (18px-20px) or percentage values (120%). Screenshots are included showing where to find the theme code editor.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

How do i make the text on my shop announcement bar in bold and bigger font size?

shop url: https://c1e46d.myshopify.com/collections/all

yu.png
yu.png1490×191 13.5 KB

2

Please put in below code to the last line of base.css

by going to your store admin > Online Store > Themes > Actions > Edit code > Assets folder. (https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code)

p.announcement-bar__message.center.h5 {
font-size: 120%;
font-weight: 900;
}

You can play with font-size and font-weight to fine tune it.

1 Like
3

Hi @suoshie

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on head file base.css
For example :

PageFlyVictor_0-1676942923833.png
PageFlyVictor_0-1676942923833.png1600×766 151 KB

p.announcement-bar__message.center.h5 {

    font-weight: bold;

    font-size: 20px;

}

Hope this answer helps.

Best regards,

Victor | PageFly

4

Hello @suoshie ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1676946984213.png
GemPages_0-1676946984213.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1676947005791.png
GemPages_1-1676947005791.png1591×913 74.3 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

5

@suoshie

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
p.announcement-bar__message.center.h5 {
    font-weight: bold;
    font-size: 18px;
}