Re: change announcement bar background

adorcollective · ‎06-13-2024

Hello, I have my site wich I edited in the past so the header backround is transparent. Now I want to add an announcement bar above the header but the background is transparent too. I want to make the background of the announcement bar black but the header background still remains transparent. In the code in "theme liquid" I spotted that it take it as a group but I don't know much coding so it would be easier if you can help. Thank you.

This is the website:

www.adorcollective.com

pw: geicay

Moeed · ‎06-13-2024

Hey @adorcollective

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.page-width.utility-bar__grid {
    background: black !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

View solution in original post

Moeed · ‎06-13-2024

Hey @adorcollective

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.page-width.utility-bar__grid {
    background: black !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

gravitygirl12 · ‎06-18-2024

Hi,

I used this code for my announcement bar, but the bar doesn't stretch across the entire page. Any tips to fix this? See screenshot:

Dan-From-Ryviu · ‎06-13-2024

Hi @adorcollective

Please add this code to theme.liquid file, after <head>

<style>
.utility-bar { background: #000; height: auto; }
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Rahul_dhiman · ‎06-13-2024

Hello @adorcollective ,

Go to online store ---------> themes --------------> actions -------------> theme.liquid
add this CSS at the very end above the </body > tag

<style>
.page-width.utility-bar__grid {
    background: black !important;
}
</style>

Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here

BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

Re: change announcement bar background

change announcement bar background

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

Contact here

PWC: Customer Accounts & Pages

Community Blog Articles

Re: change announcement bar background

change announcement bar background

- Need a Shopify Specialist? Chat on WhatsApp ✅- Get a quick Shopify quote – Click here!- Custom Design | Advanced Coding | Store Modifications

- Need a Shopify Specialist? Chat on WhatsApp ✅- Get a quick Shopify quote – Click here!- Custom Design | Advanced Coding | Store Modifications

Contact here

PWC: Customer Accounts & Pages

Community Blog Articles

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications