How to hide header and footer for specific page templates?

Technical Q&A
, ,
1

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

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.

1 Like
3

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 tag:

{% if page.handle == 'landing-page' %}
  
{% endif %}
4

Hi @kasm2013

Could you share the link to your page?

5

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

.header-wrapper { display: none !important; } footer.footer { display: none !important; }

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

{{ 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!

1 Like
6

This did it! Thank you SO MUCH!