Solved

Change utility bar and announcement bar color for dawn theme

kay_png
Tourist
10 0 3

Hi, I need help with changing the utility bar/announcement bar color to black with white text. I tried adjusting the scheme colors but nothing seems to be happening.

 

Is there a way I can change the whole strip to black? 

 

kay_png_0-1712256649435.png

 

Currently, this is what's in my announcement bar's custom css section:

kay_png_1-1712256794589.png

 

Accepted Solutions (2)

PageFly-Henry
Shopify Partner
1136 322 276

This is an accepted solution.

Hi @kay_png 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


.page-width.utility-bar__grid.utility-bar__grid--3-col {

    background: black !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Sweet_Savior_3
Shopify Partner
1253 99 123

This is an accepted solution.

Hello @kay_png 

 

Add the below CSS in base.css file.

body .utility-bar__grid.utility-bar__grid--3-col {
background: #000;
}

 

OUTPUT:

Sweet_Savior_3_0-1712331416685.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!

View solution in original post

Replies 6 (6)

Sweet_Savior_3
Shopify Partner
1253 99 123

Hello @kay_png 

 

Please share the store link.

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
kay_png
Tourist
10 0 3
Sweet_Savior_3
Shopify Partner
1253 99 123

This is an accepted solution.

Hello @kay_png 

 

Add the below CSS in base.css file.

body .utility-bar__grid.utility-bar__grid--3-col {
background: #000;
}

 

OUTPUT:

Sweet_Savior_3_0-1712331416685.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
kay_png
Tourist
10 0 3

It worked! Thank you! 

PageFly-Henry
Shopify Partner
1136 322 276

This is an accepted solution.

Hi @kay_png 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


.page-width.utility-bar__grid.utility-bar__grid--3-col {

    background: black !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

kay_png
Tourist
10 0 3

It worked! Thank you!