How do I turn off the header (inc menus and everything else) for just desktop?
Topic summary
Goal: create a single landing page in Dawn (Shopify Online Store 2.0) without header/footer, while keeping them on the rest of the site.
Key approaches discussed:
- Quick fix (CSS hide): Add a page-specific body class (e.g., add in theme.liquid), then target that class to hide .header and .footer via CSS. Works, but still loads assets; desktop-only variant was asked but not answered. Step-by-step guidance included adding CSS in theme.liquid’s .
- Legacy method: Use a .liquid template with {% layout none %}. Effective, but disables dynamic sections on that page in 2.0.
- Recommended 2.0 method: Set an alternative layout via the layout attribute in the JSON template to exclude header/footer while retaining sections. Editor quirk: to edit the correct template, navigate to the page via a link in the theme editor or adjust the URL.
- Conditional include: Use {% if page.handle == ‘…’ %} around {% section ‘header’ %}/{% section ‘footer’ %} to control where they load.
Notes:
- Deleting header/footer in theme.liquid removes them site-wide (not desired).
- Performance concerns with CSS hiding debated; images/code and a YouTube tutorial were shared.
Status: Multiple workable solutions; consensus leans toward the JSON template layout approach. Discussion ongoing.