Back to all insights

How I Removed the Header on a Shopify Page

Picture of Maria Ilyas

Maria Ilyas

Founder and Head Huncho at Propellex, an agency where we provide marketing and web development services to small businesses and startups.

Are you looking for a non-app way to remove header on a Shopify page? Here’s an easy guide on how you can do that.

Recently, I was tasked with the design and development of a web page that showed only a single section I had built — a lead generation section — with nothing else cluttering it. The footer could stay because I still wanted links, credibility, and trust signals. But the header? That needed to go.

The First Attempt: Hiding With CSS

Like most quick fixes, my first thought was CSS. I simply added a rule that targeted the .header element and set display: none;.

It worked… sort of.

Visually, the header disappeared. But behind the scenes, Shopify was still rendering all that code, all those assets, all those scripts. That didn’t sit right with me. It felt like sweeping dust under the rug — technically hidden, but still there.

Thinking Deeper: Templates vs Layouts

Shopify uses layouts and templates to decide how a page looks:

  • Layouts (theme.liquid) define the global structure — header, footer, body.
  • Templates (page.liquid or page.json) tell Shopify which sections to render in the main content area.

By default, every page template pulls in the header and footer from theme.liquid. So if I wanted a header-less page, I had two choices:

  1. Create a brand-new layout file (say, blank.liquid) that doesn’t include the header.
  2. Use conditional logic in my main layout to exclude the header on specific pages.

I went with option two. It was cleaner and didn’t require me to maintain a separate layout file.

How to Remove Header in Shopify

Shopify’s Liquid templating language makes it surprisingly easy to run conditions. The trick is the {% unless %} tag.

Instead of rendering the header everywhere, I wrapped it like this:

{% unless template == 'page.waitlist' %}
  {% section 'header' %}
{% endunless %}

Translated into plain English:

  • “Render the header unless the current template is page.waitlist.”

That’s it. On my waitlist page, the header vanished completely. On every other page, it stayed right where it belonged.

Hire me for custom Shopify landing page development.

more insights