No Header or Footer

[MikeLife]

Hi

I use the Shopify Shapes Theme and want to create a couple landing page that don't have the header and footer displayed. When I hide the header and footer on Shopify customize theme they disappear from the whole website, but I just want them gone from these few pages.

How do I do this?

Thanks

[PageFly-Noah · Accepted solution]

Hi @MikeLife This is the correct code for your two pages

{% if handle contains 'capital-participant-inquiry' or handle contains 'manufacturing-inquiries' %}
<style>
#shopify-section-header, #shopify-section-footer {
display: none !important;
}
 </style>
{% endif %}

[PageFly-Noah]

Hi @MikeLife 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

{% 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 %}

Please use the code to hide it for specific page

Note: Index is home page, about-us is about us page, shop is the pages/shop


If the code above is not work for you, you can send me the URL of your site and i can send the proper code for you

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[PageFly-Noah · Accepted solution]

Hi @MikeLife This is the correct code for your two pages

{% if handle contains 'capital-participant-inquiry' or handle contains 'manufacturing-inquiries' %}
<style>
#shopify-section-header, #shopify-section-footer {
display: none !important;
}
 </style>
{% endif %}

[Made4uo-Ribe]

Hi @MikeLife 

I am not familiar with the Shapes theme. If you can locate the code for the header and footer, you can follow the instructions below. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• Go to Layout folder, and open the theme.liquid
• Locate the following code below for header and footer. NOTE: Depending on theme, yours might be written differently

{% sections 'header-group' %} or   {% sections 'header' %}
​

{% sections 'footer-group' %} or {% sections 'footer' %}​

• After locating the following code, you must enclose each code in the unless statement, code should appear like so. 

{% unless template.name == "index" %}
{% sections 'header-group' %} or   {% sections 'header' %}
{% endunless %)​

​{% unless template.name == "index" %}
{% sections 'footer-group' %} or {% sections 'footer' %}​
{% endunless %)​

• And Save 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[MikeLife]

I'm trying to hide the header and footer on two pages called,

https://lifetradeshow.com/pages/capital-participant-inquiryhttps://lifetradeshow.com/pages/manufacturing-inquiries

I tried putting your code in but I don't think I did it right.

[WhyRegister]

I found your solution to be the "right" one in my context.
This video helped me learn: https://www.youtube.com/watch?v=mxUSrhnbehA

[suyash1]

@MikeLife - can you please share your page link? if you have unique id or class for the pages then using css it can be done

[MikeLife]

I'm trying to hide the header and footer on two pages called,

https://lifetradeshow.com/pages/capital-participant-inquiryhttps://lifetradeshow.com/pages/manufacturing-inquiries

Does that help?

[suyash1]

@MikeLife - what is the password to view this page?

[MikeLife]

For now the password is "turnkey".

[suyash1 · Accepted solution]

@MikeLife - add this code just before the </body> tag in your theme.liquid file and check

{% if handle contains 'capital-participant-inquiry' or handle contains 'manufacturing-inquiries' %}
<style>
#shopify-section-header{display: none !important;}
#shopify-section-footer{display: none !important;}
 </style>
{% endif %}

[MikeLife]

So far I have not been able to solve my problem.