Master Shopify Landing Pages: Hide Header & Footer in Flex Theme with Custom Code

Hey there, fellow store owners! Ever found yourself wanting to create a super focused landing page on Shopify, one that strips away all the usual distractions like your header navigation and footer links? You know, a page designed purely to convert, without any escape routes for your visitors?

It's a common goal, and it recently sparked a fantastic discussion in the Shopify community that I wanted to share. We saw store owners grappling with this exact challenge, specifically within the popular Flex theme, and the community really came together to nail down a solid, code-based solution. No apps needed, just some clever customization!

The Quest for a Distraction-Free Landing Page

Our friend, risenlyse, kicked off the thread with a clear objective: "To make a Landingpage, I want to hide the Footer & Header in a Product-Theme-Template." They'd tried a video tutorial, adapted the code for Flex, but just couldn't get it to work. Sound familiar? It's a classic scenario where theme specifics can throw a wrench into generic solutions.

The beauty of the Shopify community is how quickly experts jump in. Adefila_Adeyinka was one of the first to offer guidance, suggesting two main paths:

• The Liquid Method: Edit your theme.liquid file to wrap header and footer sections with a conditional statement tied to a new product template (e.g., product.landing.liquid).
• The CSS Method: A "quick alternative" – add a custom CSS class to your new template and use CSS to hide the header/footer. This, they noted, is often "cleaner."

As the conversation unfolded, it became clear the CSS method was the path to success for risenlyse, thanks to some brilliant input from tim_1.

Laying the Foundation: Custom Templates Are Crucial

Before diving into any code, there's a fundamental step that shopplaza_team rightly emphasized: you must create a custom template for your landing page. This is non-negotiable, as it's the specific canvas where your header/footer-free design will live. Here's what that looks like in the theme editor:

How to Create a Custom Product Template:

1. Duplicate Your Existing Template: In your Shopify admin, go to Online Store > Themes. Click Actions > Edit code for your Flex theme.
2. Create a New Template: Under the "Templates" directory, click "Add a new template."
3. Choose "Product" and give it a descriptive name: For example, landing-page. This will create a file like product.landing-page.liquid (or product.landing-page.json if you're on a newer JSON template theme). The key here is the .landing-page suffix.
4. Assign Your Product: Now, when you edit a product in your Shopify admin, you'll see a "Theme template" option. Select your newly created product.landing-page template for the product you want to use as your landing page.

This custom template is what tells Shopify, "Hey, this specific page should behave differently!"

The Flex Theme Solution: Hiding Elements with Custom CSS

With your custom template ready, the next step is to inject the CSS that will perform the magic. tim_1 provided the exact code and instructions for the Flex theme, which proved to be the winning ticket. The approach involves adding a "Custom Liquid" section to your new template and pasting in the CSS.

Step-by-Step for Implementing the CSS:

1. Navigate to Your Custom Template: In your theme editor (Online Store > Themes > Customize), navigate to the product page that uses your new product.landing-page template.
2. Add a "Custom Liquid" Section: On the left sidebar, scroll down and click "Add section." Search for "Custom Liquid" (or "Custom Code" / "Custom HTML" depending on your theme version) and add it to your template.
3. Paste the Initial Code: tim_1's initial snippet looked like this:

4. Refinement and the "Missing Main" Element: Interestingly, after applying this, risenlyse noticed the footer was still hanging around. This is a crucial insight into theme variations! tim_1 quickly realized that their test site had a main element wrapping content, which risenlyse's site didn't. This meant the footer selector main ~ .shopify-section wasn't quite catching everything.
5. The Final, Working Code: tim_1 provided an updated snippet, which included an additional selector to ensure the footer was completely hidden:

   This subtle but important change made all the difference! Here's a visual of where to typically place this code within the custom liquid section:

   

6. Save Your Changes: Don't forget to save your theme customizations!

And just like that, risenlyse had their header and footer hidden, creating that clean, focused landing page they were after. It just goes to show how a little bit of community wisdom and targeted CSS can solve seemingly tricky problems!

Why This Works & What to Keep in Mind

The power of this solution lies in its simplicity. By targeting specific CSS classes (.shopify-section.header-section, .top-bar, .announcement-container, etc.) that the Flex theme uses for its header and footer components, we can simply apply display: none; to make them disappear. The key was identifying all the relevant selectors, especially the addition of .shopify-section.footer to cover all bases.

This method is elegant because it keeps your core theme files clean. You're not directly editing theme.liquid (though that's another valid approach), but rather using a dedicated "Custom Liquid" section within your specific landing page template. This compartmentalization makes it easier to manage and less likely to break other parts of your site.

It's also a great reminder that while many Shopify themes share structural similarities, each theme (and even different versions of the same theme, like Flex 3.2.1 that tim_1 tested against) can have unique quirks in its HTML structure. What works perfectly on one site might need a slight tweak on another. That's where inspecting your page elements with browser developer tools can become your best friend in debugging!

Ultimately, this community thread highlights the incredible value of sharing knowledge. What started as a challenge for one store owner became a clear, actionable solution for many. So, if you're looking to create high-converting landing pages on your Flex theme without investing in an app, give this method a try. It’s a fantastic way to take control of your page layout and guide your customers exactly where you want them to go!