Home App Docs Blog Github

How do I hide the header and footer on Shopify landing pages?

When creating custom Shopify landing pages in Builder using theme studio you can choose to hide the header and footer of your site. This is useful if you want to create a custom landing page that looks and feels different from your site. If you choose to hide the header and footer on your page, your theme’s menu and footer, as well as other elements on the page, will be hidden by builder content.

To do that, create a new custom landing page in Builder, or navigate to one you have already made. Next, click the options tab. You will see the option to hide header and footer, as well as choose a background color:

Toggling “hide header and footer” will allow you to see what your new page looks like with and without a header/footer.

1 Like

Hi,

The best solution I could come up is with a jQuery Code in the HTML of that specific page that would add a CSS code in the header with property display: none for header and footer.

Many thanks

Rudransh

Hi @rudransh :wave:

You should be able to hide your header and footer on landing pages using the steps outlined in the post above. Do you see this option on your end?

Are you able to hider just the header or just the footer? I see the button that’s an on/off for both but we’d like to hide the header on our LPs and keep the footer. Thanks!

Hi @sensitivehome,

There isn’t a default setting in Builder to only hide the header or footer, but you can add custom CSS to hide just the header. Feel free to send the link to the Builder page you’d like the header hidden on and we’d be happy to point you in the right direction.