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

Solved
earthtoplanet
Excursionist
31 5 3

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!

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2313 415 544

This is an 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

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 6 (6)
diego_ezfy
Shopify Partner
2313 415 544

This is an 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

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

earthtoplanet
Excursionist
31 5 3

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
Shopify Partner
2313 415 544

@earthtoplanet 

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

Kind regards,
Diego

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
MichalKopec
Tourist
9 1 2

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

Have a problem with your Shopify store? Time is money! Let me fix that for you for a fraction of the opportunity cost. Contact me for details.
earthtoplanet
Excursionist
31 5 3

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
Tourist
9 1 2

@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. 

Have a problem with your Shopify store? Time is money! Let me fix that for you for a fraction of the opportunity cost. Contact me for details.