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

Solved

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

earthtoplanet
Explorer
46 6 8

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)

diego_ezfy
Shopify Partner
2988 573 931

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

Search for text across all files in your Shopify theme
◦ Proudly top #5 Shopify Expert of all time - Book a call with me here.

View solution in original post

Replies 6 (6)

diego_ezfy
Shopify Partner
2988 573 931

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

Search for text across all files in your Shopify theme
◦ Proudly top #5 Shopify Expert of all time - Book a call with me here.
earthtoplanet
Explorer
46 6 8

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
2988 573 931

@earthtoplanet 

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

Kind regards,
Diego

Search for text across all files in your Shopify theme
◦ Proudly top #5 Shopify Expert of all time - Book a call with me here.
MichalKopec
Shopify Partner
55 9 8

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

A developer with more than 10 years of full stack experience. For work inquiries, please send me a private message.
earthtoplanet
Explorer
46 6 8

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
Shopify Partner
55 9 8

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

A developer with more than 10 years of full stack experience. For work inquiries, please send me a private message.