Dawn announcement bar corner radius slider.

Breaward · ‎02-27-2024

Hi, is there any code to add a section that allows me to customize the announcement bar corner radius I want to round the corners.

ThePrimeWeb · ‎02-27-2024

Hey @Breaward,

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.

<style>
.custom-announcement-bar .custom-announcement-bar__message {
    border-radius: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 10px !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? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-27-2024

Hey @Breaward,

Can you share the link to your store and also maybe make a mockup and show me how exactly you want them cornered?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

Breaward · ‎02-27-2024

Okay this is the link: https://14fb05-1b.myshopify.com/a/gempages?version=v7&shop_id=502433879739597854&theme_page_id=50243...

this is how I want the corners rounded as well as the spacing.

ThePrimeWeb · ‎02-27-2024

What's the password to enter the store?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

Breaward · ‎02-27-2024

breaward66

ThePrimeWeb · ‎02-27-2024

Hey @Breaward,

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.

<style>
.custom-announcement-bar .custom-announcement-bar__message {
    border-radius: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 10px !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? [email protected] or check out the website
Check out our interview with Shopify!

Breaward · ‎02-27-2024

Thank you, it worked is there a way to help me with the transparent custom header on top of the image as well as animation. https://www.rhodeskin.com/

Dawn announcement bar corner radius slider.