Annoncement bar - Change background to black & text to white

[SamSukhoonNordl]

As title says.

https://nattstudios.com/

Code: 1234

[conversionist]

Result:

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.

[Dan-From-Ryviu]

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.

[Anshul_arora]

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

.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.