Unlock Seamless Landing Pages: Hide Shopify Flex Theme Header & Footer (No App Needed!)

Hey there, fellow store owners! Ever found yourself needing a super clean, conversion-focused landing page on your Shopify store? You know, the kind with absolutely no distractions – no navigation, no footer links, just pure focus on your offer? It’s a common goal, and recently, our community was buzzing with a great discussion on exactly how to achieve this, particularly for those rocking the popular Flex theme.

Creating a truly effective landing page often means stripping away anything that might pull your visitor's attention away from your primary call to action. And let's be honest, those standard headers and footers, while essential for the rest of your site, can be major distractions on a dedicated landing page. The good news? You absolutely can achieve this streamlined look in your Flex theme without needing to install another app.

The Community Challenge: Hiding Elements in Flex

Our friend, risenlyse, kicked off the thread with a classic challenge: how to hide the header and footer specifically for a product landing page within the Flex theme, without resorting to an app. They'd tried some methods from a video, adjusting for Flex, but hit a snag. The initial advice from Adefila_Adeyinka correctly pointed towards using a custom product template and then either modifying theme.liquid or, more simply, adding a custom CSS class to hide those elements.

Before diving into any code, there's a foundational step that shopplaza_team rightly highlighted: you absolutely need a custom template set up and assigned correctly. This is your canvas for the unique landing page look. If your custom template isn't properly linked to your product, any code changes you make won't show up. Here's what that looks like in your admin:

The Winning Code Solution for Flex Theme

That's where tim_1 stepped in with a really elegant, code-based solution that proved to be the winner for risenlyse. It leverages a 'Custom Liquid' section within your new template to inject specific CSS that targets and hides the header and footer sections. Here's how you can implement this in your own Shopify store running the Flex theme:

Step-by-Step Instructions:

1. Create a Custom Product Template:
   • From your Shopify admin, go to Online Store > Themes.
   • Find your Flex theme, click Actions > Edit code.
   • Under the Templates directory, click Add a new template.
   • Choose Product from the dropdown, and name it something descriptive like landing. This will create a file named product.landing.liquid. (If your theme uses JSON templates, you'd duplicate product.json and link it.)
2. Assign the Custom Template to Your Product:
   • Navigate to the product you want to use as your dedicated landing page (Products > All products).
   • In the product editor, scroll down to the Online store section on the right sidebar.
   • Under Theme template, select your newly created product.landing template. Save your changes.
3. Add the Custom CSS to Your Template:
   • Go back to your theme code editor (Online Store > Themes > Actions > Edit code).
   • Open your product.landing.liquid file.
   • In the 'Template' area for this template, you'll want to add a Custom liquid section. This is usually done through the theme customizer by adding a section, or directly in the code. tim_1 provided a helpful screenshot showing exactly where to paste this code:

Paste the following code into your Custom liquid section:

The Footer Fix: Getting it Just Right

Initially, risenlyse found that even with the first code snippet, the footer was still peeking through. This is a common hiccup because different themes (or even different versions of the same theme) might structure their HTML slightly differently. tim_1 quickly diagnosed that risenlyse's site might not have a main element wrapping the template contents, which was crucial for the original CSS selector to work perfectly.

The solution? A small but mighty tweak to the CSS selectors. Here's the updated, fully working code that successfully hides both header and footer elements:

The addition of .shopify-section.footer provides a more direct target for the footer section, ensuring it’s hidden even if the main element structure differs. This is a fantastic example of debugging in action within the community!

Once you save this code in your custom template, visit your product page that's using the product.landing template. You should now see a clean, header- and footer-free page, ready to be optimized for conversions!

This whole discussion is a fantastic example of how powerful the Shopify community is. What started as a specific problem for risenlyse and their Flex theme became a robust solution thanks to the collaborative efforts of Adefila_Adeyinka, shopplaza_team, and especially tim_1. Now you've got a solid, app-free way to create those laser-focused landing pages that convert!