Removal of header and footer on specific pages (savour theme)

Technical Q&A
1

Hey guys - I created two landing pages sspecifically for ads to land on. Each with its own template in the customise theme (savour). The reason is I do not want the visitor to be distracted by the header navigation or information at footer.

Does anyone have a solution to hide the header and footer section as when i tried to hide, it hides on all pages that are published.

3

Thanks - i added the code

however the whole page has doubled after the first section - it repeats the whole page layout

5

I did that but nothign appears.

See code below:

<html

class=“no-js{% if request.design_mode %} shopify-design-mode{% endif %}”

lang=“{{ request.locale.iso_code }}”

>

{% unless template contains ‘pyralit-ignition’ %}

{% sections ‘header-group’ %}

{% endunless %}

{%- if settings.favicon != blank -%}

<link

rel=“icon”

type=“image/png”

href=“{{ settings.favicon | image_url: width: 32, height: 32 }}”

>

{%- endif -%}

{% comment %} This a way to wait for main content to load when navigating to a new page so that the view transitions can work consistently {% endcomment %}

<link

rel=“expect”

href=“#MainContent”

blocking=“render”

id=“view-transition-render-blocker”

>

{%- render ‘meta-tags’ -%}

{%- render ‘stylesheets’ -%}

{%- render ‘fonts’ -%}

{%- render ‘scripts’ -%}

{%- render ‘theme-styles-variables’ -%}

{%- render ‘color-schemes’ -%}

{% if request.design_mode %}

{%- render ‘theme-editor’ -%}

{% endif %}

{{ content_for_header }}

{% render ‘skip-to-content-link’, href: ‘#MainContent’, text: ‘accessibility.skip_to_text’ %}

{% sections ‘header-group’ %}

<main

id=“MainContent”

class=“content-for-layout”

role=“main”

data-page-transition-enabled=“{{ settings.page_transition_enabled }}”

data-product-transition=“{{ settings.transition_to_main_product }}”

data-template=“{{ template }}”

>

{{ content_for_layout }}

{% sections ‘footer-group’ %}

{% unless template contains ‘pyralit-ignition’ %}

{% sections ‘footer-group’ %}

{% endunless %}

{% render ‘search-modal’ %}

{% if settings.quick_add or settings.mobile_quick_add %}

{% render ‘quick-add-modal’ %}

{% endif %}

6

Since each of those pages have special template, simply add the “Custom liqiud” section in these templates and paste code like this:

<style>
.shopify-section-group-header-group,
.shopify-section-group-footer-group {
  display: none;
}
</style>

No need to edit theme code which will make future theme updates complex.

Since this code is added as part of the template, it will only apply to the pages using this template.

1 Like
7

@oscprofessional It’s all good and fun to put a laughing emoji, but I wonder why.

Please, provide reasons why my solution is worse then yours.

The benefits of my solution are obvious – no need to edit theme code, which can be complex for some people.

When Shopify comes up with a theme update which adds functionality or fixes bugs in my case it is a straightforward automatic update, in yours – one will most likely need to re-apply these edits manually.

The code you’ve provided is not complete and topic starter has problems implementing your “solution”.
Mine is an easy – just add a section and copy/paste code.

The only possible drawback of my solution is that the header and footer are only hidden, but are still rendered.
This, however, can be a benefit as well, as some theme Javascript code depends on the header elements, like menu being present in HTML.
This may not be important in some cases, but not always.

My code also covers for other elements, like announcement bar, while your “solution” does not.

Finally, if going via theme code edit route, an architecturally better option could be to create an alternate layout file (basically create a copy and remove header and footer) and use the “layout” parameter in template files rather than using {% unless template contains 'your_template_name' %} in main layout file.

1 Like
8

@tim_1 ,

The answer is already given by you, its drawback by HTML presence.
When it comes to the SEO points, the extra HTML still load in behind which is not required.

1 Like
9

It’s impact is minimal on SEO.
“Hidden content” was a thing like 10 years ago, now SEs mostly ignore hidden information.

What you’re saying is that basically, mobile navigation harms desktop SEO and desktop menu harms SEO for mobile view? Still most themes have separate elements for mobile drawer nav and desktop menu…

If effect is there, it should be compared to complexities arising from theme edits.
Old theme=> Slow theme which does not support modern technologies=> Higher penalty to SEO.

1 Like