To make a Landingpage, I want to hide the Footer & Header in a Product-Theme-Template.
I’ve been trying to apply themethod shown in a video, changed the variables and adjusted the code so it fits with the FLEX theme, but no success..
the video: https://www.youtube.com/watch?v=HDLhY52Lt_U&t=719s
Does anybody have a code based solution? (no apps please)
This text will be hidden
Since you’re using Flex, the easiest way is to edit your theme.liquid file and wrap the header and footer with a condition tied to your product template.
Then just create a new product template (e.g. product.landing.liquid) and assign it to the product you’re using as your landing page.
If Flex is using JSON templates, the logic is similar — you just conditionally control visibility in the layout file.
A quick alternative (if you don’t want to touch too much Liquid) is adding a custom CSS class to that template and hiding header/footer with CSS, but the Liquid method is cleaner.
Thank you for your fast reply. Thats what I’ve been trying to do, yet somehow it won’t change the product page.
<body class=" {%- if template.name == '404' -%} error-404 {% else -%} {{ template | replace: '.', '-' | handle }} {%- endif -%} {% if settings.header_layout == 'vertical' -%} has-vertical-header {%- endif -%} {% if template.suffix == 'example' -%} landing-page-template {%- endif -%} "and the CSS:
{% if template.suffix == ‘example’ %}
/* Header komplett ausblenden */ body.landing-page-template [id*="shopify-section-header-group"], body.landing-page-template [id*="header-group-classic"], body.landing-page-template [id*="header-group-centered"], body.landing-page-template [id*="header-group-vertical"], body.landing-page-template [id*="header-group-search-focus"], body.landing-page-template .shopify-section-group-header-group { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Footer komplett ausblenden */ body.landing-page-template [id*="shopify-section-footer-group"], body.landing-page-template [id*="footer-group-classic"], body.landing-page-template [id*="footer-group-centered"], body.landing-page-template [id*="footer-group-promotional"], body.landing-page-template .shopify-section-group-footer-group { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Falls vertikaler Header aktiv ist: Seitenlayout zurücksetzen */ body.landing-page-template.has-vertical-header .is-beside-vertical-header, body.landing-page-template.has-vertical-header #template-product-example, body.landing-page-template.has-vertical-header .dynamic-sections { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; } /* Overlay/Popup-Sachen für saubere Landingpage deaktivieren */ body.landing-page-template .site-overlay, body.landing-page-template .search-overlay, body.landing-page-template .mobile-search, body.landing-page-template .popup, body.landing-page-template .fixed-message { display: none !important; }{% endif %}
This should be right. And I did use the correct suffix as well (where now there is “example”. Are there any other common errors I could check?
Dear @risenlyse
Have you completed step “Duplicate Product & Create Custom Template”?
You need to have custom templates named: example or sale. Only then can the “{% if template.suffix == ‘example’ %}” command execute correctly.
Regards,
Eric from Shopplaza
Make a custom template for this page.
In “Template” area of this template add a “Custom liquid” / “Custom Code” / “Custom HTML” section and paste this code:
<style>
/* header sections */
.shopify-section.header-section,
.shopify-section.top-bar,
.shopify-section.announcement-container,
/* footer sections */
main ~ .shopify-section
{
display: none;
}
</style>
This should hide header and footer on the page which uses this template.
The code is tested against Flex version 3.2.1
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
Thank you, yes I did.
Thank you, this looks great! I’m not sure where to put it. Where is the template area of this template? Are you refering to the custom css?
THANK YOU VERY MUCH! This works! 
I just noticed, I still have the footer in this template. Any Idea why?
If something is still visible, then probably my selectors do not quite work for your theme.
This is where I’d want to see it first-hand, so share your URL (and preview password if one is set)…
This is the frontend view:
Hmm. Interesting – the example site I’ve tested my code against had a main element to wrap template contents, while your site does not have it. 
You can amend the code like this:
<style>
/* header sections */
.shopify-section.header-section,
.shopify-section.top-bar,
.shopify-section.announcement-container,
/* footer sections */
main ~ .shopify-section,
.shopify-section.footer { /* <-- added this */
display: none;
}
</style>
You are awesome. Thank you very much!