Solved

How to hide announcement bar fro HomePage only but have it in all other shop pages?

NDS
Explorer
55 1 8

Hi,

 

My home page will be traded more as a landing page so I want to hide the announcement bar but only from the home page. I still want to have it in all the other pages.

Can someone please share the code to do this & were to include it? 

I am using the theme Prestige.

 

Thanks so much in advance,

Cristina C. 

Accepted Solution (1)
Dynasort
Shopify Partner
56 5 12

This is an accepted solution.

Sorry @NDS , I must have been flying blind without the link. Try this, it should work.

 

<style>
body.template-index #shopify-section-header  {
  display:none !important;
}
</style>

 

 

 

The Dynasort App

Dynamic collection sorting based on your product attributes. https://apps.shopify.com/dynasort

View solution in original post

Replies 18 (18)

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @NDS,

Please share your website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
NDS
Explorer
55 1 8

Hi,

 

Thanks for replying. The thing is that the theme I am editing is not live yet, I have another one running currently. 

www.newdaysports.com

I want to hide from the home page only the announcement bar that says "Free 2-Business Day Shipping on Orders Over $59.99" & I want it to still show in all the other pages.

 

Hope this makes sense! Thanks!!!!

 

CC

Dynasort
Shopify Partner
56 5 12

@NDS 

Try putting the following style in your development theme's CSS/SCSS file:

body.template-index #shopify-section-header .announcement-bar {
  display:none;
}

 

This should only hide it for the index/home page.

 

The Dynasort App

Dynamic collection sorting based on your product attributes. https://apps.shopify.com/dynasort
NDS
Explorer
55 1 8

Thanks!

 

Pasted it at the end of the theme.liquid but it did not work.

Dynasort
Shopify Partner
56 5 12

Sorry @NDS , that first snippet would have to be in your theme's CSS or SCSS file. If pasting into theme.liquid you could try this instead:

<style>
body.template-index #shopify-section-header .announcement-bar {
  display:none;
}
</style>

 

The Dynasort App

Dynamic collection sorting based on your product attributes. https://apps.shopify.com/dynasort
NDS
Explorer
55 1 8

@Dynasort  thanks for getting back so fast. However, tried both in the theme.liquid and in the scss but didn't work.

Maybe I didn't something wrong or if for a different theme? 

https://www.newdaysports.com/

 

Thanks so much!

Dynasort
Shopify Partner
56 5 12

Ah bummer @NDS 
The store is password protected, shoot me the password and I'll take a look. 

The Dynasort App

Dynamic collection sorting based on your product attributes. https://apps.shopify.com/dynasort
NDS
Explorer
55 1 8

@Dynasort  

Thanks again!

Dynasort
Shopify Partner
56 5 12

This is an accepted solution.

Sorry @NDS , I must have been flying blind without the link. Try this, it should work.

 

<style>
body.template-index #shopify-section-header  {
  display:none !important;
}
</style>

 

 

 

The Dynasort App

Dynamic collection sorting based on your product attributes. https://apps.shopify.com/dynasort
NDS
Explorer
55 1 8

Thank you so so much! It worked

ahmedalii
Tourist
9 0 1

Hey @Dynasort , I would like to do this but for my cart page. Do you know any way how to do it?

Dynasort
Shopify Partner
56 5 12

Hello @ahmedalii 
You would need to change the CSS selector to the match your cart page and banner. It might be something like below, but will depend on your theme. Shoot me a link to the store and I'll be happy to give you the exact code if you like.

<style>
body.template-cart #shopify-section-header  {
  display:none !important;
}
</style>

 

The Dynasort App

Dynamic collection sorting based on your product attributes. https://apps.shopify.com/dynasort
yourwillandtest
New Member
4 0 0

How can I make my announcement bar only appear on one specific product page only and no where else?

Anda
Visitor
1 0 0

Hi i tried some code available online to hide my announcement bar but it didnt work, right now the announcement bar still on my homepage

appreciate f someone could help me. Here my store https://www.parliamentofowls.com.au/ i want to hide the brown announcement bar 

yourwillandtest
New Member
4 0 0

How can I make my announcement bar only appear on one specific product page only and no where else? 

SmokeEraser
Tourist
6 0 1

Did you ever figure out how to add an announcement banner to just one specific product page? This is exactly what I need to know too. 

 

Thanks

 

 

 

 

 

PeterMøller
Visitor
1 0 0

This doesn't work for me, I'm using the Pipeline theme. Can you help?

caducus
Visitor
2 0 0

Can you answer a similar problem for me. Trying to hide the announcement on my dawn theme, from all except for one page.