Remove Header and Footer From Specific Page [Shopify] -

Welcome to Websense Pro, your go-to resource for Shopify web design, development, and WordPress tutorials. In today’s post, we’ll walk you through removing the header and footer from your Shopify store’s homepage, specific product pages, or even all product pages. This is particularly useful when creating landing pages for ad campaigns where you want a streamlined look without distractions.

Add the following CSS code just below *<head>* in theme.liquid file

<style>
.header-wrapper{
    display: none !important;
}

footer.footer{
    display: none !important;
}
</style>

For Hiding Header And Footer From Homepage Only:

{% if template.name == "index" %}
ADD CSS CODE HERE
{% endif %}

For Hiding Header and Footer on All Product Pages:

{% if product %}
ADD CSS CODE HERE
{% endif %}

For Hiding Header and Footer on Specific Product Pages:

{% if product.handle == "your-product-handle" %}
ADD CSS CODE HERE
{% endif %}

For Hiding Header and Footer on Specific Collection Pages:

{% if collection.handle == "your-collection-handle" %}
ADD CSS CODE HERE
{% endif %}

For Hiding Header and Footer on Specific Template Pages:

{% if template contains "your-template-name" %}
ADD CSS CODE HERE
{% endif %}

or use the following condition:

{% if page.title == "Page Title" %}
ADD CSS CODE HERE
{% endif %}

Remove Header and Footer From Specific Page [Shopify]

Categories

Recent Posts

Have Any Questions?