How to remove header and footer from specific product page without affecting the ATC button

[Maximus75]

Hi I want to remove teh header and footer for specific product groups template as they are not the same as my store products... and therefore i am simply using these product templates as pure landing pages... i tried using this method to remove the header and footer in the theme liquid ( see attched).. and its removed including my cart...but with the cart in the header removed... the ATC button doesn work anymore... 

I am using a Sense theme

My ATC button is already configure to work with a sticky cart so i don need the theme cart , header and footer...

i just need the header and footer removed on certain product pages and then my ATC button can still work with the sticky cart app.... i understan that i need some css coding work.....pls help..

[PageFly-Victor]

Hi @Maximus75

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> ->theme.liquid after you can paste my code to before </head> element.

{% if handle contains 'handle of page' %}

    <style>

    header,footer{

        display:none !important 

}

    </style>

 {%endif%}

Example

{% if handle contains 'contact' %}

  <style>

    header,footer{

        display:none

}

</style>

 {%endif%}

Best Regards;

Pagefly

[koravski]

Hi @Maximus75 ,
just checked the Sense theme.
Go to Online Store/Actions/Edit code.
Find the file: 

main-product.liquid

and add this at the top:

{% assign productTags = product.tags | join: ', ' %}
{% if productTags contains 'no-header-footer' %}
  <style>
    sticky-header, footer {
    display: none !important;
  } 
  </style>
{% endif %}

Now you can tag a product with 'no-header-footer' and it will hide the header and the footer and the mini cart will still work.

Hope this helps.

[Maximus75]

Hi Koravski,

Thanks a great deal.. works like a charm... btw, is there a way if i wanna actually tag a whole selection of product with no header footer... ? That way is faster as i have many products... if not i guess i have to do manually using this method.. but really thanks a lot

[koravski · Accepted solution]

Hello @Maximus75 ,
you can export all products through a CSV file then add the tag to the products and then import them back.
Or you can go to products. Mark the products you want. Then click on More Actions/Add Tags. Then apply the tag to all marked products.

[Maximus75]

Hi koravski, thanks a million for your prompt help....

A quick one.. i still need to hide the header and footer of selected collections... Your tag method above doesn work to hide collection header and footer.. if you can also help with this query taht would be great

[koravski]

Hey @Maximus75 ,

You can create an additional template for your collection by going into the code of your theme and following the directions in this document here:
https://shopify.dev/themes/architecture/templates#alternate-templates

Then in the new collection template, you are adding this code at the top to hide the header and the footer:

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

Hope this helps.