Removing header and footer from Dawn template page

ryanortiz9
New Member
2 0 0

Hi everyone!

I'd like to create landing page with no header or footer so you cannot browse the rest of our site. I'm using the Dawn template and do not have any coding experience but am a quick learner if that's needed. 

Replies 18 (18)
diego_ezfy
Shopify Partner
2696 504 683

@ryanortiz9,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
.header-wrapper{
    display: none !important;
}

footer.footer{
    display: none !important;
}
</style>




Please let me know whether it works.

Kind regards,
Diego

ryanortiz9
New Member
2 0 0

Hi Diego 

Thanks for getting back so quickly! I added that code like you said and it was accepted. However, it took the header and off of the entire site. I'd like that edit only on one specific page. Is that possible??

LightYagami
Tourist
5 0 2

Every page will have a unique class to the body. Hide the header and footer on the specific page using the class. 

However, if you are hiding the header and footer, you are probably going for a Landing page independent of your website design. I don't suppose this is the right approach in that case. Because the page still loads all page resources and then hides them. I m looking for a {% layout none %}  option like we use in Shopify 1.0 version. 

sb11
Tourist
4 0 0

Did you find anything to work like {% layout none %} for 2.0? Using express shopify 2.0 free theme

 

Not trying to load and then hide things either

vika12
New Member
3 0 0

Hi,

i want to do this exactly as you postet but i don't really get it.

This is my page:

https://pandoxa.net/pages/unternehmen

Where do I need to adjust, so that there is no:

- announcement row

- header

- footer

 

on this page?

 

Best Regards and thanks a lot!

Andreas

 

vika12
New Member
3 0 0

Can anyone help me? I'm totally fine with a quick and dirty solution (even if they get loaded, I want to not display them on my specific page I just postet.

 

Thanks!

LightYagami
Tourist
5 0 2

Hi, 

 

You can hide them using CSS. 

 

Take a page-specific class from the body tag and hide the header and other sections using that class. 1.PNGBut your theme doesn't have the class to use. 

2.PNG

You can add this code to add a class to the body: {{ template | handleize }}

 

<body class="{{ template | handleize }} gradient">

 

Once you get the body class, use that class to hide the components and place them in the header tag. 

Ex:  .template-blog .header, template-blog .footer { display: none} 

 

You can also add the code to the specific page with a style tag, but that would not be efficient when the page load time is high. 

Ex:

<style>

.header, .footer { display: none }

</style>

 

Hope this helps!

 

 

sb11
Tourist
4 0 0

Not ideal to load and then hide things either with css 


Is there something that’s planned or works like {% layout none %} for 2.0? 

vika12
New Member
3 0 0

Hi LightYagami,

thanks a lot for helping me!

Unfortunally, i'm pretty much a noob. I tried to follow your instructions but I'm too stupid for it. I need more of a "one step to the other"-Instruction...

 

So, I understood I need to add a new class. I assume this must be done in the theme.liquid right? So I added <body class="{{ template | handleize }} gradient"> in the body section of theme.liquid. Nothing else, right?

 

Than you said I need to hide the components and place them in the header tag.

Now I don't know wich file to open for that. I named the new page "b2b" and when I search for this in the code, it only appears as page.b2b.json. Where do I find that  css file which  which relates to my specific page?

 

Thanks in advance!

Andreas

 

 

LightYagami
Tourist
5 0 2

@vika12 

 

Yes, add the body class in theme.liquid and also add the CSS at the end of head tag </head> which is also in the same theme.liquid file. 

 

@sb11  I agree with you. It's not the ideal case. Just a quick fix. So I tried a different approach. 

Shopify 2.0 is allowing .liquid templates as well. So you can create an LP with this template and use {% layout none %}. But this will disable the dynamic sections feature on the specific page. I also explored the alternative layouts option which boiled down to the same conclusion. 

 

 

 

sb11
Tourist
4 0 0

@LightYagami thats a good idea, pretty new to this, which dynamic sections features will I lose?

LightYagami
Tourist
5 0 2

@sb11 In Shopify 1.0, we can add the sections on the Homepage only. All other pages have static sections only. 

 

Now in Shopify 2.0, that feature is extended to all pages. We can use all sections available in HP on other pages as well. 

1.PNG

 

You can read the Shopify 2.0 new features list to understand this better. 

https://www.shopify.com/partners/blog/shopify-online-store

 

Hope this help!

diego_ezfy
Shopify Partner
2696 504 683

@sb11 

You're correct, it's not ideal indeed, most especially in cases where you're hiding elements that take a meaningful impact on performance (e.g. Javascript functions that change the website's layout, injected apps, etc).

For this specific issue, it's not very relevant since neither the header nor the footer have any pithy impact on the website's performance.

With that said, you can remove the header/footer's section in its entirety by simply:

1. Navigate to the theme.liquid file
2. Find " {% section 'header' %}" and " {% section 'footer' %}

diego_ezfy_0-1645476618975.png

3. Delete them. 

This will remove both the header and the footer from the website.


Kind regards,
Diego

UTKbuilder
Shopify Partner
9 0 9

@LightYagami @ryanortiz9 

 

You can use an alternative layout by setting the layout attribute it in the JSON template, instead of using {% layout none %}. It gives you the access to use section on the page. The layout attribute is mentioned here: https://shopify.dev/themes/architecture/templates/json-templates#schema

 

I am now trying to get the template editor to work properly with the page. For some reason it edits the new page template, but saves to the "default page".

 

edit

I also found the solution to the "default page" problem I mentioned above: If you put a link to the page somewhere on your main page and navigate to it through the theme editor tool, the tool will correctly interpret the page template you are using.

The problem I mentioned with "default page" happened because I went to a page that uses the default page, then used the 'change' link (in the upper left side of the screen) and selected the page that uses an alternative layout. In this case the theme editor tool does not interpret which template to edit correctly.

sb11
Tourist
4 0 0

@diego_ezfy seems to be workaround but we don't want to remove the header/footer in its entirety from all pages, its just for certain pages like a custom long form sales/landing page, we dont want load header/footer and hide and make spacing adjustments for phantom elements. I'm not an expert but before 2.0, in another thread they explained that this problem was easily accomplished by {% layout none %} not loading the header/footer and still allowing it across other pages on the theme.

UTKbuilder
Shopify Partner
9 0 9

@sb11 

 

You can set the layout to use in the JSON file as mentioned above.

 

I also found the solution to the "default page" problem I mentioned above: If you put a link to the page somewhere on your main page and navigate to it through the theme editor tool, the tool will correctly interpret the page template you are using.

The problem I mentioned with "default page" happened because I went to a page that uses the default page, then used the 'change' link and selected the page that uses an alternative layout.

diego_ezfy
Shopify Partner
2696 504 683

@sb11 

Then you can use the page handle paired with "ifs" and load it up wherever it's appropriate. Perhaps not the most elegant solution depending on how many pages you'll have, but it's certainly good enough.

For instance, the following piece of code:

{% if page.handle == 'index' %}
  {% section 'header' %}
{% endif %}


Would load the header only at the homepage.


LightYagami
Tourist
5 0 2

@UTKbuilder You are right. I tried it in my theme and it worked fine. The answer was there all along. Thank you for sharing this. 

 

@sb11  Here is the alternative for {% layout none %} with the new dynamic sections feature for Shopify 2.0

1.PNG

2.PNG

 

 

The only small inconvenience is when you try to edit this page in the "Customize" Theme editor. Its not getting detected by default. You will have to edit the URL in the theme editor or add this page link somewhere on the homepage and click and redirect to the page in theme editor. 

 

Cheers!