How Do I Change The Font Size In The Announcement Bar?

Shopify Discussion

Topic summary

Goal: Increase the font size of the Shopify announcement bar.

Guidance provided:

  • Navigate to Online Store > Edit Code and open theme.liquid (main layout file). Add custom code near the closing tag. One reply references this approach but does not include the actual code snippet; a result image is shown instead.
  • Alternatively, edit theme.liquid or base.css (theme stylesheet) and add CSS targeting the announcement bar message:
    p.announcement-bar__message.h5 { font-size: 22px; }
    This sets the announcement text to 22px, with a screenshot illustrating the outcome.

Notes:

  • Images were included to demonstrate the visual result; the first reply’s code content is missing in the post.
  • Technical terms: theme.liquid is the main layout template; base.css is the primary stylesheet where custom CSS can be added.

Status:

  • No confirmation from the original poster on whether the solutions worked. The thread appears open with actionable steps provided but no verified resolution.
Summarized with AI on January 17. AI used: gpt-5.
1

Hey guys, how do I change the size of the font in my announcement bar? I would like to make it bigger. Thank you!

2

Hey @Simon159

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1695445476544.png
Moeed_0-1695445476544.png1891×892 197 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @Simon159

Follow these Steps:

Go to Online Store Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above tag

p.announcement-bar__message.h5 {
    font-size: 22px;
}

syedsumaimaly_0-1695904960265.png

If I managed to help you then, don’t forget to Like it and Mark it as Solutions