How to hide footer and header on specific products

Topic summary

A user is attempting to hide the header, announcement bar, and footer on specific product pages using Liquid’s unless command. While the elements successfully hide, a large white space appears above the content.

Proposed Solutions:

  • Tag-based approach: Use conditional logic checking for specific product tags (e.g., {% if product.tags contains 'exampleTag' %}) to selectively hide elements

  • Product ID targeting: Edit the product template file and add CSS targeting specific product IDs (e.g., {% if product.id == 'your-product-id' %})

  • Reference resource: A community link was shared pointing to a previous discussion about removing headers and footers from specific product pages

The white space issue likely stems from CSS styling or container elements that remain even when header/footer content is hidden. The solutions focus on proper conditional rendering rather than just hiding elements, which should eliminate the spacing problem.

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

Hey, I tried to use a unless command to hide the header, announcment bar and footer. It worked but above the content is a huge white space. What did I wrong and how can I fix it so that the content just fills the blank space?

I used this command

{% unless template == ‘product.DAS TEMPLATE WAS ICH VERWENDE’ %}

{% endunless %}

The first content is a rich text.

1 Like

Use code for that product tag

{% if product.tags contains 'tagExample' %}

{% endif %}

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Edit the product template code: and paste this at the bottom of the file:
{% if product.id == 'your-product-id' %}
  
{% endif %}

Hello @Spanier865

Please refer to this Link: it will be helpful to you -

https://community.shopify.com/c/technical-q-a/remove-header-and-footer-from-specific-product-page/td-p/1368761