Removing header/logo for product pages on mobile (Minimal theme)

[earthtoplanet]

Thanks in advance for your help.

I'm 80% done setting up my store (www.earthtoplanet.com) and am trying to figure out how to remove the header on mobile only on the product pages.

I am a cartoonist so my Shopify site will serve the dual function of both being a marketplace for selling art prints as well as being a place to view my comics. Currently, on mobile, because of the header/logo the cartoons load below the fold so it's annoying to view the comics as it requires repeated scrolling. That's why I want to remove the header/logo from the product pages only on the mobile experience.

I am not proficient at manipulating the code on my own, but I can confidently follow cut/paste instructions. I found another thread which recommended adding the following to the theme.scss.liquid:

@media only screen and (max-width: 767px) {
.site-header {
display:none;
}

}

That successfully removed the header from ALL pages on mobile. Now I just need help figuring out how to qualify those conditions so that the header/logo is only removed on the product pages.

Thanks for your help!

[diego_ezfy · Accepted solution]

@earthtoplanet, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > timber.scss.liquid or theme.css and paste this at the bottom of the file:

@media  (max-width: 767px) {
.template-product .site-header{
    display: none !important;
}
}

Kind regards,
Diego

[earthtoplanet]

Amazing. Thank you. I added it to the timber.scss.liquid and that worked.

Just for my knowledge, what's the difference between adding it to timber.scss.liquid versus adding it to the theme.css?

[diego_ezfy]

@earthtoplanet 

I'm glad to hear. There is no difference whatsoever, in some themes the files are just named differently.

Kind regards,
Diego

[MichalKopec]

Both timber.scss.liquid and theme.css are being read, so adding css to either one will have the same effect. However Shopify is slowly going away from preprocessing css on their servers:

https://www.shopify.com/partners/blog/deprecating-sass

[earthtoplanet]

Thanks for that context @MichalKopec 

Given that I’m at the very beginning stages of setting up my store, is there anything I should be doing differently to prepare for the deprecation of sass?

[MichalKopec]

@earthtoplanet No problem.

I don't think you have to modify the theme just yet, since there's a lot of shops using scss within templates.