Unlock Focused Sales Pages: Hiding Shopify Headers & Footers on Specific Pages with Custom Templates on Horizon Theme

Hey fellow store owners! Ever found yourself in a pickle trying to tweak your Shopify theme just so, only to realize a setting affects your entire site? You’re definitely not alone. I recently saw a fantastic discussion in the Shopify Community that perfectly illustrates this, and it’s a common challenge, especially for those of us wanting to create super-focused sales or landing pages. John83, a savvy merchant, asked a great question: "How can I hide the header and footer on 6 specific pages on Horizon theme?" He wanted those pages to be distraction-free sales machines, but toggling the global setting removed them from everywhere. Sound familiar?

Why Global Settings Don't Work for Specific Pages

As Custom-Cursor, Moeed, and others in the thread pointed out, the header and footer sections are typically global elements. This means they’re shared across all pages by default in most Shopify themes, including Horizon. So, if you go into your theme customizer and uncheck "show header" or "show footer," it's a site-wide change. It’s like turning off the main light switch for your whole house when you only wanted to dim the lamp in one room. Not ideal for those critical sales pages where every element needs to serve a purpose, and distractions are the enemy!

The Solution: Custom Page Templates

The good news? The community quickly rallied around the perfect solution: custom page templates. This method allows you to create unique layouts for specific pages without touching the rest of your site. Think of it as having different blueprints for different rooms in your house – your sales pages get a blueprint that explicitly omits the header and footer, while your product pages, blog, and homepage keep theirs. WebsiteDeveloper and Custom-Cursor both highlighted this approach, and ajaycodewiz provided a brilliant, step-by-step walkthrough that I'm excited to share with you. This fix was tested on the Horizon theme, but the underlying principle applies to many modern Shopify themes built with sections.

Step-by-Step Guide: Hiding Header and Footer

Important Pre-step: Make sure your header and footer are turned ON globally in your theme settings first. We want them to show everywhere else, just not on our special pages.

Here’s a quick look at the "before" and "after" to get you motivated:

Before the fix:

After the fix:

Step 1: Create Your Custom Page Template

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize on your current theme (Horizon, in John83's case).
3. At the very top of the editor, click the dropdown menu (it usually says "Homepage").
4. Select Pages, then click Create template.
5. Give your new template a clear name, like sales-page-no-header-footer (or just sales, as ajaycodewiz suggested). Make sure it’s based on the Default page.
6. Click Create template.

Step 2: Add Custom CSS to Hide Sections

1. While still in the theme customizer, with your new template selected (e.g., pages.sales), look at the left sidebar.
2. Under "Template," click Add section.
3. Search for and select Custom Liquid.
4. In the "Custom Liquid" section that appears, paste the following CSS code into the "Liquid code" box:

5. Click Save in the top right corner.

Step 3: Assign the New Template to Your Pages

1. Go back to your Shopify admin.
2. Navigate to Content > Pages.
3. Open each of the 6 sales pages where you want to hide the header and footer.
4. On the right sidebar, under "Online store," locate the Theme template dropdown.
5. Select your newly created template (e.g., pages.sales-page-no-header-footer or pages.sales).
6. Click Save for each page.

A Note on the CSS Code

The CSS provided by ajaycodewiz (and confirmed by tim_tairli) targets specific class names in the Horizon theme: .shopify-section-group-header-group and .shopify-section-group-footer-group. These class names are how Shopify's Dawn-based themes (like Horizon) structure their main header and footer sections. Setting display: none; effectively hides them from view.

What if you want to keep the announcement bar, but still hide the main header? ajaycodewiz thought of that too! Just use this slightly different CSS snippet instead:

This targets only the main header section, leaving the announcement bar untouched. Pretty neat, right?

This approach is fantastic because it keeps your core theme files clean and makes future theme updates much simpler than directly editing Liquid files, as tim_tairli wisely noted. By using the "Custom Liquid" section within the theme customizer, you're essentially adding a small, contained styling tweak that only applies when that specific template is used. It's a powerful way to gain granular control over your page layouts, ensuring your critical sales pages can truly shine without any unnecessary distractions. So go ahead, give it a try and transform those sales pages into high-converting powerhouses!