Shopify Flex Theme: How to Create Distraction-Free Landing Pages by Hiding Header & Footer

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 Challenge: Crafting Distraction-Free Landing Pages in Shopify Flex

Our friend, risenlyse, kicked off a Shopify Community 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, adjusting for Flex, but hit a snag. The core issue lies in Shopify's theme structure, where headers and footers are typically global elements included across all pages.

The initial advice from a community member 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. This approach is powerful because it allows you to apply specific styling only to the pages using that custom template, leaving the rest of your store untouched.

Step 1: The Foundation – Creating a Custom Template

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.

How to Create and Assign a Custom Product Template:

1. Duplicate Your Product Template: From your Shopify admin, go to Online Store > Themes. Find your current theme (Flex) and click Actions > Edit code.
2. Under the Templates directory, find product.json (or product.liquid if you're using an older theme version). Click Add a new template.
3. Choose Product from the dropdown, give it a descriptive name like landing-page, and click Create template. This will create a new file, e.g., product.landing-page.json.
4. Assign the Template to Your Product: Navigate to the product you want to use for your landing page (Products > All products). Scroll down to the Online Store section on the right sidebar. Under Theme template, select your newly created template (e.g., product.landing-page). Save your product.

Step 2: Implementing the CSS to Hide Elements

Now that your product is using its dedicated template, it's time to add the CSS code that will hide the header and footer. This is where the specific selectors for the Flex theme come into play.

Adding Custom CSS to Your Landing Page Template:

1. Go back to Online Store > Themes > Customize for your Flex theme.
2. From the dropdown menu at the top, select Products > landing-page (or whatever you named your custom template). This ensures you're editing the correct template.
3. In the left sidebar, scroll down and click Add section. Search for and select Custom Liquid (or Custom Code/Custom HTML, depending on your theme version).
4. Paste the following CSS code into the Custom Liquid section. This code has been refined by tim_1 in the community thread to work effectively with various Flex theme structures, including cases where a
   element might be missing or different footer selectors are used.

Explanation of the CSS:

• .shopify-section.header-section, .shopify-section.top-bar, .shopify-section.announcement-container: These are common CSS classes used by Flex to identify different parts of the header, including the main navigation, top bar, and announcement banner. Setting display: none; hides them completely.
• main ~ .shopify-section: This is a powerful CSS sibling selector. It targets any .shopify-section element that comes *after* a
  element. This often catches footer sections which typically appear after the main content area.
• .shopify-section.footer: This is an additional, more specific selector for the footer section, ensuring it's hidden even if the sibling selector doesn't quite catch it due to theme variations.

Initially, risenlyse found that the footer was still visible after applying a similar code. This is a common scenario where theme-specific nuances come into play. tim_1 quickly identified that some Flex theme setups might not use a

element to wrap template contents, leading to the footer being missed. The refined code above addresses this by adding the more robust .shopify-section.footer selector.

5. Save Your Changes: Click Save in the top right corner of the theme editor.
6. Preview and Test: Visit your product page using the custom template. The header and footer should now be completely hidden, giving you a clean, focused landing page.

Important Considerations for Your Flex Landing Page

• Theme Version: The provided code was tested against Flex version 3.2.1. While generally robust, minor updates to the Flex theme might introduce new class names or structural changes. If you find elements are still visible, you may need to inspect your page's HTML using your browser's developer tools to find the correct CSS selectors for your specific theme version.
• Mobile Responsiveness: Always test your landing page on various devices to ensure the hidden elements remain hidden and your content displays correctly.
• No-Index (Optional): For some highly specific, temporary landing pages, you might consider adding a noindex meta tag to prevent search engines from indexing them, especially if they duplicate content or are part of a temporary campaign. However, for product landing pages, this is usually not necessary as you want them discoverable.

Unlock Higher Conversions with Focused Landing Pages

By following these steps, you can transform a standard Shopify product page into a powerful, distraction-free landing page tailored for conversions. Removing the header and footer eliminates potential exits and keeps your visitors focused solely on your offer and call to action, leading to better campaign performance and increased sales.

At Shopping Cart Mover, we understand the intricacies of Shopify theme customization and the importance of a finely tuned online store. Whether you're optimizing landing pages, migrating your entire store, or need advanced custom solutions, our team of experts is here to help you unlock your store's full potential.