Liquid, JavaScript, themes, sales channels
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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024