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

Solved
Maximus75
Visitor
3 0 0

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..

Accepted Solution (1)
koravski
Shopify Partner
23 9 8

This is an 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.

Screenshot 2022-09-09 at 13.13.03.png

View solution in original post

Replies 6 (6)
PageFly-Victor
Shopify Partner
7865 1785 3017

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

PageFly_0-1662646057538.png

 

{% if handle contains 'contact' %}

  <style>

    header,footer{

        display:none

}

</style>

PageFly_1-1662646057489.png

 

 {%endif%}




Best Regards;

Pagefly

 

banned
koravski
Shopify Partner
23 9 8

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
Visitor
3 0 0

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
Shopify Partner
23 9 8

This is an 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.

Screenshot 2022-09-09 at 13.13.03.png

Maximus75
Visitor
3 0 0

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
Shopify Partner
23 9 8

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.