Hide Header, Announcement bar, and footer on Landing page

[abmhr]

Hi altogether!

After lots of research and a few mental breakdowns, I came to the conclusion to ask here for help.

I want to hide my header, announcement bar and footer only on the main page/ home page or however you want to call it.

I’m using the Origin theme.

I was able to hide the header already with this code added above the </head> in the theme.liquid :

{% if template.name == "index" %} <style> .section-header { display: none !important; } </style> {% endif %} {% if handle contains 'about-us' %} <style> .section-header { display: none !important; } </style> {% endif %} {% if handle contains 'shop' %} <style> .section-header { display: none !important; } </style> {% endif %}

Now I thought I could be smart and just exchange .section-header for either .section-announcement_bar, announcement.bar, or announcement-bar

Neither of those worked. 😕

Same with the footer I copied the code above and below </body> and changed .section-header to .section-footer (I also deleted the other if-then logics)

Neither works. Any help would be appreciated 🫶🏼 thank you!

[Acme]

Hi, @abmhr 
I am familiar with this issue. Please share your store url(password). Thanks.

[namphan]

Hi @abmhr,

Please change code:

{% if template.name == "index" %} 
<style> .section-header, .announcement-bar, .shopify-section-footer { display: none !important; } </style> 
{% endif %} 
{% if handle contains 'about-us' %} 
<style> .section-header, .announcement-bar, .shopify-section-footer { display: none !important; } </style> 
{% endif %} 
{% if handle contains 'shop' %} 
<style> .section-header, .announcement-bar, .shopify-section-footer { display: none !important; } </style> 
{% endif %}

[namphan · Accepted solution]

Hi @abmhr,

Please add code:

{% if template.name == "index" %} 
<style> .section-header, .announcement-bar, .footer { display: none !important; } </style> 
{% endif %} 
{% if handle contains 'about-us' %} 
<style> .section-header, .announcement-bar, .footer { display: none !important; } </style> 
{% endif %} 
{% if handle contains 'shop' %} 
<style> .section-header, .announcement-bar, .footer { display: none !important; } </style> 
{% endif %}

[abmhr]

You're a genius! Thank you, I really appreciate it! ❤️

[namphan]

Hi @abmhr,

If you have any questions, you can contact me directly.
Happy to help you 😊

[abmhr]

Thank you! But unfortunately, this only works partially for the header and announcement bar. Footer is still shown...

[namphan]

Hi @abmhr,

Can you send me the store link? I will check it for you

[abmhr]

The second one you sent was the solution! Thank you lots!

[abmhr]

Hi! Thank you! Unfortunately this only works partially for the Header and Announcement bar. The footer probably needs to be added somewhere else since its not part of the "Header" itself. Any thoughts? I tried to put this line of code, underneath the </body> as well.
Thank you!