Re: Remove Header from 1 Page

Remove Header from 1 Page

MoniqueA7
Tourist
3 0 1

Hello!

 

We are using the Dawn theme for our website, and can't figure out how to remove the header from just 1 page. Plus, when we do remove the header it leaves a big blank space at the top across the entire website. I've tried several different code options and none work. Would appreciate any help

 

Thank you,

Monique 

Replies 8 (8)

ankitpateldev
Shopify Partner
19 1 2

Hi @MoniqueA7 ,

 

May I know from which page would you like to remove header? So I can guide you accurately

 

About the concern you can exclude header from specific page by following below steps:

1) Move a head to Edit code and open theme.liquid file from layout

2) find the line {% sections 'header-group' %}

3) wrap it into the condition like below

 

{% unless template == ‘PAGE_TEMPLATE_NAME’ %}
{% sections 'header-group' %}
{% endunless %}

Note: Replace “PAGE_TEMPLATE_NAME” with your page template name that you wish to exclude header from.

 

Let me know if you have any further question or need more guidance.

Best regards,
Ankit Patel | Shopify Expert
MoniqueA7
Tourist
3 0 1

Hi! I must have messed something up. When I added that code it created two headers on every page. The name of the page is '9 Pines Landing Page'. Attached are screenshots of where/how I added the code and what happened to the website

 

Thank you! Screen Shot 2024-07-19 at 4.43.55 PM.pngScreen Shot 2024-07-19 at 4.43.47 PM.png

Made4uo-Ribe
Shopify Partner
8228 1975 2419

I cant replicate the 2header in your publish theme.

Made4uoRibe_0-1721429438513.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ankitpateldev
Shopify Partner
19 1 2

It’s showing twice because you put the code directly and not replaced with the line that already exists. First find the line {% section ‘header-group’ %}

then replace below code

{% unless page.title == ‘9 Pines Landing Page’ %}
{% section ‘header-group’ %}

{% endunless %}

Best regards,
Ankit Patel | Shopify Expert

Made4uo-Ribe
Shopify Partner
8228 1975 2419

Hi @MoniqueA7 

Just like to clarify, which page 1 you mean to? It is the homepage? 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
MoniqueA7
Tourist
3 0 1

No, its to a page that is linked in our foot navigation. It's title '9 Pines Landing Page'. To make it, I went to 'Online Store' > 'Pages' > 'Add Page'

Made4uo-Ribe
Shopify Partner
8228 1975 2419

Hi @MoniqueA7 

You can add this code in your theme.liquid. See image for placement

{% if page.title == "9 Pines Landing Page" %}
  <style>
  .shopify-section.shopify-section-group-header-group.section-header {
    display: none;
  }
  </style>
{% endif %}

 
Placement:

Made4uoRibe_0-1721437442588.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

 

 

 

 

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
GTLOfficial
Shopify Partner
543 115 108

Hello @MoniqueA7 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css ----> line number 2328
search this code

.header-wrapper {
display: flex;
position: relative;
background-color: rgb(var(--color-background));
}


and replace with this code

.header-wrapper {
display: none;
}

and the result will be

1.png


If this was helpful, hit the like button and mark the job as completed.
Thanks

 

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: [email protected] - Skype: ritesh_27dh