Remove Header and Footer from a certain page - Stilletto theme

gina16 · ‎05-13-2025

Hi,

I would like to remove the header, footer, Menu and announcement bar from this page only. https://kiki-health.com/pages/product-catalogue

Any help would be appreciated!

Thank you

Gina

websensepro · ‎05-13-2025

Hi @gina16 ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code after <body>

<script>
  if (window.location.pathname === '/pages/product-catalogue') {
    document.querySelector('.sticky-header-enabled .shopify-section.header__outer-wrapper').style.display = 'none';
    document.querySelector('.shopify-section.footer__parent').style.display = 'none';
  }
</script>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

View solution in original post

Moeed · ‎05-13-2025

Hey @gina16

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if page.handle == "product-catalogue" %}
<style>
header, footer {
    display: none !important;
}
</style>
{% endif %}

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

suyash1 · ‎05-13-2025

@gina16 - add this code to the end of your theme.liquid file before </body> and check,

{% if page.handle == "product-catalogue" %}
<style>
.shopify-section.header__outer-wrapper {display:none; visibility:hidden;}
.shopify-section.footer__parent{display:none; visibility:hidden;}
</style>
{% endif %}

To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com

websensepro · ‎05-13-2025

Hi @gina16 ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code after <body>

<script>
  if (window.location.pathname === '/pages/product-catalogue') {
    document.querySelector('.sticky-header-enabled .shopify-section.header__outer-wrapper').style.display = 'none';
    document.querySelector('.shopify-section.footer__parent').style.display = 'none';
  }
</script>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

devcoders · ‎05-13-2025

Hello @gina16

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 page.handle == 'product-catalogue' %}
<style>
.announcement-bar {
display: none;
}
.header {
display: none;
}
footer {
display: none;
}
</style>
{% endif %}

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

pawankumar · ‎05-13-2025

Hi @gina16
Please put this code in theme.liquid before body closing tag </body>

{%- if page.handle == 'product-catalogue' -%}
<style>
.announcement-bar {
display: none;
}
.header {
display: none;
}
footer {
display: none;
}
</style>
{%- endif -%}

Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan

Remove Header and Footer from a certain page - Stilletto theme

Remove Header and Footer from a certain page - Stilletto theme

- Need a Shopify Specialist? Chat on WhatsApp ✅- Get a quick Shopify quote – Click here!- Custom Design | Advanced Coding | Store Modifications

Community Blog Articles

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications