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.
Table of Contents
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.
—
Shopify Web Development in Lagos, Nigeria
Overall, engaging the service of a professional Shopify ecommerce developer is one of the best business-savvy decisions you’d ever make when you finally decide to create an ecommerce presence for your thriving brand. At Web Design Nigeria, our goal is to help ensure that your online business is successfully converting prospective customers to paying ones,
If you are tired of stale and outdated websites and need a revamp or need to build a functional website for your business?
We specialize in creating Elegant and functional online shopping website that is both engaging and appealing; a website that is thoughtfully crafted as an alluring touchpoint for your potential customers.
With a focus on user experience and search engine optimization, our team of expert designers will work with you to create a website that accurately represents your brand and effectively promotes your business.
Together we can create a lasting online presence that converts into saless for your e-commerce business. Call us today at 08114900422 or Email us.
