Solved

How can I adjust the size of my website's announcement bar?

cr2024
Tourist
4 0 1

How can I change my website announcement bar size? I want to make it thinner and the font smaller. None of the solutions I've found in the other discussions have worked for me.

 

Thank you.

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2135 611 477

This is an accepted solution.

Hey @cr2024,

 

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.

 

14px is the font size, you can adjust it as you please.

<style>
p.announcement-bar__message.h5 span {
    font-size: 14px !important;
}

p.announcement-bar__message.h5 {
    padding: 5px 0 !important;
    min-height: auto !important;
}
</style> 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710597506838.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!

View solution in original post

Replies 7 (7)

suyash1
Shopify Partner
9301 1155 1495

@cr2024 - it will need custom css, can you share your page link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
cr2024
Tourist
4 0 1

https://b39579.myshopify.com/

 

Still currently working on the store

ThePrimeWeb
Shopify Partner
2135 611 477

Hey @cr2024,

 

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!
cr2024
Tourist
4 0 1

https://b39579.myshopify.com/

 

Still currently working on the store.

ThePrimeWeb
Shopify Partner
2135 611 477

This is an accepted solution.

Hey @cr2024,

 

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.

 

14px is the font size, you can adjust it as you please.

<style>
p.announcement-bar__message.h5 span {
    font-size: 14px !important;
}

p.announcement-bar__message.h5 {
    padding: 5px 0 !important;
    min-height: auto !important;
}
</style> 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710597506838.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!
cr2024
Tourist
4 0 1

Thank you so much

devcoders
Shopify Partner
145 19 34

Hi @cr2024 

If you share your store URL and password with me, I will check and provide you with the solution.

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!