Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
Solved! Go to the solution
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
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
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?
@earthtoplanet
I'm glad to hear. There is no difference whatsoever, in some themes the files are just named differently.
Kind regards,
Diego
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
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?
@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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024