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.
2

Hey @jasa11

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like