Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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>
Hey @NDS,
Please share your website URL. I will check and provide a solution here.
Thanks!
Hi,
Thanks for replying. The thing is that the theme I am editing is not live yet, I have another one running currently.
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
@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.
Thanks!
Pasted it at the end of the theme.liquid but it did not work.
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>
@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?
Thanks so much!
Ah bummer @NDS
The store is password protected, shoot me the password and I'll take a look.
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>
Thank you so so much! It worked
Hey @Dynasort , I would like to do this but for my cart page. Do you know any way how to do it?
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>
How can I make my announcement bar only appear on one specific product page only and no where else?
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
How can I make my announcement bar only appear on one specific product page only and no where else?
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
This doesn't work for me, I'm using the Pipeline theme. Can you help?
Can you answer a similar problem for me. Trying to hide the announcement on my dawn theme, from all except for one page.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024