header announcement text to show over two lines
Hi! I would like my shopify debut header announcement text to show over two lines instead of on one long line.
Hey @CHB1,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
You can increase or reduce the max-width value to your liking.
<style>
p.announcement-bar__message {
max-width: 1050px !important;
margin: auto !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Thank you so much! I'm glad I can adjust the width but it's still not allowing me to separate the words into two lines. On desktop it looks like two lines but on mobile which is what most of my customers use to browse, it still shows as a lot of text on one block and looks cluttered. I rather want to put the discount message on a completely separate block. Is it perhaps possible to have two announcement texts? I want a tiny bit of white space between the two texts. Hope I'm making sense?
Desktop
Mobile
Can you search for announcement-bar.liquid in the theme code editor and see if you have this line
It should be similar not exactly the same, Then look for the "| escape" and remove that, then hit save.
Then you should be able to use <br> to break into the next line. The more <br> you put, the more lines it will break into.
Hi! I found announcement-bar under header.liquid and removed escape. But not sure where to input the <br>
The <br> you input in the theme editor on the text itself
It worked! Thank you!
Community Blog Articles
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025