Remove Header, Nav and Footer Containers for landing page only

Highlighted
New Member
1 0 0

Hi Shopify-ers!

I'm trying to learn how to set up my first landing page and hit a snag.  I'm completely new to liquid and very new to dev.

I want to remove my: Header, Nav and Footer Containers from a landing page only.  From what I've been reading on the forum I think I need to build a separate layout like a theme.nonav.liquid.

1) What code do I use and where do I put this code to get a page to reference this layout.

2) What is the code container that makes code within it hidden? (maybe called hidden div?)

3) Where should I put this "hidden div" container around?

Would really appreciate the help.

Thanks,
Doug

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
368 0 38

Hello Mojo, Ben here - your Shopify Guru! 

  You can do this using simple css. 

What page are you looking to do this on ? To hide it on all pages of the site you can add the following css to the bottom of your main.css file in your assets folder.  

You can hide the nav using this:

nav {
  display:none;
}

To hide your footer section add the following:

.bottom-footer {
  display:none;
}

 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

1 Like
Highlighted
New Member
54 0 0

Hello,

 

I just have the same issue. I went to my assets folder and could not find my main.css file. Could you give more details as I am not good with coding? 

 

Thanks

Marta

0 Likes
Highlighted
Shopify Staff
Shopify Staff
368 0 38

Hey Marta, 

 For your theme just put the code in theme.scss.liquid inside your assets folder.

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben Czegeny 
Shopify Support.

0 Likes
Highlighted
New Member
54 0 0

Hi! thannks for your fast reply. 

here you go a screenshot of what I did for the header, but still not working :(

Thanks

0 Likes
Highlighted
Shopify Partner
9 0 0

You paste Benjamin C code at bottom line in theme.scss.liquid file. 
 

KnP Easy shopify service. We ready to help you. Please send your requirements to knpeasy@gmail.com
0 Likes
Highlighted
Tourist
11 0 5

Hi,

I looked into doing this to. I couldn't figure out the 'create new layout' etc.

I just created a new page template, and adapted bens code and added it above everything on the page template:

<style>

nav { display:none; }

header { display:none; }

footer { display:none; }

</style>

 

Then create a new page in shopify as normal and select your new page template from the 'template' box on the right.

I don't know much about coding, but this seemed to work okay for me. Can any confirm this is a good way to do it?

3 Likes
Highlighted
New Member
2 0 0

Hey All, I like or remove or hide top navigation or reader from product and collection pages when scrolling down.

    <!-- Header -->
  <header id="top" class="fadeInDown clearfix">
    {% include 'header' %} 
           </header>
  <div id="content-wrapper-parent">
    <div id="content-wrapper">  
      {% if template == 'index' %}
      {% include 'home-carousel' %}
      {% endif %}  
      <!-- Content -->
      <div id="content" class="clearfix">        
        {% if template != 'index' %}
        {% include 'breadcrumb' %}
        {% endif %}        
        <section class="content">
          {% if template != 'index' %}
          {% if template != 'page.contact' %}
          <div class="container">
            <div class="row">
              {% endif %}
              {% endif %}
              {% if template == 'list-collections' %}
              {% include 'collection-listing' %}
              {% else %}
              {{ content_for_layout }}{% include 'vnavs' %}
              {% endif %}
              {% if template != 'index' %}
              {% if template != 'page.contact' %}
              </div>

0 Likes
Highlighted
Tourist
7 0 1

I have created a page.NAME.template.. then within add {% if page.handle == 'NAME' %} DO ALL I ASK {% endif %} Everything has been working smoothly except when I got down to footer.

I was able to remove the header using $('header').remove();

But doing the same for footer has no effect. $('footer').remove();
- but the strange thing is when I run this line within my console it removes the footer.

I have also tried adding {% unless page.handle == "NAME" %} <footer></footer>{% endunless %} within the theme.liquid file to remove the footer for the spcific page and still nothing.. 

Im stumpped.. What can I do to remove this footer.. not to sure why this is the case.. maybe something in shopify backend that is dissalowing this line to run... 

You can check https://sport.levelwear.com/pages/verve and review the console.. there does not seem to be any errors on my end.

Thanks in advance to who ever can help out with this.. 

0 Likes
Highlighted

Hi Doug,

You can use the alternative method of building the landing page without header and footer. Try PageFly Shopify page builder app. You can make the landing page in the way you want to.

I've also noticed that you're using Launchpad Shopify theme. With PageFly you can build the template similar to Launchpad and re-use that template style for buildilng other landing pages normally. Also, you can build landing page content in addition to your product pages. Customized product landing page will definitely benefit with Google Ads Score ranking and Ads relevancy of Facebook.

Just give a try with the app and if you need any help just let me know.

❤️ Found my answer helpful? Please LIKE or Accept Solutions.
❤️Shopify Calculator - What's the Cost of a Shopify Store? Read More
0 Likes