How to hide Header and Footer on specific Shopify Page

Step 1: You need to be able to target a specific page with CSS. Go to your theme.liquid file and find the <body> tag

Step 2: Add this code to the body tag

 id="{{ page_title | handle }}"

So that your body tag looks like this:

<body id="{{ page_title | handle }}" >

Step 3: Then before the end of the body tag in theme.liquid add this code:

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

#quiz .footer{
    display: none !important;
}

Replace #quiz with the title of your page. So if your page is titled Landing page, it would be #Landing-Page

Step 4: Click save and check how the page looks.

Create your own Shopify store

Shopping Cart