How to hide header and footer on specific page impact theme

Store Design
, , ,
1

Hi there I want to hide the footer and header on this specific page without hiding it on other pages how do I do that?

This page:/vaire®-starter-kit-copy?_pos=2&_psq=starter&_ss=e&_v=1.0

Screenshot 2025-07-05 at 15.17.07.png
Screenshot 2025-07-05 at 15.17.07.png1288×1500 217 KB

2

Hi @Zakariatheguy

You can hide the header and footer on a specific page in Shopify by adding conditional Liquid code in your theme.liquid file or by injecting CSS conditionally. Here’s a clear step-by-step method based on best practices:

Method 1: Conditional Liquid to Exclude Header and Footer1. Go to your Shopify Admin > Online Store > Themes > Actions > Edit code.

  1. Open the layout/theme.liquid file.

  2. Locate the code that outputs the header and footer. It usually looks like:

{% section 'header' %} ... {% section 'footer' %}

or

{% sections 'header-group' %} ... {% sections 'footer-group' %}
  1. Wrap these calls in a conditional to exclude the specific page by its handle or template. For example, if your page handle is landing-page:
{% unless page.handle == 'landing-page' %} 
   {% section 'header' %} 
{% endunless %} 

    

{% unless page.handle == 'landing-page' %} 
   {% section 'footer' %} 
{% endunless %}

This means the header and footer will be hidden only on the page with handle landing-page.

Method 2: Hide Header and Footer with Conditional CSS

If you prefer to keep the sections rendered but hide them visually:

  1. In theme.liquid, add this code inside the tag or just before :
{% if page.handle == 'landing-page' %} 
     
{% endif %}

Replace ‘landing-page’ with your actual page handle.

How to Find Your Page Handle- Go to Online Store > Pages.

  • Click on the page you want to target.

  • Look at the URL in your browser; the last part after /pages/ is the handle.

  • For example, if the URL is https://yourstore.com/pages/landing-page, the handle is landing-page.

Notes- You can target other templates or product handles similarly, e.g.:

{% unless template.name == 'product' %} 
   {% section 'header' %} 
   {% section 'footer' %} 
{% endunless %}
  • For multiple pages, use or:
{% unless page.handle == 'landing-page' or page.handle == 'another-page' %} 
    {% section 'header' %} 
    {% section 'footer' %} 
{% endunless %}

If you want, I can support you write the exact code snippet for your specific page or theme.

3

Method 2 kinda worked but it hid all headers and footers on all pages

4

Method 2 would be the best to avoid theme code modification as you can put the code into “Custom liquid” section in your Footer group, rather then editing code. Note that you need to amend the condition to match your page.

However, the best option is to create a special template for the page in question and add a “Custom liquid” section only in this template with

code like this:

This code will only apply to this template and the page you’ve assigned it to.