How can I remove the header and footer on a specific collections page?

Topic summary

A user seeks help removing the header and footer from a specific collections page on their Debut theme store, specifically the ‘valentine-day’ collection page.

Attempted Solution:
A support representative provided CSS code to be added to the theme.liquid file before the </body> tag. The code appears designed to hide site navigation and announcement bar elements conditionally.

Current Status:

  • The suggested code did not work—header and footer still appear
  • The user has pre-existing code in their theme.liquid file from previous troubleshooting attempts, which may be causing conflicts
  • The existing code includes references to PageFly elements and custom styling for hiding navigation/announcement bars

Next Steps:
Multiple responders have requested the store URL to investigate further and diagnose why the conditional hiding isn’t functioning properly. The issue remains unresolved and requires additional technical review to identify conflicts or implementation errors.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.

Can anyone please help? I’m not a coder… How can I remove the header and footer from one specific collections page? I’m using the Debut Theme.

Hello @kay2000
Please share collection page link.

Collections page is named ‘valentines-day’

Hi @kay2000

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag


Hope this answer helps.

Best regards,

Victor | PageFly

Thanks Victor. I did it, but there was no difference. The header and footer still showed up.

I had the following just before the tag from when I was previously trying to get help with the same issue. Could this be causing a problem/conflict?

{% include ‘pagefly-header’ %}
{% include ‘sca.storepickup’ %}
{% include ‘scapp-customerinfo’ %}
{% render ‘scm-attribute-head’ %}

{% if page.handle == ‘welcome-stpatricks’ %}

.site-nav {display: none!important;} .announcement-bar {display: none!important;}

{% endif %}

Hello @kay2000
Please share your website URL.

if the code doesn’t work please share the store URL so I can check more, your code it is setting the condition to hide the element of page 1 page and not affect other pages.