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

cr2024 · ‎03-16-2024

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.

ThePrimeWeb · ‎03-16-2024

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.

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

suyash1 · ‎03-16-2024

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

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

cr2024 · ‎03-16-2024

https://b39579.myshopify.com/

Still currently working on the store

ThePrimeWeb · ‎03-16-2024

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 · ‎03-16-2024

https://b39579.myshopify.com/

Still currently working on the store.

ThePrimeWeb · ‎03-16-2024

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.

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 · ‎03-16-2024

Thank you so much

devcoders · ‎03-16-2024

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
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

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