Hi I’m using the Colors Theme.
How can I make the announcement bar text bigger?
Topic summary
Goal: Increase the announcement bar (top notification banner) text size in the Shopify Colors theme.
What happened:
- Initial suggestion: Add CSS to base.css: .announcement-bar__message { font-size: 20px !important }. User couldn’t find base.css.
- Alternatives proposed: theme.scss or theme.css. User’s Assets showed colors.css.liquid; adding the first rule there didn’t work.
- Fix provided: Use a more specific selector targeting the announcement bar text:
#shopify-section-announcement-bar > div > div.text > p { font-size: 70px !important } - User confirmed this worked.
How to apply (outcome):
- Admin > Online Store > Themes > Actions > Edit code > Assets > open colors.css.liquid (or the main CSS file).
- Paste the rule above and adjust the font-size value to the desired size.
Status: Resolved. Attachments (asset list and screenshot) were shared but not essential to the solution.
Hi @burak07
Just do the following. Adjust the “20px” to the size you want.
-
Go to your Admin store > Online store > Themes > Click Actions > Edit code
-
Open the base.css file under your Asset folder.
.announcement-bar__message {
font-size: 20px !important
}
I don’t have base.css file under Asset folder.
Oh. Theme.scss or Theme.css
May I have you website?
It says colors.css but try placing the code to your colors.css.liquid.
Sorry about that, I am calling the wrong one. Please replace the code with the code below.
#shopify-section-announcement-bar > div > div.text > p {
font-size: 70px !important
}
It did work! Thank you so much!
1 Like