ฝัง
- เผยแพร่เมื่อ 17 ก.ย. 2024
- Today i will show you how to have header not transparent on scroll in Shopify and set the header to a color when scrolling down the page on your Shopify store.
A non transparent header on scroll in Shopify ensures that your navigation menu remains visible and easily accessible at all times, when users scroll through your Shopify store they can quickly see and access different sections or pages without having to scroll back to the top.
When having the header not transparent on scroll in Shopify you create this seamless navigation experience that helps users find what they're looking for effortlessly, ultimately improving their satisfaction and reducing bounce rates and it also professional when the user sees that the header is not transparent anymore once he starts to scroll down.
Code : pastebin.com/G...
Add transparent header video : • How To Make A Transpar...
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 9 years making Websites, Mobile Applications, Social Media Promotions, E-commerce, Shopify design etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this TH-cam channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#shopify #transparent #scroll
Ah, thanks so much Anas you're a legend. Didn't expect this to come out so quickly! Very impressive, appreciate the lengths you go to.
You're very welcome and thanks for the words.
This video is literally recorded and edited and posted in the same day, and i did that because i promised this video way before and i forgot.
A man is his words right ?
Cheers
Thank you so much brother you really saved my lot of money to waste for a paid theme not only me I'm pretty sure there are lot of people like me who wants every professional features but don't want to pay 😂 bro your videos are really too helpful genuinely saying you should charge for all these codes 😅 thanks man ❤
Heyyyy its youuu haha, Glad I could help and as i said in one of my videos : im here for free for all the people that cant afford 350$ for premium themes hahah.
I appreciate the words brother but i will never charge for the codes, my drive in this channel is pure interest in making videos if i turn that into money making then i might lose that drive.
Have a good day.
@@OnHOWGuy appreciate your hard work man have a good day too ❤️
Thanks man, great video! Maybe a tutorial when we scroll the logo and the text changes colors please? Is that possible? :)
You're very welcome and thats a good one actually, i noted your request and i will work on it.
Just keep in mind that videos you'll see in the upcoming days are already made and scheduled so it might take some time.
Cheers
@@OnHOWGuy Thank you already, means a lot !
very helpful, thank you for your video! any tips to change the color of the logo when you scroll down as well? Thanks!
Thank you
Thank you so much for your videos bro. I just got started on Shopify recently and your entire channel has been the perfect resource for customizing very specific features. Literally allowed me to make my site look like it was professionally built. Hope your channel blows up 🙏🏼🙏🏼🙏🏼
You're very welcome and really glad to hear that, No worries many videos on the way and they help you even more.
Thanks
Legend! You’re the best! I have a question, How can I remove the line from the bottom of the transparent bar?
Amazing! Thanks!
You're very welcome, Glad you like it!
Cheers
Love From India!!
Amazing !!✨ Could you do a tutorial now when we scroll the logo and the text changes colors please ? (And I encountered a small problem when scrolling, the cart-count-bubble also changes color.)
Thank you and thats a good request actually, i noted it and i will work on it but for logo it might be complicated if you are using a svg or png logo as that cannot be changed with code but i guess maybe another video for having different logo on scroll, i noted it too because its a good one.
for that issue i just saw someone reported it and i will try to fix it and update the code.
Cheers
Hi! The search bar on your store is so pretty, it would be awesome if there was a video showing how to add it!
Thank you, everything you see on that shopify store i did on videos, so once you saw something on the store in some tutorial that means i already posted the video for it.
But for this case its different because i had to reschedule this video to be posted sooner and i had to do that because many people are asking for it.
That video for the search bar is already made and scheduled for 28 July but for your request i rescheduled it again for 26, so on 26 July the search bar video will be posted.
Cheers
@@OnHOWGuy Thank you super much! I'm expecting it so bad hehe You are best! :)
Cheers!
Hey Anas I tried the code you gave me but it’s hasn’t worked, fully.
So it did change the background colour of the menu on mobile except it hasn’t changed the colour of the header while the menu is open . Any more ideas to fix it???
Thanks for your help, really really appreciate it, you’re a legend, keep it up!
Hey, You're welcome, happy to help.
I see, But isn't the menu drawer on mobile covers the whole page ? because it should cover the full page including the header.
If not i think that might be the only solution i currently have for you, Make the menu drawer full page and that will cover the header, if you interested in that here is the code for it : pastebin.com/nv1wTjB3
Add it at the bottom of base.css
IF you have any further questions please let me know in new comment as its difficult or me to see replies now.
Cheers
Just for the algorithm ❤️
We need more people like you tbh, you are a gem.
Thanks
oye bruh
u deserve more likeeez
Thank you and i really appreciate that
hello thank you for your videos, I have a question have you already made a tutorial on how you put the header menu with the video? if so can you leave me the link to your video? or tell me how you did it?
I replied to your previous comment
hello it was a helpful video. I have a question. How can I create a transition effect so that when I scroll, the element gradually changes from transparent to non-transparent?
Hey, thank you, i did that but for my other video on having it not transparent on hover because it looks good with user interaction but to add this feature just add this line to the code in a separate line.
transition: background-color 0.5s ease !important;
Hey man your videos are amazing iv been implementing so many new things onto my store.
I have a question/request though, so from one of your previous videos “making the header transparent” iv done this but the sidebar menu on mobile after clicking it, it will remain transparent just for the header section instead of going black which is the Background colour of my store.
Do you have a fix for this?
Cheers
Hey, Glad to hear and im really happy to help.
I hope i understand the issue correctly and you can fix by applying a different background color for the sidebar menu on mobile by using this code at the end of base.css :
#menu-drawer {
background-color: #58bef5 !important;
}
Let me know if that didnt help, Also please let me know in new comment as its difficult or me to see replies now.
Cheers
Hi! Your videos have been helping me so much! I’m new to Shopify and haven’t published my store yet because I’m trying to get my store completely ready before launching. I love the transparent header on my home page; however, it’s only on my home page. Is there a way to have the transparent background on every page? Once I choose a specific page (for example “t-shirts”) it reverts back to my original homepage layout. Thank you for all you do! You’re amazing and helping me so much create the store I really want!
Hey, Really happy to hear that and glad i could help.
Transparent header will need something behind it to show it in order to be transparent, if its a white background then it will show a white background which will look not transparent even tho its transparent, i hope this makes sense, but for the homepage it has a banner with a image or video and it shows the image or video behind the header then you can see its actually transparent, and for other pages they dont have banner or anything to show below the header.
You're very welcome and glad i could help, let me know if you need anything.
Please let me know in a new comment as its difficult for me to see replies now.
Cheeers
Can you do a full video doing packing slips? How to edit code to add logo, price, text, Tax Invoice header, etc. thank you so much!
Yeah sure, i noted your request and i will work on it.
Cheers
@@OnHOWGuy that is amazing thank you!!
Love all your videos, truly helping me out with everything!
Ur the best!
Thanks
hello i have a Question about how i can add a ADD TO CART button to a Collection. so like a button that if clicked it would add all the products in the collection to the users cart, If you could help me out with that it would be vey much appreciated. cool video by the way
That would require a custom code to do that and currently i dont have it in hand but i noted your request and i will work on it.
Cheers
Awesome video! Can you maybe make a tutorial on how to display the sale badge on the product page in the product photo? So you can see the sale badge in the corner of the product photo. Thanks man!
Bro scroll through this channel he already has made a video on this topic ❤
@@Snoweee1 not to show it in the product photo on the product page i believe.
Great suggestion, i just noted it and it night take some time to be posted.
Cheers
Whenever i edit a product page adding sections and blocks etc...shopify edits every product page for all the products that i have, how do you edit ONLY one? Thank you for your videos man
Because thats how Shopify structure works, its templates based but you create new template(page) based on product page and redesigned it as you like then you asign only the products you want to that redesigned page and the other products will have the default one.
You're very welcome.
Cheers
Legend, chukran BZF
Thanks and merhba khoya.
how to make it transition to the color smoothly, when you scroll it abruptly changes color. need to have smooth transition
also when you add something to cart and scroll down, the notification color is glitched
Hey, Try adding this line below the background value and make sure its above the closing bracket : transition: background-color 0.5s ease !important;
0.5s is for seconds, increasing it will make it slower and viceversa.
Cheers
I will check and try to update the code to fix that.
Cheers
@@OnHOWGuy it works but I have weird glitch with how the boxes around the text behave. For instance, the search bar box doesn't change smoothly when it's supposed to.
@@OnHOWGuy also when you scroll back up after scrolling down the transition is not smooth anymore
great but I no longer have my announcement bar
Thats strange, what theme/version are you using ?
also try removing the announcement and re adding it again.
Please let me know in a new comment as its difficult for me to see replies now.
Cheers
@@OnHOWGuy I did the manipulation again, it works but now my ad bar is not fixed, I will look for the solution
possibility of having the logo in the center and part of the menu on the left and the other on the right?
Hi. I have a request for a video. I want my Shopify store to be prevented from dark mode on mobile. If a customer's mobile is set to dark mode my store theme color should not be affected.
Hey, thats a good request but im not sure yet if its possible using custom code.
i noted your request and i will research more about this.
Cheers
@@OnHOWGuy Thank You.
For me, it's doesn't work. And I don't know why...