How can I hide the header and footer on a specific product page?

Store Design
, ,

Topic summary

A user wants to hide the header and footer on a single product page being used as a landing page for paid ads, aiming to create a distraction-free sales experience. They’ve attempted CSS modifications without success.

Proposed solutions:

  • Conditional CSS in product template: Use Liquid templating to target the specific product by handle (e.g., {% if product.handle == 'kit-de-bienvenida-soluto' %}), then apply CSS to hide header/footer elements within that condition in the product.liquid file.

  • Custom product page template: Create a dedicated template via Theme Customizer, add a “Custom liquid” or “Custom code” section, and insert hiding code there for cleaner separation.

  • Global conditional in theme.liquid: Add conditional code after the <head> tag in theme.liquid, targeting the product by ID (e.g., {% if product.id == 10029143982423 %}), then apply CSS to hide elements.

All approaches use Liquid conditionals to isolate the styling to one product page. The discussion remains open with no confirmation of which solution was implemented.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone!

I’m looking for help to hide the header and footer on a specific product page. I only want to do this for one landing page that we’re using for paid ads — it’s a product page that should act like a focused sales page without any distractions.

Here’s the product page URL:

https://wearesoluto.com/products/kit-de-bienvenida-soluto?_pos=1&_psq=kit&_ss=e&_v=1.0

I’ve tried custom code in the CSS file but couldn’t make it work properly.

Any advice or a quick snippet would be greatly appreciated. Thanks so much in advance!

1 Like
2

Try the css inside this if condition. Also add this on product liquid file style tag which renders your products.

{% if product.handle == ‘kit-de-bienvenida-soluto’ %}

Your css to hide header and footer

{% endif %}

My syntax or code could be slightly off but this is to give you a general idea how to do this.

Best

Shadab

3

The easiest is to create a special product page template for this product in “Theme=> Customize”

Add a “Custom liquid” /“Custom code” section in this template and add the following code:
4

Please add this code to theme.liquid file, after 

{% if product.id == 10029143982423 %}

{% endif %}
1 Like