Do you know you can hide the header and footer of your Shopify website on Specific pages? This is especially useful in several cases, one of which is when you’re building a landing page on the Shopify store and you don’t want the header and footer to be visible on this specific page. This guide will show you a simple trick to implement just that.
Shopify is a leading Canada-based managed eCommerce platform popular among ecommerce merchants and online entrepreneurs worldwide. The platform allows you to set up your online store with in-built plugins and features that make selling 10x easier for its users, with less burden on technical aspects of your ecommerce.
Shopify is most appreciated for the wide range of functionalities it offers, a user-friendly interface, and customizable options.
One customization option, however, that proves a little difficult for Shopify users to utilize is the ability to hide headers and footers on specific Shopify pages. There are different ways to hide the head and footer in Shopify, we will outline some simple steps in this article.
Methods To Hide Header And Footer On Specific Page On Shopify
It is possible to hide the header and footer on a specific page on Shopify, and not as difficult as you might think, so far you follow the steps. There are two major methods to get this done:
- By Conditionally Outputting Parts Of A Shopify Theme
- By Including Footer/Header Removal Codes
Conditionally Outputting Parts Of A Shopify Theme
One of the ways to hide headers, footers or any other part of a Shopify theme on a specific Shopify page is to conditionally output them. To achieve this on Shopify, follow these instructions:
- From your Shopify theme, check for the “theme.liquid” file and open it
- Inside this file, search for the header and footer code of the specific Shopify pages
- Wrap an “If” statement that checks for certain condition around the code
- Proceed to save the file.
Including A Footer Removal Codes
Another simple, yet effective method to remove both header and footer from their specific is by editing or inserting a certain code into the page. Remove headers and footers by inserting the following codes:
- For Headers:
{% layout none %}
- For Footers:
Insert this code into the “theme.liquid” file.
{% if settings.powered_by_link %}
<div class=”powered-by-shopify”>
{{ ‘powered_by_shopify’ | t }} <a href=”{{ settings.powered_by_link }}” target=”_blank”>{{ ‘shopify’ | t }}</a>
</div>
{% endif %}
—
In conclusion…
These few steps for conditionally outputting and code insertion will hide the headers and footers on specific pages of your Shopify website. Follow them methodically and you will get the desired results.