Removing the header and menu on a specific page

Store Design
1

Hello, I would like to remove the header on a specific page. Can you help me do this for my particular theme? Thanks

4 Likes
2

Hey @Erig

Can you share that page URL with me from where you want to remove the header from?

Best,
Moeed

3
4

Hi!

Yes, you can definitely remove the header on a specific page. The easiest way is to target that page by its handle or template and add a small snippet in your theme’s code. For example, in theme.liquid or the relevant layout file, you can wrap your header code like this:

{% unless template == 'page.about-us' %}
  {% include 'header' %}
{% endunless %}

Replace ‘page.about-us’ with your page’s handle. This way, the header will be hidden only on that page.

Best regards,

Sinh Developer, from Tipo

5

Which page URL do you want to remove your header and menu from?

6

That’s your website homepage, on which page you want to remove the header? Or you want to remove it on the homepage only? Let me know.

Best,
Moeed

7
1 Like
8

and this one Winter Salad Growing Guide – Winnow Farm Seeds

1 Like
9

You can add this code to theme.liquid file, below <head>to remove your header and menu on that page

{% if page.id == 688592748920 or page.id == 688696590712 %}
<style>
.shopify-section-header #header-outer { display: none !important; }
</style>
{% endif %}
10

Hey @Erig

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
{% if page.handle == 'winter-salad-growing-guide' or page.handle == 'hardy-annual-growing-guide' %}
<style>
.shopify-section-header {
    display: none !important;
}
</style>
{% endif %}

RESULT:

image
image1889×912 59.8 KB

image
image1892×913 84.3 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

11

Thank you, I’m realising that’s not quite what I wanted. How would I add a static header - no menu etc, just the green strip with the company name on it.?

12

Got it!

Try this code instead with the same steps mentioned above.

{% if page.handle == 'winter-salad-growing-guide' or page.handle == 'hardy-annual-growing-guide' %}
<style>
nav#nav-top, nav#nav-user, input#search_main, p.link-btn, nav#nav-bar {
    display: none !important;
}
</style>
{% endif %}

RESULT:

image
image1902×918 80.8 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

13

In addition to the code shared right above I will only recommend to not edit theme code as this will make theme updates problematic.

In Customizer, add a “Custom liquid” section into Footer sections group and paste the code there.

14

Hello @Erig

Got it :+1: You can hide/remove the header on a specific page by using a template condition in your theme’s header.liquid (or sometimes theme.liquid) file.

Here’s a clean way to do it:

Option 1: By Page Handle

If you only want to remove the header on one specific page (say, the “About” page with handle about), wrap your header code in a Liquid conditional:

{% unless template contains 'page.about' %}
  {% section 'header' %}
{% endunless %}

This means the header will load everywhere except on page.about.
(Replace about with your actual page handle – you can see it in the URL slug in Shopify Admin.)

Option 2: By Template Name

If you want to hide it for a whole template type, use:

{% if template != 'page.contact' %}
  {% section 'header' %}
{% endif %}

This example hides the header only on the Contact page.

Option 3: By Page ID (less common)

If you need to target only one page, not all that use the same template, you can check the page ID:

{% if page.handle != 'my-hidden-header-page' %}
  {% section 'header' %}
{% endif %}

Pro tip: If your theme uses a layout/theme.liquid and pulls in header.liquid, you’ll place this condition where the header is included.

Note: If you’d like my help implementing these, feel free to contact me at devcodersp@gmail.com

15

Hi @Erig ,

You can fix it by following these two simple steps:

Step 1: Click on Edit Code ( screenshot) → Layout / Theme.liquid (screenshot)
Step 2: Add the following liquid code:

{% if page.handle == 'winter-salad-growing-guide' or page.handle == 'hardy-annual-growing-guide' %}
<style>
nav#nav-top,
nav#nav-user,
input#search_main,
p.link-btn, nav#nav-bar {
    display: none !important;
}
</style>
{% endif %}

before the closing </body> tag(screenshot), then save and check the result.

Let me know if this works for you or if you need further assistance!

Best,
Felix

16

Hi @Erig,

Please go to Actions > Edit code > Layout > theme.liquid file, find ‘‘ and add code here:

Screenshot
Screenshot1202×216 15.7 KB

Code:

{% if page.handle == 'hardy-annual-growing-guide' or page.handle == 'winter-salad-growing-guide' %}
      <style>
        .shopify-section-header {
          display: none;
        }
      </style>
    {% endif %}