Hiding header/footer on certain pages

authoremilysilv · ‎06-03-2025

I have three landing pages I’m working on for social media that I am trying to hide the header and footer. I’m not skilled in coding and have tried adding it several times to no avail. Is anyone able to assist me?

https://authoremilysilver.com/pages/nashville-knights-release

https://authoremilysilver.com/pages/love-pucked-release

https://authoremilysilver.com/pages/author-emily-silver

topnewyork · ‎06-03-2025

Hi @authoremilysilv ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code after <body>

<script>
document.addEventListener('DOMContentLoaded', function() {

  const pagesToHide = [
    '/pages/nashville-knights-release',
    '/pages/love-pucked-release',
    '/pages/author-emily-silver'
  ];

 
  const currentPath = window.location.pathname;

 
  if (pagesToHide.includes(currentPath)) {
    // Target the header and footer elements
    const header = document.querySelector('.header-wrapper');
    const footer = document.querySelector('.footer');

  
    if (header) {
      header.style.display = 'none';
    }
    if (footer) {
      footer.style.display = 'none';
    }
  }
});
</script>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

View solution in original post

Small_Task_Help · ‎06-03-2025

Hi,

Hope this will work

- Create a Special Page Template
- Edit Template to Remove Header/Footer
Once the new template opens, it’ll look something like this:
{% section 'header' %}
{{ page.content }}
{% section 'footer' %}

remove the header and footer sections, so change it to:
{{ page.content }}

- Assign This Template to Your Landing Pages

To Get Shopify Experts Help, Click Here or E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert India
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad

topnewyork · ‎06-03-2025

Hi @authoremilysilv ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code after <body>

<script>
document.addEventListener('DOMContentLoaded', function() {

  const pagesToHide = [
    '/pages/nashville-knights-release',
    '/pages/love-pucked-release',
    '/pages/author-emily-silver'
  ];

 
  const currentPath = window.location.pathname;

 
  if (pagesToHide.includes(currentPath)) {
    // Target the header and footer elements
    const header = document.querySelector('.header-wrapper');
    const footer = document.querySelector('.footer');

  
    if (header) {
      header.style.display = 'none';
    }
    if (footer) {
      footer.style.display = 'none';
    }
  }
});
</script>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

Hiding header/footer on certain pages

Hiding header/footer on certain pages

Community Blog Articles