Hide Header, Announcement Bar and Footer on Landing Page

[Dutsford]

Hi Guys,

I'm trying to hide the header, announcement bar & footer on a landing page we're working on. We're using Focal theme for this and it seems like it's not as simple as it is on other themes (non dev btw 😂)

Any idea on how this can be done?

[Moeed]

Hey @Dutsford 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Dutsford]

Hi Moeed!

Thanks for your quick response! URL below:

simonnewtonlondon.com

[Moeed]

Hey @Dutsford 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template == 'index' %}
<style>
.announcement-bar, .header, footer {
    display: none !important;
}
</style>
{% endif %}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dutsford]

Thanks!

How would i do this on: https://simonnewtonlondon.com/pages/bfcm-2024

[Moeed]

Keep the previous code and add this new code above </body> in the end of theme.liquid file

{% if page.handle == "bfcm-2024" %}
<style>
.announcement-bar, .header, footer {
    display: none !important;
}
</style>
{% endif %}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe · Accepted solution]

Hi @Dutsford 

TRy this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template.name == 'index' %}
<style>
.header, div#shopify-section-announcement-bar, div#shopify-section-footer {
    display: none;
}
</style>
{% endif %}

• And Save. 
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Dutsford]

when i do it with 'index' it does it on all pages, however I only need it on template name 'landing-page' but this wont work when I replace Index for some reason

[Dutsford]

Ignore me, done it!

Thanks!

[Made4uo-Ribe]

Welcome, Would you mind hitting 'like' as well? Thanks!