Remove header and footer

Technical Q&A
, ,

Topic summary

A user asks how to remove the header and footer from a specific page in their Studio theme.

Proposed Solution:

  • One responder suggests adding a “Custom liquid” section to the page’s template
  • The solution uses CSS code to hide the header, announcement bar, and footer using display: none
  • This approach works for Dawn family themes and only affects pages using that specific template
  • The method avoids direct theme code edits to maintain easy theme updates

Status:
The discussion remains open with two additional users requesting the specific page URL to provide more tailored code recommendations. No confirmation yet on whether the proposed solution was implemented or successful.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

How can I remove the header and footer for a specific page? My theme is studio.

Thank you

2

I believe you have a special template for this page, right?

Then, in Customize add a “Custom liquid” section to this Template area and paste the following code:

<style>
  #shopify-section-header,
  #shopify-section-announcement-bar,
  #shopify-section-footer {
    display:  none;
  }
</style>

The code hides header, announcement bar and footer. Since code added to this particular template, it will only apply to the pages using this template.

The solution should work for any theme from the Dawn family.

Of course, it’s possible to fully remove those elements via theme code edit, but I do not recommend it to keep your theme easily updatable.

4

Would you mind sharing this specific page URL here? I need to take a closer look and decide which code is available on your theme.

5

Hi @user1860

It would be great if you could share the link to your page! That way, I can help you with the correct code.