Solved

How to create a simple landing page without header and footer?

BValverde
Tourist
9 0 3

Hi everybody !

To give you some context, I would like to have a simple landing page to collect email address with the names but without the header and footer while having them for the other pages. I've tried to add codes that I've seen here but without any result, like this one :

{% if page.handle == '...' %}
<style>
.header-wrapper.color-background-1.gradient, footer.footer.color-accent-1 {display: none;}
</style>
{% endif %}

I'm using the theme Impact and here's the theme.liquid code :

{%- comment -%}
------------------------------------------------------------------------------------------------------------------------
NOTE TO DEVELOPERS: welcome to Impact theme! We hope that you will enjoy editing this theme as much as we did for
  developing it. We have put a lot of work to make this theme as developer friendly as possible by offering you
  hooks to integrate into critical parts of the theme. You will find the complete technical documentation (including
  all events, dependencies...) in the "documentation.txt" file, located in the Assets folder.
------------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

<!doctype html>

<html class="no-js" lang="{{ request.locale.iso_code }}" dir="{% render 'direction' %}">
  <head>{% render 'pagefly-head' %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="theme-color" content="{{ settings.header_background }}">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MCLGF4N');</script>
<!-- End Google Tag Manager -->
    <title>{% if page_title == blank %}{{ shop.name }}{% else %}{{ page_title }}{% if current_page != 1 %} &ndash; {{ 'general.page' | t: page: current_page }}{% endif %}{% endif %}</title>

    {%- if page_description -%}
      <meta name="description" content="{{ page_description | escape }}">
    {%- endif -%}

    <link rel="canonical" href="{{ canonical_url }}">

    {%- if settings.favicon -%}
      <link rel="shortcut icon" href="{{ settings.favicon | image_url: width: 96 }}">
      <link rel="apple-touch-icon" href="{{ settings.favicon | image_url: width: 180 }}">
    {%- endif -%}

    {%- comment -%}Few prefetch to increase performance on commonly used third-parties{%- endcomment -%}
    <link rel="preconnect" href="https://cdn.shopify.com">
    <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
    <link rel="dns-prefetch" href="https://productreviews.shopifycdn.com">

    {%- unless settings.heading_font.system? -%}
      <link rel="preload" href="{{ settings.heading_font | font_url }}" as="font" type="font/woff2" crossorigin>
    {%- endunless -%}

    {%- unless settings.text_font.system? -%}
      <link rel="preload" href="{{ settings.text_font | font_url }}" as="font" type="font/woff2" crossorigin>
    {%- endunless -%}

    {%- render 'social-meta-tags' -%}
    {%- render 'microdata-schema' -%}
    {%- render 'css-variables' -%}
    {%- render 'js-variables' -%}

    <script type="module" src="{{ 'vendor.min.js' | asset_url }}"></script>
    <script type="module" src="{{ 'theme.js' | asset_url }}"></script>
    <script type="module" src="{{ 'sections.js' | asset_url }}"></script>

    {{ content_for_header }}

    {{- 'theme.css' | asset_url | stylesheet_tag: preload: true -}}
  </head>

  <body class="{% if settings.show_page_transition %}page-transition{% endif %} {% if settings.zoom_image_on_hover %}zoom-image--enabled{% endif %}">
    <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MCLGF4N"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
    {%- render 'shadow-dom-templates' -%}

    <a href="#main" class="skip-to-content sr-only">{{ 'general.accessibility.skip_to_content' | t }}</a>

    {%- if request.page_type != 'password' -%}
      {%- sections 'header-group' -%}
      {%- sections 'overlay-group' -%}

      {%- if settings.cart_type == 'popover' -%}
        <cart-notification-drawer open-from="bottom" class="quick-buy-drawer drawer"></cart-notification-drawer>
      {%- endif -%}
    {%- endif -%}

    {%- if request.page_type == 'customers/account' or request.page_type == 'customers/order' or request.page_type == 'customers/addresses' -%}
      {%- section 'account-banner' -%}
    {%- endif -%}

    <main role="main" id="main" class="anchor">
      {{ content_for_layout }}

      {%- comment -%}
      IMPLEMENTATION NOTE: due to the very complex logic of margin/padding collapsing in Impact, the footer group is
      added into the main element to ensure that dynamic sections added into the footer group are properly laid out.
      {%- endcomment -%}
      {%- if request.page_type != 'password' -%}
        {%- sections 'footer-group' -%}
      {%- endif -%}
    </main>
   {% include 'smile-initializer' %}
</body>
</html>

Thanks in advance for everyone's help !

Accepted Solution (1)
Moeed
Shopify Partner
3767 952 1184

This is an accepted solution.

Hey @BValverde 

 

You can try this updated code

{% if page.handle == "conseil_utilisation" %}
<style>
.header {
    display: none !important;
}
.announcement-bar {
    display: none !important;
}
.footer {
    display: none !important;
}
.text-with-icons {
    display: none !important;
}
</style>
{% endif %}

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
3767 952 1184

Hey @BValverde 

 

Can you send me the link of the page from where you'd like to hide the header and the footer from?

 

Best Regards,

Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
BValverde
Tourist
9 0 3

Hey @Moeed 

 

I did not created the page yet but for now I'm testing everything on this page : https://yosocandles.com/pages/conseil_utilisation

Best Regards,

Bastien

Moeed
Shopify Partner
3767 952 1184

Hey @BValverde 

 

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 </body> tag.

{% if page.handle == "conseil_utilisation" %}
<style>
.header {
    display: none !important;
}
.footer {
    display: none !important;
}
</style>
{% endif %}

RESULT:

Moeed_0-1712140968064.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
BValverde
Tourist
9 0 3

It worked perfectly !

 

Do you know if it would be possible to do this for the all header and footer group so I don't have the announcement bar (which is part of the section header group) and the text with icon (which is part of the section footer group).

 

Thanks again for your help !

Moeed
Shopify Partner
3767 952 1184

This is an accepted solution.

Hey @BValverde 

 

You can try this updated code

{% if page.handle == "conseil_utilisation" %}
<style>
.header {
    display: none !important;
}
.announcement-bar {
    display: none !important;
}
.footer {
    display: none !important;
}
.text-with-icons {
    display: none !important;
}
</style>
{% endif %}

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
BValverde
Tourist
9 0 3

It works perfectly thanks ! 

 

Moeed
Shopify Partner
3767 952 1184

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
nicolelaleh
Visitor
1 0 0

Hi, i feel as though i've tried many different version provided from a few threads and none have worked for me. 
Can someone help me?

https://4b6487-60.myshopify.com/pages/apply-to-work-with-me