Solved

header announcement text to show over two lines

CHB1
New Member
5 0 0

Hi! I would like my shopify debut header announcement text to show over two lines instead of on one long line.

CHB1_0-1716570981064.png

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 614 488

This is an accepted solution.

The <br> you input in the theme editor on the text itself

 

ThePrimeWeb_0-1716647477386.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2138 614 488

Hey @CHB1,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
CHB1
New Member
5 0 0
ThePrimeWeb
Shopify Partner
2138 614 488

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.

ThePrimeWeb_0-1716574402771.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
CHB1
New Member
5 0 0

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

CHB1_2-1716630013480.png

Mobile

CHB1_1-1716629906212.png

 

 

ThePrimeWeb
Shopify Partner
2138 614 488

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.

 

ThePrimeWeb_0-1716632354363.png

 

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.

 

ThePrimeWeb_1-1716632432471.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
CHB1
New Member
5 0 0

Hi! I found announcement-bar under header.liquid and removed escape.  But not sure where to input the <br>

CHB1_0-1716645265289.png

 

ThePrimeWeb
Shopify Partner
2138 614 488

This is an accepted solution.

The <br> you input in the theme editor on the text itself

 

ThePrimeWeb_0-1716647477386.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
CHB1
New Member
5 0 0

It worked! Thank you!

CHB1_0-1716653031947.png