How to hide header and footer on a specific page—I encountered this question quite often. So, I put together a workaround below (my team used it, too) in case you might need it when designing a landing page or marketing-specific page.
This tutorial requires knowledge of Liquid and JSON and is not supported by Shopify. Consider hiring a Shopify Expert if you aren’t comfortable working with the code in the tutorial.## Use case:
There’s a high chance that you will create a landing page for a promotional event, and you need to hide the header and footer on this landing page.
Why not hide the Header/Footer through your Shopify theme editor
As you might know, Shopify offers the option to show/hide a section directly within the Theme Editor. However, if you choose this option, the Header/Footer will disappear from the whole store.
So, to hide the Header/Footer on one or a few pages, you need another approach.
How to hide the Header/Footer on one landing page
As a side note, this tutorial is specific to the Dawn theme. Here’s an overview of this workaround:
- Create a new layout based on the theme.liquid. Remove the header/footer in this new file.
- Assign the layout file to the landing page where you want to hide the Header/Footer.
The detailed steps:
Step 1: Go to Online Store > Theme > Edit code
Step 2: Create a new layout file (liquid) based on the theme.liquid.
You can do so by clicking ‘Add a new layout’ under the Layout folder.
Then fill in the form:
- Duplicate file: choose ‘theme.liquid’
- File name: Write a name for your template
In this tutorial, we set the new liquid layout file as theme.landingpage.liquid.
Step 3. Removing the header + footer section from the new layout file theme.landingpage.liquid.
You need to delete or comment out the code sections from the new file theme.landingpage.liquid that renders the header/footer, which includes:
- Header:
{% sections 'header-group' %}
- Footer:
{% sections 'footer-group' %}
- And the cart drawer:
{%- if settings.cart_type == 'drawer' -%}
{%- render 'cart-drawer' -%}
{%- endif -%}
Step 4: Assign the new layout created in Step 1 to a specific template that you use for the landing page.
First, you need to identify the template file name that your landing page is using:
- Go to your Shopify admin, then Online Store > Pages, and open the landing page where you want to hide the Header/Footer.
- You will see the name of the template in the Online store section.
Now that you know the template name, navigate back to the Shopify Code editor, open the template file of your landing page - the file name in our example is page.easy-134240764191.json. Then, add the following property to that json file:
"layout": "theme.landingpage",
The value “theme.landingpage” is the layout file name you created in Step 1.
That’s it. Now, when you refresh your landing page, the header and footer should be hidden.
I hope you have one more option to remove the Header/Footer when creating a landing page with the Dawn theme.
*PS. We followed the exact steps above to hide the header and footer on this landing page (built on the Dawn theme).