ฝัง
- เผยแพร่เมื่อ 13 ก.ย. 2024
- In this video i will show you how to make a transparent header in Shopify with dawn theme or any theme to add sticky transparent header to your Shopify store.
We all know the importance of making a transparent header in your Shopify store because transparent headers are essential for creating a modern and professional look for your e-commerce store, they also help create an inviting atmosphere that encourages customers to explore further into your Shopify store.
Transparent headers on Shopify make it eye-candy for visitors to find what they’re looking for while enjoying the navigation through your store, as well as providing them with the ability to navigate more easily around the site without having too much clutter on their screen at once.
With sticky transparent headers you can draw attention directly onto specific elements or products within your store that you want customers to focus on first, such as sales items or featured collections while still allowing them access all other areas of the site if necessary, thats why adding a transparent header is one small but powerful step towards improving customer satisfaction levels within your Shopify store.
Transparent Header Code : pastebin.com/H...
⚠️NOTE ⚠️: if the code above didn't work try the new one below :
Transparent header V2 Code : pastebin.com/V...
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 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce 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.
#transparent #header #shopify
![โฮ่ง! (SUGOI) - LYKN [ OFFICIAL MV ]](http://i.ytimg.com/vi/nFp4zjAARFs/mqdefault.jpg)
If you want to adjust the transparency of the header, here's what you need to do:
In his code, replace the word "transparent" with "rgba(255, 255, 255, 0.5)"
The RGB is how you adjust the colour, and the A is how you adjust the alpha, or transparency. In my example, the header would turn out white with 50% (0.5) transparency. Play around with these values to adjust the colour and transparency.
thanks for the tip! do you know how to make it white when scrolling?
Thanks legend.
bro, this only works on the main page, how can I do it on all?
yeep thank you so much!
This is one of the BEST CHANNELS in TH-cam, this guy is building my business... Thank you Anas
You're very welcome and thank you for the nice comment.
Cheers
thank you brother ive been sat here for hours and now ive finally done it you're an absolute hero fella
mate !!!! you are an absolutely legend 🥰 i scratching my head for ages how to do it in my store 🙄 it looks amazing , thank you so much , top lad !!!!
You're very welcome and glad i could help.
Cheers
this literally worked first time and its so simple. keep up the good work!!!
Glad it did and You're very welcome.
Cheers
Hi Anas! Thank you for your video! Very simple and clear. So much appreciated. I have 2 questions: 1, How can i make it transparent for all the website? 2: How can i make it transparent for the password protected page? thanks!
also wondering this, my main page is transparent but each other page is normal.
Hey, you're very welcome.
I will make an update video on how to stop header from being transparent on scoll and i will include your two requests.
Cheers
After using so many failed codes, I was so happy when this one worked for me! Thank you so much!!
You're very welcome and glad i could help.
Cheers
Is there a way to still have the announcement bar in the header to be a solid color at the top? Thanks so much for the video, and the videos on your channel! They've been saving me a lot of time and are super helpful. Keep up the great work!
just remove this part :
.shopify-section-group-header-group.announcement-bar-section{
height: 5px;
}
I m a newbie, but i figuried that u should just delete lines 4, 5, 6: ".shopify-section-group-header-group.announcement-bar-section{
height: 5px;
}"
So do this and everything must be smooth:)
i have the same doubt
In the code, I changed the announcement height to 35 px so I code still see it in color.
Thank you!! This was perfect for what I was trying to do!!@@cherishunaturalbathandbody
Hi not sure if someone already asked this -- is there a way to put a color in the header once the visitor starts scrolling -- it is good at the top, but not down my page as you cannot see it as you move down. Thanks.
I wonder the same thing, did you find a way?
want to know the same thing please
Hi, I found the solution. If it's still relevant for you, let me know.
@@olehbav what is the solution
@@CEEZYsWorld what is the solution
Fantastic Video Bro, never stop posting these
Thank you for thw video! One question! When I did it, the announcement bar got weird and i dont know how to fix it! If you could help, i would aprecciate it
I got a same problem. Who fixed it?
you're the best broski
Thanks
thank you for the detailed video. I'm migrating from Squarespace and wanted to keep the branding and feel of my old page and this worked great in doing so. :)
works great thank you🎉❤
You're very welcome and glad i could help.
Cheers
Hello thank you it worked but is there a way to fix the thin white line between the header and background that can slightly be seen?
Hi, I'm a subscriber of your page and i've been implementing most of your codes through video Thanks a lot for that, Also can you pls make an video of transparent header while we hover through the header then complete header to turn into one color and header font to another color, Maybe that may looks even more aesthetically good, What's your thought on that I'll be looking for this particular tutorial in your page,
Your are doing great, Thanks for all your educational tutorials which is 100% working and easy to apply
Such a great video, so simple yet helpful!! 👍👍👍
Thank you and really glad i could help.
My pleasure.
Cheers
Hey I want to know if it's possible like when I scroll down the Transparent header should turn to normal header like with a colour Bg
I got that request and i will work on it.
Cheers
@@OnHOWGuy there you go, i commented the wrong one XD, you just need to edit the number " 0.8" in background-color: rgba(255, 255, 255, 0.8)
.shopify-section-group-header-group.announcement-bar-section{
height: 36px;
}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 0px;
}
.header-wrapper {
transition: background-color 0.3s ease;
}
.header-wrapper .header {
background-color: rgba(255, 255, 255, 0); /* Initial transparency level */
transition: background-color 0.3s ease; /* Animation duration and easing */
}
.header-wrapper .header:hover {
background-color: rgba(255, 255, 255, 0.8); /* Opacity when hovered */
}
Hi, I found the solution. If it's still relevant for you, let me know.
What’s the solution for it to be transparent when you open the website, but when u scroll it re becomes a sticky solid color header
What incredible content you have on your channel! I've already smashed the like and subscribe buttons several times, keep up the good work!
Can you explain how to get the banner to stop being transparent on scroll and on hover please ? this would mean a lot
This would be very helpful thanks!
@@auricooper We need this!
any updates ?
yes pleaseee @onhow
Buddy dude I thought you working for us? The people need this
That was brilliant. Thank you so much for your help 💥
Coach, The transparent header is nice but the problem is when you scroll the header is almost not visible because it's only text. Do you have new code that the header background will be shown when scrolled?
yeah is horse shit
I have the same issue...did you manage to fix it?
np, already managed to fix it, thanks
@@amandarodrigueztejeda8098 how did you fix it? can you maybe help me by sending the code or explaining what you did?
@@amandarodrigueztejeda8098 help me pls xd
You are the best you are the guy i depend on and your a lifesaver when i want to make my store look better thank you and keep going pleasee🙏🙏
I appreciate that and you're very welcome, glad i could help.
Cheers
Your videos are a game changer! I’ve made the transparent header & video banner thanks to your videos. But the announcement bar is cut off with part of the video header. How do I fix this??
did you fixed it? I have the same issue.
hi! i was having the same problem but i fixed it ehehe , so... when you are copying the code for the theme.liquid you must change this section:
.shopify-section-group-header-group.announcement-bar-section{
height: 5px;
replace the 5px for 35px (my advice) , or test the values at your own taste
Hope this helps anyone who's having the same issue. Stay safe!
Thanks friend, I had the same problem but I solved it with your contribution. Thank you so much@@BensP0V
@@BensP0V thank you so much
@@ikergg2516 it was my pleasure 👌
Bro thanks so much I’m definitely coming here for more tutorials
it made my Announcement bar smaller fix?
Honestly amazing video! Is there a way to seperate the announcement bar from the header so it isn’t transparent as well?
Thank you, glad you think so. It shouldn't be transparent, head over to the theme customizer and set a new color for it, if it didnt work then you might have to wait for a week for my video to be posted about changing announcement bar color to plain color or gradient color.
Cheers
Hey. Like the video but I have a problem that my banner and second page i blending together. It looks great on laptop view but when you change to phone it just gets way to up into the banner. It's like it can't notice that it has to stop under the banner. Hope you understand and have a tips to solve this!!
thank you so much, best Channel ever!!!
😄😄😄 Anas you are pure gold my brother. once your channel gets picked up by the youtube algo, your tipps & tricks will change the whole dropshipping game
Thank you brother, i appreciate your words and made me smile so thank you.
I'l keep doing my thing and it will work out for sure.
Thanks again
Cheers
@@OnHOWGuy Thank you bro god bless you
@@user-by1xi9pl5i You're welcome
Hi Anas,
Firstly, thank you so much for your videos and the time you dedicate to us ; these videos are incredibly helpful to us.
I have a question regarding an issue I'm facing. I've enter the code and its work well in my pc and my google chrome, but it seems to have compatibility issues with Safari, Microsoft Edge, and similar applications. Could you please help me find a solution for this problem?
Your assistance in this matter would be greatly appreciated, i really need your assistant.
man love you
I love you too
Hello, what’s up? I have a question how can I use this example in your video but only in my home page, and when I do scroll change the color to white! Thank you!
Greetings,
Jesus
I was about to ask the same question @OnHOWGuy
hello thanky you for the video , I have a question it only did work on the home page but was not applied to the products pages
because it was suppose to. change the "index".
Hello, im using the dawn theme. The Menu is sticky and it glitches out when i scroll down. Do you have a code to fix it?
subscription came in !! amazing work !!!
Thank you bro
Welcome
The main menu on mobile is translucent. How can I make it smaller and I can still in see it? I like the way the main header is on the desktop. I don’t think you can have that same one on mobile. Any suggestions would help😮
Thank you, for your Video!!! The best explaining 😁
You're very welcome and thank you.
Cheers
This is great, the only problem is that it doesn't look good on mobile for Dawn theme for the image banner which is usually your landing page
Shopify updates can breaks things i shared.
Im working on an update for this video and will posted soon.
Cheers
Hi man! I really like your videos! You're the best! Would you please explain how to do the same thing for other pages not just the home page? Thank you so much!
brother, can you please make a video on how to add language switcher to the header of mobile version, so it shows like EN, UK or something at the top, not at the bottom of the site. It will be very helpful for a lot of people, I guess
Thank you 😊 It’s works, but it doesn’t work for mobile version. Can you please help.
This is great! Is there a way to make it turn a color on scroll.
Hi, I found the solution. If it's still relevant for you, let me know
Hey, Your content is very helpful!
do you have video about how to change logo on sticky Banner when scrolling down?
thank you!
Thank you it worked perfectly! Is it suppose to still not be transparent on the product pages after the code is applied? or should it have made it transparent on every page?
amazing video! what if we want the header to be transparent for every page not just the homepage
Hey man! You're the best. Your videos are really helping me out. I'd like to create an all products page, with a header, footer, and product boxes. This is different from the normal shopify one that that only displays products and no navigation, if you've hidden your header for the benefit of other custom pages that have their own custom header. Any help?
Thank you and really to hear that, To be honest your question is little bit confusing because most of the themes have header and footer on collection page so you can just create an "all products" collection and add all products to it, and for the hiding header part i didn't understand your point.
If you need anything please let me know in a new comment as its difficult for me to see replies now.
Cheers
Hello! I loved the video but I have a doubt, when you make it transparent you have the color scheme of the header with white text (so that the banner is well seen) but when you scroll it is no longer visible; because it has the same color as the background of the website. How can that be changed? That is, for the banner it has a color scheme and for when it is sticky when scrolling, it has another color scheme. I remember doing it in Wordpress, but here I can't get it. Thank you :)
Hey Anas, your videos are the best out there i'm very grateful for your channel. However i'm looking for help with something I'd like to add to my store and I can't find anything that is working!
I'd like my transparent header to appear normal/white when hovering over it. Do you have a code for this? Thank you!
Hey, Thank you and i really appreciate the words.
Thats a good request actually, unfotunately i dont have the code yet but i just noted it and i will work on it.
Please keep in mind that the videos you'll see in the upcoming days are already uploaded and scheduled.
Cheers
Great tutorial man, thanks!
Glad you liked it!
Doesn't work for me with the Ella Theme :(
hello good morning friend, when I put the code I all transparent, but the case is that the ad bar is very small and almost not seen, can you help me that could be due to this?
same problem pls help
Hello, is there any way to disable the transparent header outside of the home page? Thank you
I got that video planned.
thank you for your videos helping me a lot!, but I'm facing an issue where if I go to another page and its not transparent how can i make transparent on all pages ?
You're very welcome, Im afraid thats not an issue and that how websites work because transparent has to show something behind it in order to look transparent just like in the video its a banner and banner only exist on homepage so on other pages there is nothing to show below the transparent header, its only a background and mostly white, i hope that make sense.
Cheers
Hi man, your channel is pure gold. This video helped me a lot. However, for some reason the background of the announcement bar disappears and the banner becomes the background of the notification bar. Do you know what could be the issue?
I've found the solution. In the parto of the code height should be changed. PART OF THE CODE: .shopify-section-group-header-group.announcement-bar-section{
height: 5px; Instead of height: 5px, should be 35px in my case.
Hey, Thank you and really i could help.
To fix that check out my video on how to change announcement bar color and that will overwrite the transparency with a color of your choice.
Cheers
@OnHOW , Thank you for the Nice Video bro! But theres a problem i´m seeing in my shop and in your video. The header is coming down with you if you scroll down. And it is transparent to, so it get messed up and mixed together with the other options and texts in the Page What can we do ? Watch on 8:08
You're very welcome, I recently made a video on how to make the header not transparent on scroll and that should fix the issue and if you want to disable the sticky header then you can do that from theme customizer.
Cheers
Hello! Now that I use the code to make my header transparent, it no longer scrolls (on scroll up) and disappears with page. Is there a way I can make my header scroll up with the transparent header?
Hi, I found the solution. If it's still relevant for you, let me know
Great!!!! muchas gracias funciona perfecto!! un abrazo
You're a G!
Thanks
Hi , thank you for your help,
my header color is allways the same as my site background , I tried the code but is not transparent, can you help me please?
me too
I have Prestige theme and I tried following your tutorial, and it did not work for me ... 😞 any suggestions?
hello :) thanks for your amazing channel:) sadly It did not work for me, did i do something wrong?
I follow the instruction given by you but its not working . I m using motion theme , and I want to make header background transparent . kindly help
Great job! you're a legend!
Thanks, i appreciate that.
Cheers
It works on Craft theme :)
Thank you!
You're very welcome, glad i could help.
Cheers
Thank you so much ♥️
I don’t have the extra space to input the code… how do I input the code
Helped a lot, thank you!
Really glad i did.
Cheers
I got it thank you so much!! Amazing bro ❤
You're welcome and glad i could help.
Cheers
Oooh thanks you boy, it works perfectly for me and DAWN THEME
But header i can’t put it of the top of the page ? Any idea
I was really tired of searching for this hack but still i searched it and it worked I'm happy bro tysm, I want to set the logo size big but it is taking up a lot of space and is unnecessary when I set the size large please guide me...
Happy to help and you're very welcome.
I used to spend days looking for one trick and i keep searching because i know im going to find it but if i stopped i'll never find it.
you can easily change the logo size from the theme customizer where you uploaded your logo.
If you have any further questions let me know.
Cheers
lah ihafdak a khoya anas knt kan9lb 3liha chhal hdi l3zzz
Hi!
I did this but now my header is not showing on my mobile view
I literally applied every code but nothing happened
Please help me out 🙏
I replied to your other comment
thank you, really helpful
You're very welcome, glad it was.
Cheers
Hey ! it works perfectly thanks, but I'd like it to be transparent only when I'm at the top of the page, I want it to return to normal when I scroll down, is that possible?
Hey, glad it did and you're very welcome.
Just check out my channel i already made a video for "not transparent on scroll" and also for "not transparent on hover".
Cheers
Hello i changed my menu bar but now the problem is when i scroll down on the page the whole menu bar scrolls down also it wont stay fixed in one place i am using the refresh theme please can you help me?
need your help... its not auto playing on mobile and i need to make the header on the homepage only sticky on scroll up. it stays the whole time it looks bad
Hey, For autoplay on mobile one of most reasons the video doesn't play is the low power mode will force mobile browsers to block the autoplay feature.
And for the sticky header you can either disable the sticky header feature or what for an update i will be doing about that.
Cheers
@@OnHOWGuy I got you with the solution... turn the video into a gif and have it only active on mobile as the gif, keep desktop as the video so quality still looks good
@@BluSunz bro any chance you can tell me how to set it up as gif only or mobile and keep it as video on desktop?
Bro you are the best 👍🏼👍🏼👍🏼 thanks
You're very welcome, glad i could help and thank you.
Cheers
It makes the announcement bar also transparent with header
Any solutions to this
i don't want to make announcement bar transparent
Check on the theme customizer the announcement bar has a separate section to customize it.
Cheers
Amazing and helpful video! I am wondering how we can adjust the transparency level? I don't see a percentage option in the code. (Beginner here, lol)
If you want to adjust the transparency of the header, here's what you need to do:
In his code, replace the word "transparent" with "rgba(255, 255, 255, 0.5)"
The RGB is how you adjust the colour, and the A is how you adjust the alpha, or transparency. In my example, the header would turn out white with 50% (0.5) transparency. Play around with these values to adjust the colour and transparency.
how would i do the same thing but on the footer, ive tried replacing "header" with "footer" but did not work
This does make it transparent but idk if its part of my theme that is making a thin outline of where the header should go? Is there a way to fix this?
Nevermind yall it was a settings issue
Hey man, how did you fix this ? I got the same issue.
you rock man thank you
You're very welcome
Perfect, thanks!
You're very welcome
Hello, this keeps messing with my announcement bar. It keeps resizing it really small and hard to read is there a fix for that?
change the height 35px
Where to change the height??@@user-vk6iw3jd6i
It didn't work for me can you help me?
Hi there, thank you for the helpful content! I am trying to get my header to go transparent but only when scrolling down the page. Is there a code for this particular function? Thanks in advance :)
I have an update for this video coming but i guess what you asked is a whole other video because the current code does the opposite, not transparent on scroll.
I noted your request and i will work on it.
Cheers
amazing! so helpful!
Thanks, really glad it was.
Cheers
Amazing videoes! When i try transparent header and clickeble image banner, the header does not work. Any suggestions?
Thank you, Did you try the second code as well because i provided and updated one.
If you did then i guess its a code conflict based on your theme, so can you tell me which theme/version are you using ?
Please let me know in new comment as its difficult or me to see replies now.
Cheers
Thanks for the amazing video! Is it possible to still leave the annoucment bar black?
You're very welcome, it has separate options on the theme customizer and you can set a different color for it.
Cheers
"I thank you so much."
Can you please help me ? THE HEADER Notification has also no background anymore
How do I keep the announcement header visible while keeping the header transparent?
If you mean the announcement bar then check its settings because it has a separate section on theme customizer.
Cheers
Bro you got a subscriber, nice video
Thanks brother, i appreciate that.
Cheers
Hey, this code is fantastic! But unfortunately it also made my announcement bar transparent. How can I fix it? Hope you can help.
did you find a solution?
where do I put it in the sense theme i don't see a / body even when I put it in the search bar there's nothing there.
Hi brother, this is amazing. Could you tell me how can i can the logo and main menu to appear on the mobile version of the site? for some reason they doesnt show on the mobile version. please help
Hey, thanks glad you think so.
The logo should be visible on the mobile actually, what theme are you using ?
For the main menu it depends on each theme, check on the theme customizer to see if there is any option for the header to be displayed on the mobile.
Cheers
@@OnHOWGuy i am using Craft theme brother
How can this be done for several pages? I could only get it to change the main page template. Any advice is appreciated. Thanks!
nice video bro thank you so much
You're very welcome.
Cheers