How to remove header, footer and announcement bar from single /page

Technical Q&A
,

Topic summary

Goal: Hide header, footer, and announcement bar on a single Shopify page (Dawn 15.0.0) using theme.liquid.

What was tried: Conditional CSS with page.id targeting IDs (#shopify-section-announcement-bar, #shopify-section-header, #shopify-section-footer) after . Switching to page.handle was suggested but did not help.

Key issue: CSS selectors didn’t match Dawn 15’s DOM. The announcement bar is part of the header section group, so the old individual IDs weren’t effective.

Working solution: Keep the conditional on the specific page (page.id == 139152523573) and target the section group wrapper instead of individual IDs. Using the selector .shopify-section-group-header-group successfully hid the header/announcement bar group on that page.

Outcome: Confirmed working by the original poster. The change implies Dawn 15 groups header elements, requiring group-level selectors. Footer specifics weren’t detailed after the fix, but the thread indicates the approach resolved the need. Discussion resolved.

Notes: Central code snippets were key to understanding the solution.

Summarized with AI on December 25. AI used: gpt-5.
1

I’m trying to hide the header, footer and announcement bar on a single /page with page id 139152523573

I’m using Dawn 15.0.0 theme

How can I do this? I tried using the below code after in theme.liquid, but it didn’t work…

{% if page.id == 139152523573 %}

#shopify-section-announcement-bar, #shopify-section-header, #shopify-section-footer { display: none !important; }

{% endif %}

2

Hello @MathewJ ,

Seems correct but if not working try to use with page handle

{% if page.handle == 'your-page-handle' %}
  
{% endif %}

Replace ‘your-page-handle’ with actual value
e.g. my page url is example.com/pages/about-me

in this case my page handle is ‘about-me’ and my value should be ‘about-me’

Thanks

3

Hi Guleria,

Thanks for the advice. Unfortunately it still doesn’t hide the three elements. I’m added code to theme.liquid file just below

Any idea why?

4

Code is 100% correct. You need to crosscheck the css selector
#shopify-section-announcement-bar, #shopify-section-header, #shopify-section-footer

In your page html exists with these selectors ?

5

Hi @MathewJ

Please update your code to this and check again

{% if page.id == 139152523573 %}

{% endif %}
6

Hi Dan, that seemed to work! Thanks mate

1 Like
7

Dan’s solution seemed to work. Looks like .shopify-section-group-header-group, is the correct format, and announcement bar is part of section header group

8

You are very welcome!