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

Store Design
, ,
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!

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 %}