Removing header and footer from Dawn template page

Store Design

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.

Summarized with AI on January 17. AI used: gpt-5.
14

@sb11

You’re correct, it’s not ideal indeed, most especially in cases where you’re hiding elements that take a meaningful impact on performance (e.g. Javascript functions that change the website’s layout, injected apps, etc).

For this specific issue, it’s not very relevant since neither the header nor the footer have any pithy impact on the website’s performance.

With that said, you can remove the header/footer’s section in its entirety by simply:

  1. Navigate to the theme.liquid file
  2. Find " {% section ‘header’ %}" and " {% section ‘footer’ %}

diego_ezfy_0-1645476618975.png
diego_ezfy_0-1645476618975.png803×570 33.6 KB

  1. Delete them.

This will remove both the header and the footer from the website.

Kind regards,
Diego

1 Like