Unlock Distraction-Free Sales Pages: Hide Header & Footer on Specific Shopify Pages

Hey there, fellow store owners! As a Shopify migration expert and someone who spends a lot of time sifting through community discussions, I often see common challenges pop up that have really elegant solutions. One such challenge, perfectly captured by a recent thread started by @John83, is the desire to create truly focused, distraction-free sales pages.

John83 was using the Horizon theme and wanted to hide the header and footer on just six specific sales pages. The problem? When he tried to toggle these sections off in the theme editor, they disappeared across his entire website. Sound familiar? It\'s a classic scenario, and one that the community quickly rallied to help solve!

Why Headers and Footers Go Global

The core of John83\'s dilemma, as several experts like Custom-Cursor and Moeed pointed out, is that the header and footer are typically global sections. They\'re designed to appear on every page of your store, providing consistent navigation and branding. So, when you disable them through your theme\'s general settings, Shopify assumes you want them hidden everywhere. There isn\'t a simple "hide on this page only" toggle for these core elements built into the standard theme editor.

But don\'t worry! This doesn\'t mean you\'re stuck. The brilliant minds in the Shopify community quickly landed on the universally accepted best practice for this: custom page templates. This approach allows you to create specific layouts for individual pages or groups of pages, leaving the rest of your store untouched.

The Community-Approved Solution: Custom Page Templates with CSS

The consensus from Custom-Cursor, ajaycodewiz, WebsiteDeveloper, and tim_tairli was clear: create a new page template, remove the header and footer from that specific template, and then assign your sales pages to use it. Our expert @ajaycodewiz even provided a fantastic step-by-step guide with screenshots, which I\'ve synthesized here for you.

Here\'s how you can achieve those distraction-free sales pages on your Horizon theme (or most other modern Shopify themes, as the principle remains the same):

Step-by-Step Guide to Hiding Header & Footer on Specific Pages

Before you dive in, a crucial heads-up from ajaycodewiz: make sure your header and footer are turned ON globally in your theme settings first. If they\'re off globally, this fix won\'t have anything to hide!

(Before the fix: Note the announcement bar and header.)

(After the fix: Header, announcement bar, and footer are gone.)

1. Create a New Page Template:
   • From your Shopify admin, go to Online Store > Themes.
   • Click Customize on your live theme.
   • At the top of the editor, use the template selector dropdown (it usually says "Homepage" or "Default page").
   • Choose Pages > Create template.
   • Name your new template something descriptive, like page.sales-landing or just sales. Base it on the Default page template. Click Create template.
   
2. Add Custom Liquid with CSS to Hide Sections:
   • With your new sales template selected in the theme editor, look for the "Template" group on the left sidebar.
   • Click Add section.
   • Search for and select Custom Liquid.
   • In the Custom Liquid section, paste the following CSS code. This code specifically targets the header and footer (and announcement bar) sections on this template and sets their display to none, effectively hiding them.
   • Click Save in the top right corner.
   
3. Assign the New Template to Your Pages:
   • Exit the theme customizer and go back to your Shopify admin.
   • Navigate to Content > Pages.
   • Open each of the 6 sales pages (or any page you want to apply this to).
   • On the right sidebar, under "Theme template," select your newly created sales template from the dropdown menu.
   • Click Save for each page.
   

What if you want to keep the Announcement Bar?

The CSS snippet above hides the announcement bar along with the header and footer. But what if you want to keep that top banner for urgent messages or promotions? Ajaycodewiz thoughtfully provided an alternative code snippet for just that scenario:

This code specifically targets only the main header section, leaving your announcement bar visible on your dedicated sales pages.

A Note on Theme Updates and Code

Tim_tairli brought up a valid point in the discussion: while editing theme Liquid codes directly (which this method avoids, by using a Custom Liquid section in the editor) can offer slightly faster page loads, it often makes future theme updates more complex. By using the Custom Liquid section within the theme editor, you\'re adding the CSS in a way that\'s less likely to be overwritten by minor theme updates, though it\'s always wise to keep a backup of any custom code you implement.

This method offers a robust and flexible way to customize your Shopify store\'s appearance without getting bogged down in complex Liquid logic. It empowers you to create highly effective, focused landing pages that guide your customers exactly where you want them to go, minimizing distractions and maximizing conversion potential. The beauty of the Shopify community is seeing these practical solutions emerge, helping store owners like you tackle specific needs with confidence and clarity!