Re: How to hide header and footer on specific page impact theme

Zakariatheguy · ‎07-05-2025

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

tim · ‎07-05-2025

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:

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

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

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

BiDeal-Discount · ‎07-05-2025

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 Footer

Go to your Shopify Admin > Online Store > Themes > Actions > Edit code.
Open the layout/theme.liquid file.
Locate the code that outputs the header and footer. It usually looks like:

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

or

{% sections 'header-group' %} ... {% sections 'footer-group' %}

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

   <!-- page content --> 

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

In theme.liquid, add this code inside the <head> tag or just before </head>:

{% if page.handle == 'landing-page' %} 
    <style> header, footer { display: none !important; } </style> 
{% 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.

- Helpful? Like & Accept solution! ☕ Coffee tips fuel my dedication.
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Contact me via WhatsApp

Zakariatheguy · ‎07-05-2025

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

tim · ‎07-05-2025

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:

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

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

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com