First, we need to add a bit of code to the layout/theme.liquid file so that we can detect the current page through its handle.
Find the body tag; it should look something like this:
<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
and add the `data-page-handle' attribute like the following code:
<body data-page-handle="{{ page.handle }}" class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
Now, we can add this CSS code to hide the header and footer in our theme. You may add it directly on Theme settings as seen on the screenshot below
[data-page-handle="about"] .shopify-section-group-header-group,
[data-page-handle="about"] .shopify-section-group-footer-group {
display: none !important;
}
