Shopify Pro Tip: How to Hide Your Footer on Just One Page (No More Site-Wide Headaches!)

Hey there, fellow store owners! Ever found yourself needing a super clean, distraction-free page on your Shopify store? Maybe it's a dedicated landing page for a special campaign, a 'thank you' page after a purchase, or a unique sign-up form. The header and footer are essential for site navigation and branding, but sometimes, they just get in the way.

That's exactly what Nicky_Hemming from our community ran into recently. They asked, "I need to hide my footer on one single page template. If I hide it in theme editor it hides it site-wide which I don’t want. Any ideas how to do this?" It’s a classic scenario, right? You want control over specific pages without affecting your entire site.

Good news! Our community experts jumped in with a couple of fantastic, battle-tested solutions. Let's dive into how you can achieve this, giving you that pixel-perfect control you're looking for.

Option 1: The Liquid Logic Approach with Custom Templates

This method is fantastic because it truly removes the footer section's code from rendering on your chosen page. It's a cleaner, more robust solution for a complete overhaul of a page's layout. It involves creating a custom page template and then adding a conditional statement in your main theme.liquid file.

Step-by-Step Guide:

1. Navigate to Online Store & Edit Code: From your Shopify admin, go to Online Store, then click Themes. Find your current theme and click Actions > Edit code.
2. Locate theme.liquid: In the file editor, look for the theme.liquid file inside the layout folder. This file is like the skeleton for all your store's pages.
3. Modify the Footer Code: Find the existing footer code. It usually looks something like this:

   You'll want to replace this with a conditional statement. This tells Shopify, "Hey, unless this specific template is being used, go ahead and show the footer."

   {% unless template == 'page.page-custom' %}
       
       {% endunless %}
   

   

   Important: In the example above, 'page.page-custom' is the name of the template we'll create. You can choose any name, just make sure it matches in both places!

4. Create a Custom Page Template:
   • Go back to your Shopify admin and navigate to Online Store > Themes. Click Customize.
   • In the customizer, use the dropdown at the top to select Pages, and then click Create template.
   • Give your new template a descriptive name, like page-custom (which creates page.page-custom.liquid). Save it.

   This image from the original thread shows the template creation process:

   

5. Assign the Template to Your Page:
   • Now, go to the specific page in your Shopify admin (Online Store > Pages) where you want the footer hidden.
   • In the right-hand sidebar, under the Theme template section, select your newly created template (e.g., page-custom).
   • Save the page.

Voila! That page will now render without your site's footer.

Option 2: The Conditional CSS Hiding Approach

If you prefer a quicker, CSS-based solution, or if you only need to hide the footer on a specific page by its URL handle without creating a new template, Moeed from the community offered a great alternative. This method uses CSS to visually hide the footer when a certain page is loaded.

Step-by-Step Guide:

1. Identify Your Page Handle: First, you need the "handle" of the page where you want to hide the footer. This is usually the last part of your page's URL. For example, if your page URL is yourstore.com/pages/my-special-page, the handle is my-special-page. Nicky_Hemming's page, for instance, had the handle sign-up-to-the-dahlia-days-newsletter.
2. Navigate to Online Store & Edit Code: Just like before, go to Online Store > Themes > Actions > Edit code.
3. Add Code to theme.liquid: Open your theme.liquid file. Scroll to the very bottom, and just above the closing tag, add the following code:

   {% if page.handle == 'sign-up-to-the-dahlia-days-newsletter' %}
   
   {% endif %}
   

   Remember to replace 'sign-up-to-the-dahlia-days-newsletter' with the actual handle of your target page.

   This snippet essentially says, "If the current page's handle matches this specific one, inject some CSS that hides the element with the class .shopify-section-group-footer-group." This class typically refers to the entire footer section in most modern Shopify themes.

   Here's an image showing the result of this CSS solution:

   

Which Method Should You Choose?

Both methods are valid, but they serve slightly different needs:

• Go with Option 1 (Liquid Logic & Custom Template) if you want the footer HTML to be completely absent from the page's source code. This is ideal for true landing pages where every byte and element matters for speed or specific integrations. It's a more "structural" change.
• Choose Option 2 (Conditional CSS Hiding) if you need a quick visual hide and don't mind the footer's HTML still being present in the page's DOM. This is often faster to implement for one-off pages and doesn't require creating a new template. Just be sure to use the correct page.handle and the appropriate CSS selector for your theme's footer (.shopify-section-group-footer-group is a good bet for most themes).

Nicky_Hemming also had a follow-up question about hiding just a specific form within the footer. While Moeed initially suggested a CSS snippet for a specific form embed, the broader solutions above cover hiding the entire footer. If you only need to hide a part of the footer, you'd apply similar conditional CSS logic, but target the specific CSS class or ID of that element (like shopify-forms-embed#app-embed or a specific form ID) instead of the whole footer group.

Big thanks to mastroke and Moeed for sharing their expertise in the community thread! It's always great to see our members helping each other out with practical solutions like these. Hopefully, these steps empower you to customize your Shopify pages exactly how you envision them. Happy customizing!