Solved

remove header and footer from specific product page

Phigolf
Shopify Partner
18 0 1

hi im using Kalles 2.7.2 templete 
i want to remove the header and navigation bar, and footer... help me plz

 

Phigolf_0-1635489103100.png

 

Phigolf_1-1635489111040.png

its same page!!

url : https://phinetworks.myshopify.com/ 

Accepted Solution (1)

LitExtension
Shopify Partner
4860 1001 1135

This is an accepted solution.

Hi @Phigolf,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to layout > theme.liquid, find 'content_for_header' and add code here: https://i.imgur.com/oc7ADNT.png => https://i.imgur.com/6nfZbIg.png
+ With 1 product:

{%- if product.handle == 'product handle' -%}
	<style>
	  /* hide header navigation */
	  header .nt_navigation{
		display: none !important;
	  }
	  /* hide breadcrumb */
	  .breadcrumb_pr_wrap{
		display: none !important;
	  }
	  /* hide footer */
	  footer{
		display: none !important;
	  }
	  </head>
	</style>
{%- endif -%}

+ With 2 products:

{%- if product.handle == 'product 1 handle' or product.handle == 'product 2 handle' -%}
	<style>
	  /* hide header navigation */
	  header .nt_navigation{
		display: none !important;
	  }
	  /* hide breadcrumb */
	  .breadcrumb_pr_wrap{
		display: none !important;
	  }
	  /* hide footer */
	  footer{
		display: none !important;
	  }
	  </head>
	</style>
{%- endif -%}

Ex: with https://phinetworks.myshopify.com/collections/phigolf-1/products/phigolf-line-friends-edition
=>
product handle: phigolf-line-friends-edition
Code:

{%- if product.handle == 'phigolf-line-friends-edition' -%}
	<style>
	  /* hide header navigation */
	  header .nt_navigation{
		display: none !important;
	  }
	  /* hide breadcrumb */
	  .breadcrumb_pr_wrap{
		display: none !important;
	  }
	  /* hide footer */
	  footer{
		display: none !important;
	  }
	  </head>
	</style>
{%- endif -%}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 2 (2)

ZestardTech
Shopify Expert
5393 971 1293

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout/theme.liquid and paste this at the bottom of the file:

{%if product.handle == "enter the product handle" %}
<style>
header#ntheader {
display: none;
}
footer#nt_footer {
display: none;
}
</style>
{%endif%}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

LitExtension
Shopify Partner
4860 1001 1135

This is an accepted solution.

Hi @Phigolf,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to layout > theme.liquid, find 'content_for_header' and add code here: https://i.imgur.com/oc7ADNT.png => https://i.imgur.com/6nfZbIg.png
+ With 1 product:

{%- if product.handle == 'product handle' -%}
	<style>
	  /* hide header navigation */
	  header .nt_navigation{
		display: none !important;
	  }
	  /* hide breadcrumb */
	  .breadcrumb_pr_wrap{
		display: none !important;
	  }
	  /* hide footer */
	  footer{
		display: none !important;
	  }
	  </head>
	</style>
{%- endif -%}

+ With 2 products:

{%- if product.handle == 'product 1 handle' or product.handle == 'product 2 handle' -%}
	<style>
	  /* hide header navigation */
	  header .nt_navigation{
		display: none !important;
	  }
	  /* hide breadcrumb */
	  .breadcrumb_pr_wrap{
		display: none !important;
	  }
	  /* hide footer */
	  footer{
		display: none !important;
	  }
	  </head>
	</style>
{%- endif -%}

Ex: with https://phinetworks.myshopify.com/collections/phigolf-1/products/phigolf-line-friends-edition
=>
product handle: phigolf-line-friends-edition
Code:

{%- if product.handle == 'phigolf-line-friends-edition' -%}
	<style>
	  /* hide header navigation */
	  header .nt_navigation{
		display: none !important;
	  }
	  /* hide breadcrumb */
	  .breadcrumb_pr_wrap{
		display: none !important;
	  }
	  /* hide footer */
	  footer{
		display: none !important;
	  }
	  </head>
	</style>
{%- endif -%}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify