The announcement bar is a great way to display important messages like promotions, free shipping offers, or updates on your Shopify store. However, sometimes the default font size may be too small or too large for your needs.
The basic free Shopify themes don’t have an option to tweak the announcement bar font size separately from the rest of the website. Fortunately, you can customize the font size easily using a small CSS tweak.
Method 1: Change The Font Size Directly On The Announcement Bar Section
This option is simple and avoids editing the theme code. Easily add the following code to the Custom CSS setting included in the announcement bar options.
p.announcement-bar__message.h5 {
font-size: 2rem; /*Change the number to your preferred size*/
}Note: If the code doesn’t work, try replacing “h5” with other headings from “h1” to “h6” until you find the one that works.
This method is the simplest and works great if you only need to customize one announcement bar. If you want to modify several bars with just one tweak, follow the next method.
Method 2: Add Custom CSS To The Global Theme Settings
If you have several announcement bars and want to customize them all with the same changes, add the code to the Theme Settings Custom CSS option instead.
You can find it by clicking the gear icon in the Theme Editor’s left sidebar menu and going all the way down until you find the Custom CSS option.
Add the following code and all your announcement bars will be adjusted instantly.
p.announcement-bar__message.h5 {
font-size: 2rem; /*Change the number to your preferred size*/
}Adjusting your announcement bar font size is a small tweak that can make a big difference in your store’s appearance and readability. Whether you use theme settings or custom CSS, you now have full control over how your message is displayed.
Need more help? Feel free to reach out!