How do i hide my themes header??

Technical Q&A
, ,

Topic summary

Issue: A store owner bought a new header from an app and wants to hide the theme’s existing header that’s blocking it (site optimized for mobile).

Proposed solutions:

  • Use Theme Editor: Online Store > Themes > Customize, hover the Header section and click the eye icon to hide it. A screenshot was provided to illustrate this UI approach.
  • Add CSS to stylesheet: Online Store > Themes > Edit code > assets > styles.scss.css, append a rule to hide the header (e.g., .header.header-fixed–false.header-background–solid { display: none; }). A result screenshot was shared.
  • Edit theme.liquid: One reply suggests adding code near the end of theme.liquid (the main layout file) above , but the actual code snippet was missing, so that instruction is unclear/incomplete.

Notes:

  • Images/screenshots are central to understanding the Customize and CSS results.
  • theme.liquid is the primary layout file; styles.scss.css is the theme’s stylesheet; CSS “display: none” hides the element from view.

Status: No confirmation from the original poster; solutions offered but resolution unconfirmed.

Summarized with AI on December 19. AI used: gpt-5.
4

Hello @jasa11
Go to online store ----> themes ----> actions ----> edit code---->assets---->styles.scss.css
add this code at the end of the file.

.header.header-fixed--false.header-background--solid {
display: none;
}

result

13.png
13.png1317×919 180 KB

If this was helpful, hit the like button and accept the solution.
Thanks