Remove Header and Footer from theme on new template/specific pages

Store Design
, , , ,
1

I’m working within a theme that has a Header and Footer section that automatically populates whenever a new template is created. I’m looking to create a new template that does not include the Header and Footer in the theme editor or on the published page.

How can I remove these elements from a new template or from an existing template within the schema (or other setting)? I only want these changes to affect these specific templates/pages and not the global theme settings.

Thanks!

abm-screenshot-01.png
abm-screenshot-01.png2935×1336 627 KB

2

Hi @rovingcondor

To remove the header and footer from specific templates or pages in a Shopify, you can use Liquid conditions in your theme.liquid file.

Here are the steps:

  1. In your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code next to your current theme.
  3. In the code editor, locate the theme.liquid file.
  4. Find the lines that include the header and footer sections, which typically look like this:
{% section 'header' %}
{% section 'footer' %}
  1. Wrap these lines with a Liquid condition that checks for the specific template or page handle you want to exclude the header and footer from. For example, to remove the header and footer from a page with the handle “landing-page”, you can use:
{% unless template.name == 'page.landing-page' %}
{% section 'header' %}
{% section 'footer' %}
{% endunless %}

This will show the header and footer on all pages except the one with the handle “landing-page”.

  1. If you want to exclude multiple templates or pages, you can use an or condition like this:
{% unless template.name == 'page.landing-page' or template.name == 'product' %}
{% section 'header' %}
{% section 'footer' %}
{% endunless %}

This will exclude the header and footer from the “landing-page” template and all product templates.

  1. Save the theme.liquid file.

By using these Liquid conditions, you can selectively remove the header and footer from specific templates or pages without affecting the global theme settings or other pages.

Note: Make sure to replace ‘page.landing-page’ and ‘product’ with the appropriate template names or page handles you want to target.

3

Thank you @Xipirons that definitely helped me solve the issue.

One questions though: your code referenced using

template.name == 'page.landing-page'

that didn’t work exacty syntax-wise. The syntax that worked for me was:

template contains 'page.landing-page'

Are you able to provide some why that was the case? Legacy code?

The current theme is Empire 7.1.0 but I also see that the current available version is 11.0.0

Thanks!

{% unless template contains 'campaign' or template contains 'abm' %}
   {% section 'static-footer' %}
{% endunless %}
4

Hi @rovingcondor

I’m glad I was able to help you solve your problem! Regarding the syntax, you are absolutely right.

In recent versions of Shopify, it is preferable to use template contains rather than template == to check the template type.

Indeed, template returns the full name of the template, which includes both the page type and the suffix of the alternate template, for example page.landing-page. So by using contains, we check if the template name contains a certain string, which is more flexible.

template == used to work in older versions when the template name was simpler. But with alternate templates, it’s better to use contains now to have more robust code that adapts to the different possible names.

So your final syntax is correct:

{% unless template contains 'campaign' or template contains 'abm' %}
{% section 'static-footer' %}
{% endunless %}

It’s true that the Empire theme has evolved a lot between versions 7 and 11. I advise you to update to the latest version if possible, to benefit from the latest improvements and stay compatible with Shopify changes.

Good luck with your project!

1 Like
5

Thanks @Xipirons . Very much appreciated :victory_hand: