How to make the announcement bar in home page different color than all other pages?

[Jim3]

Hello, to everyone and thank you !

Yes, I already have a nice gradient color which I want to keep for all other pages. But specifically for the home page, I like to keep the announcement bar simply black. I know this is advance. I hope we can manage to do this

[Mustafa_Ali]

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

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

[sadik_ShopiDevs]

Hi @Jim3

Step 1: Go to Shopify Admin > Online Store > Themes > Edit code
Step 2: Go to the Sections folder and open the file where your announcement bar is coded. It might be announcement-bar.liquid or part of header.liquid.

Step 3: Add the following code to the main wrapper of the announcement bar:

Step 4: Now go to the Assets folder.
Step 5: Open base.css (or theme.css) and scroll to the bottom.
Step 6: Paste the following CSS:

.home-announcement {
    background-color: black !important;
}

Step 7: Click Save and check your homepage.
Now your homepage announcement bar will be black, and all other pages will stay unchanged.
If you need assistance to do this, you can inbox me.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Jim3]

Hello, @Mustafa_Ali

For me this didn’t workout. Do you have idea why that may be? I have some code for the announcement bar in the Custom CSS, but the code is only about Bold text.

[Mustafa_Ali]

hey @Jim3 try this one

[Jim3]

Hello, @sadik_ShopiDevs

I think I dont understand the step 3. Where exactly I should paste the code? ( I dont know what is “main wrapper” ? )

Regards,

[Jim3]

I did this one, and yes it changed the color to black, but in every page. I want to make the change only in the home page and all the other pages the color to be as already is.

[Jim3]

Hi, @sadik_ShopiDevs

I located the main wrapper of the announcement bar, but unfortunately it didn’t workout.

[sadik_ShopiDevs]

{% if template == ‘index’ %}home-announcement{% endif %}
you just need to add this code here

[Jim3]

@sadik_ShopiDevs

Do you mean like this? - because is still not working

[devcoders]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Layout > theme.liquid and paste this at the bottom of the file:

{% if template == 'index' %}
<style>
.shopify-section-group-header-group.announcement-bar-section .utility-bar {
background: #000;
}
</style>
{% endif %}

[Jim3]

Hi, Devcoders

Yes I applied this code there but it didnt worked again.. is there some other option?

[sadik_ShopiDevs]

Hello @Jim3
Please share your store URL here or inbox me. I’ll write the code for you—just copy and paste it into your store.
Thank you

[Jim3]

www.deborahloft.com

Thank you for you help! @sadik_ShopiDevs

[sadik_ShopiDevs]

Hello @Jim3
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Like this screenshot: https://prnt.sc/MjL4zbfc9Ali

{% if template == 'index' %}
	
{% endif %}

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Thank you

[Jim3]

Hey, @sadik_ShopiDevs

This is working ! Wow thank you ..!

Could I add something more to this code to play with the color as well? How to change the text color of the announcement bar in home page only?

Thank you so much! @sadik_ShopiDevs

[sadik_ShopiDevs]

If you also want to change the text color on the homepage, you need to add some code for that.

You can replace the previous code with this one:

{% if template == 'index' %}
	
{% endif %}

[Jim3]

It is working, thank you so so much !