How to I remove the header from showing on selected pages (Taste them)

Shopify Discussion
, , ,
1

I am using taste them and have a seperate template for the page I want displaying no header. However when I mark that section not to display, it removes it from across my website. Any ideas? Thank you in advance

2

Any settings changes you apply in Header and Footer areas are global and apply to every page of your site.

per-template settings are only in the Template area.

You can achieve your goal this way:

  1. Add a “Custom liquid” section in the Template area of your special template;
  2. Paste this code into “Custom liquid”:
<style>
  /* hide header */
  #shopify-section-header { display: none; }

  /* hide announcement bar */
  #shopify-section-announcement-bar { display: none; }
</style>

The code will hide your header and announcement bar sections.
Because it’s a part of a Template, it will only apply on pages using this particular template.

6

Hi @underyoursink

Hide the header only on a specific template

Keep the header in the template but hide it with Liquid.

In your header-group.liquid or header.liquid, add a condition like:

{% unless template.suffix == ‘no-header’ %}
{% section ‘header’ %}
{% endunless %}

Then assign the page.no-header template to that page.

8

For Taste, the safest per-page approach is to use a separate page template and add CSS in that template’s Template group, not in the global Header group.

To hide both the announcement bar and header on that template:

<style>
  .header-wrapper { display: none; }
</style>

Then make sure the page is actually assigned to that new template in the page admin. If it is still using “Default page”, the CSS section won’t apply. Also worth noting: this hides the header visually on that template; don’t remove/disable the header section itself unless you want the change to affect the whole site.

9

Hi @underyoursink ,
Since the Header is a global section in the Taste theme, disabling it in the Theme Editor will hide it across the entire store.

A better approach is to add a condition where the header is rendered. For example, if you’ve created a page template named page.no-header, Shopify sets the template suffix to no-header. You can use:

{% unless template.suffix == 'no-header' %}
  {% sections 'header-group' %}
{% endunless %}