Annoncement bar - Change background to black & text to white.

Solved

Annoncement bar - Change background to black & text to white.

SamSukhoonNordl
Tourist
53 1 10

3eb36eac8e539b33b6f632add4377dcf.png

 As title says. 

 

https://nattstudios.com/

Code: 1234

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

This is an accepted solution.

Hi @SamSukhoonNordl 

You can change the color of the Announcement bar in your Online Store > Themes > Customize, but make sure you select another color scheme for your announcement bar so that the change won't affect other sections. Screenshot 2024-07-03 at 09.40.12.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

conversionist
Shopify Partner
78 8 9

Result:

conversionist_0-1719962126331.png



How to do it :

 

  • Access Shopify Admin:

    • Log in to your Shopify admin panel.
  • Go to Online Store:

    • From the left-hand sidebar, click on "Online Store."
  • Customize Theme:

    • Click on "Themes" and then click the "Customize" button for the theme you are currently using.
  • Access Theme Code Editor:

    • In the theme customization panel, click on "Actions" and select "Edit code."
  • Locate CSS File:

    • In the code editor, find the CSS file where you want to add the custom styles. This is typically under "Assets" and may be named something like theme.css, styles.css, or main.css.
  • Add Custom CSS at the End:

    • Scroll to the bottom of the CSS file and add the following code:

 

.utility-bar.color-scheme-1.gradient {
  background-color: #000000 !important; /* You can change the color here*/
}

.utility-bar.color-scheme-1.gradient .announcement-bar__message {
  color: #ffffff !important; /* You can change the color here */
}
​

 

Save Changes:

  • Click the "Save" button to apply the changes.

 

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://conversionist.online/

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

This is an accepted solution.

Hi @SamSukhoonNordl 

You can change the color of the Announcement bar in your Online Store > Themes > Customize, but make sure you select another color scheme for your announcement bar so that the change won't affect other sections. Screenshot 2024-07-03 at 09.40.12.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anshul_arora
Navigator
447 126 91

Hello @SamSukhoonNordl ,

I understand you are looking only looking to change background & text color of Announcement Bar.

Please follow the steps mentioned in Screenshot for the desired change -:

- Online Store - Themes -> Click on Customize button -> Open Announcement Bar section https://prnt.sc/hUNmOc0X7z1L

Anshul_arora_0-1719988918408.png

 

 

.utility-bar.color-scheme-1.gradient.utility-bar--bottom-border {
background: black;
}

p.announcement-bar__message.h5 {
color: white;
}


I hope the solution helps you.

Please share if you have any queries .

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here