Shopify themes, liquid, logos, and UX
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.
@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
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??
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.
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
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
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!
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. But your theme doesn't have the class to use.
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!
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?
@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' %}
3. Delete them.
This will remove both the header and the footer from the website.
Kind regards,
Diego
@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.
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.
@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.
Once you remove both header and footer and add where your section or landing page it should be okay..
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
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.
@LightYagami thats a good idea, pretty new to this, which dynamic sections features will I lose?
@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.
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!
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.
@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
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!
How do I turn off the header (inc menus and everything else) for just desktop?
this video shows how to do exactly what you want while keeping the rest of your website normal. It is easy if you follow these steps, be sure to duplicate your page before messing with the code just to be safe: https://www.youtube.com/watch?v=OOwObE0rKGU
This is the best answer
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024