How to hide header and footer for specific page templates?

[kasm2013]

Hello,

I've created a page template named landing-page. When I put this code into my theme.liquid file it doesn't hide the header and footer for pages using that template. Can someone explain what is going on?

    {% if template.name == 'landing-page' %}
    <style>
.header-wrapper{
    display: none !important;
}

footer.footer{
    display: none !important;
}
</style>

      {% endif %}

[dlucasify · Accepted solution]

Your code isn’t working because template.name doesn’t exist in theme.liquid. Use template instead, like this:

{% if template == 'page.landing-page' %}
  <style>
    .header-wrapper {
      display: none !important;
    }
    footer.footer {
      display: none !important;
    }
  </style>
{% endif %}

Make sure your page is using the landing-page template correctly in the Shopify admin. Let me know if you want to fully remove it in the layout instead of just hiding it with CSS.

[kasm2013]

This did it! Thank you SO MUCH!

[CodingFifty]

Hey! @kasm2013,

Go to your Shopify Admin Panel.

Navigate to Online Store → Themes.

Click on Edit Code (not Customize).

Open the theme.liquid file (found inside the Layout folder).

Scroll down and paste the code just before the </head> tag:

{% if page.handle == 'landing-page' %}
  <style>
    .header-wrapper {
      display: none !important;
    }

    footer.footer {
      display: none !important;
    }
  </style>
{% endif %}

[Dan-From-Ryviu]

Hi @kasm2013 

Could you share the link to your page? 

[Vi-WizzCommerce]

Hello @kasm2013 !

Sorry to hear you're dealing with this issue! 

You're close — but the problem is that theme.liquid can't reliably detect template.name for JSON-based templates (like page.landing-page.json), especially in Shopify's newer Online Store 2.0 themes (like Ride, Dawn, etc.).

Best Practice: Use template or request object in theme.liquid

Instead of template.name, use:

{% if template == 'page.landing-page' %}

OR (for older themes):

{% if request.page_type == 'page' and request.template == 'page.landing-page' %}

So update your snippet to:

{% if template == 'page.landing-page' %}
<style>
.header-wrapper {
display: none !important;
}
footer.footer {
display: none !important;
}
</style>
{% endif %}

Alternative (cleaner): Remove header/footer in template file

Instead of hiding with CSS, you can remove the includes from the template itself:

1. Go to templates/page.landing-page.json

2. Remove or comment out "header-group" and "footer-group" from the sections array:

{
"name": "Landing Page",
"sections": {
"main": {
"type": "main-page",
"settings": {}
}
// Do NOT include "header-group" or "footer-group"
},
"order": [
"main"
]
}

This will render a completely headerless + footerless layout, without needing CSS hacks.

Debug Tip

You can temporarily print this in your theme.liquid to see what template Shopify thinks it’s using:

{{ template }}
<!-- OR -->
{{ request }}

If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!