How To Make A Transparent Header In Shopify

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/H2W1YahF
⚠️NOTE ⚠️: if the code above didn't work try the new one below :
Transparent header V2 Code : pastebin.com/Vv1b1VYS
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 KZbin 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

[@mr.c9846]

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.

[@amandarodrigueztejeda8098]

thanks for the tip! do you know how to make it white when scrolling?

[@OnHOWGuy]

Thanks legend.

[@Gorb0312]

bro, this only works on the main page, how can I do it on all?

[@OracleEntertainment-yn7zq]

thank you brother ive been sat here for hours and now ive finally done it you're an absolute hero fella

[@d.tirado858]

This is one of the BEST CHANNELS in KZbin, this guy is building my business... Thank you Anas

[@OnHOWGuy]

You're very welcome and thank you for the nice comment. Cheers

[@BlissfulBottoms]

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 !!!!

[@OnHOWGuy]

You're very welcome and glad i could help. Cheers

[@millanaross8597]

Such a great video, so simple yet helpful!! 👍👍👍

[@OnHOWGuy]

Thank you and really glad i could help. My pleasure. Cheers

[@nightf0x-eve199]

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. :)

[@jennypaige-mclean3206]

this literally worked first time and its so simple. keep up the good work!!!

[@OnHOWGuy]

Glad it did and You're very welcome. Cheers

[@seanstoney2767]

Bro thanks so much I’m definitely coming here for more tutorials

[@shynowinfonua2683]

That was brilliant. Thank you so much for your help 💥

[@solus-x3248]

After using so many failed codes, I was so happy when this one worked for me! Thank you so much!!

[@OnHOWGuy]

You're very welcome and glad i could help. Cheers

[@AtlasHomeShop]

Fantastic Video Bro, never stop posting these

[@joaofabiao5773]

What incredible content you have on your channel! I've already smashed the like and subscribe buttons several times, keep up the good work!

[@user-uf3nd7rl8n]

thank you so much, best Channel ever!!!

[@reactormusic8394]

subscription came in !! amazing work !!!

[@user-sl8nz5hh6g]

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🙏🙏

[@OnHOWGuy]

I appreciate that and you're very welcome, glad i could help. Cheers

[@Aesthetic8Abyss]

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?

[@juergen_watschka]

Thank you, for your Video!!! The best explaining 😁

[@OnHOWGuy]

You're very welcome and thank you. Cheers

[@bcwell]

Helped a lot, thank you!

[@OnHOWGuy]

Really glad i did. Cheers

[@angryfishmusic436]

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

[@vilgotsundin4973]

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!!

[@rafaelvp7]

Great job! you're a legend!

[@OnHOWGuy]

Thanks, i appreciate that. Cheers

[@Yasibanoo]

Thank you so much ♥️

[@user-mi3ur3nz3l]

How do I add my main menu like contact us and about and catalog to the header bc mine is on the side panel with the 3 lines and it’s a side panel to see everything

[@HasashiJin]

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?

[@jesusguerra2506]

I got it thank you so much!! Amazing bro ❤

[@OnHOWGuy]

You're welcome and glad i could help. Cheers

[@samanthasellsalabama]

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😮

[@drjinx3447]

Great tutorial man, thanks!

[@OnHOWGuy]

Glad you liked it!

[@ahbe9232]

you're the best broski

[@OnHOWGuy]

Thanks

[@KetevanGorgiladze]

Hey, Your content is very helpful! do you have video about how to change logo on sticky Banner when scrolling down? thank you!

[@kevinfagerliljah4712]

it dose not work for me but i have done the come that can make your background to a image those that have anything to do with it?

[@noahrianni]

amazing! so helpful!

[@OnHOWGuy]

Thanks, really glad it was. Cheers

[@rochelleramos8651]

Perfect, thanks!

[@OnHOWGuy]

You're very welcome

[@federicocaruso1841]

thank you, really helpful

[@OnHOWGuy]

You're very welcome, glad it was. Cheers

[@Dawn-xn5qg]

I've found your videos really helpful, thank you! However, since making the header transparent, the search, account, and basket icons that were present have disappeared and I've tried everything to bring them back but can't. I really need this on my page as I have a large amount of items. Can you help with this please???

[@janbondarenko4077]

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?

[@mathiashusby7065]

How can this be done for several pages? I could only get it to change the main page template. Any advice is appreciated. Thanks!

[@gersonadonis6791]

Great!!!! muchas gracias funciona perfecto!! un abrazo

[@Vimana-Clothing]

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.

[@9akup]

Bro you are the best 👍🏼👍🏼👍🏼 thanks

[@OnHOWGuy]

You're very welcome, glad i could help and thank you. Cheers

[@blaqkz3671]

How do I make the header not invisible when selecting categories on the handy version?

[@DaNi-tt8dl]

Hi, I'm using Combine theme (bought it). But the header is transparant on every page except the card page. Now cutomers cant see the menu if the are in at the card page, can you help me with that. I just want transparant header on every single page

[@nishamohan6274]

Hi Anas, It does not work in minimal theme. Did you get to test it in minimal theme?

[@SultanAhmed-oy2zc]

you rock man thank you

[@OnHOWGuy]

You're very welcome

[@distrec2079]

it made my Announcement bar smaller fix?

[@marketplace-ci7xx]

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!

[@muhammadhannankhan3554]

hi bro i facing lots of issue 1 background gif is not working on the dawn theme 2 the header it so croped

[@MaderaDesignStudios]

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.

[@AITesx]

I wonder the same thing, did you find a way?

[@c9vision]

want to know the same thing please

[@olehbav]

Hi, I found the solution. If it's still relevant for you, let me know.

[@CEEZYsWorld]

@@olehbav what is the solution

[@Shanheard2212]

hi! your videos are really helping me! do you have a video on how to make an automatic video clickable? I followed your video on adding a video to a homepage, and this one to make the header transparent.. now Id like people to be able to click the video to go to my products page.

[@SheLikeTheWayThatIWoo]

can u make it like half transparent? Like opaque?

[@Andyl301]

what should i do if i want a sticky header to be showing the color as i choose the schem color when scrolling down?

[@lacheleboone286]

Thank you very much.

[@OnHOWGuy]

You're very welcome

[@markotuya6912]

how do i make all the headers on different pages transparent

[@naturalbeautyvirgo]

What about an image I want to make transparent? For example logo on the image. How do I make that transparent?

[@troyedwards9288]

PURE GOLD

[@OnHOWGuy]

Thanks

[@TheWorstTrader35]

😄😄😄 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

[@OnHOWGuy]

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

[@user-by1xi9pl5i]

@@OnHOWGuy Thank you bro god bless you

[@OnHOWGuy]

@@user-by1xi9pl5i You're welcome

[@natalyaodernatascha]

Hey, this code is fantastic! But unfortunately it also made my announcement bar transparent. How can I fix it? Hope you can help.

[@dr.kfanacc]

thankyou so much

[@OnHOWGuy]

You're welcome

[@getrealwithmya]

Thank you 😊 It’s works, but it doesn’t work for mobile version. Can you please help.

[@lukask3859]

It works on Craft theme :) Thank you!

[@OnHOWGuy]

You're very welcome, glad i could help. Cheers

[@AppKub323]

Thank you ❤

[@OnHOWGuy]

You're welcome

[@James-wk6jd]

I'm using Beyond theme and it does not work for me. Any thoughts?

[@meriembariki9583]

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

[@charliecocalon9653]

because it was suppose to. change the "index".

[@andresvera1520]

Really helpfull!

[@OnHOWGuy]

Glad it was. Cheers

[@Royaloomfashion]

nice video bro thank you so much

[@OnHOWGuy]

You're very welcome. Cheers

[@tbmadeitt]

Thank you very much

[@OnHOWGuy]

You're very welcome

[@memolim34]

I LOVE U BRO

[@productukivo5695]

You're a G!

[@OnHOWGuy]

Thanks

[@user-nr8qs5fm1o]

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

[@Jangys-jh3hr]

I got a same problem. Who fixed it?

[@praveenbalaji2279]

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

[@user-zq2tx5od5o]

Thanks for the amazing video! Is it possible to still leave the annoucment bar black?

[@OnHOWGuy]

You're very welcome, it has separate options on the theme customizer and you can set a different color for it. Cheers

[@pickyhbb3426]

How do I change the Font size Header? (For mobile) because my texts are squeezed together

[@theresenyamsi6734]

Merci

[@kristinakock8888]

THAAAAANK YOU!!

[@OnHOWGuy]

You're very welcome

[@ChrisFlex]

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)

[@mr.c9846]

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.

[@jansssonn]

Hi, I added this to my store and after a while I deleted it. Now all of my button texts are showing through my sticky header when scrolling down. Any advice?

[@youtuuubeeyoutubeee]

How do I do this for the faq page? Please help

[@edwardotesanya8003]

how would i do the same thing but on the footer, ive tried replacing "header" with "footer" but did not work

[@lisafisa27]

hi, thank you for the video. I was thinking if you knew how to place images inside the mega menu dropdown on the Dawn Theme? I have been trying to figure it out for almost a year now and cant find anything about it.

[@OnHOWGuy]

You're very welcome, sorry for the late reply but i guess you might want to hire a developer to make a script for you, i think many people would like to see that so i will make a separate video on it soon. Cheers

[@nwanebunkemjika7822]

Thanks worked

[@OnHOWGuy]

You're very welcome

[@filmsandmemories]

Hi! Can any kind soul help to copy and paste the code here? I unable to access the website due to cloudflare issues. Thanks!!!

[@user-wy6gj9ce9n]

Thanks!

[@OnHOWGuy]

You're welcome

[@lukassp6692]

How to do the same but in collection page?

[@TheClrr]

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!

[@Saladifier]

also wondering this, my main page is transparent but each other page is normal.

[@OnHOWGuy]

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

[@einfachissa6789]

If I make the header transparent, the color of the Announcement bar just gets very thin and the text in the announcement bar is bugged under the thin line of the color of the announcement bar. How can I fix it ?

[@wmtrombley]

Thank you sir

[@OnHOWGuy]

You're welcome

[@user-md6zi5eh7k]

if i want to remove the transparent header, how can i do it?

[@zakaa.m.v4790]

Bro you got a subscriber, nice video

[@OnHOWGuy]

Thanks brother, i appreciate that. Cheers

[@perryhope8164]

Thank you

[@OnHOWGuy]

You're welcome

[@dreantisocial3530]

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.

[@akshatvyas8664]

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

[@OnHOWGuy]

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

[@freiderikimichailidou7353]

hello :) thanks for your amazing channel:) sadly It did not work for me, did i do something wrong?

[@ameercheema-nz8tu]

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?

[@shamsbt]

amazing video! what if we want the header to be transparent for every page not just the homepage

[@pietrog6141]

hey mate thx for your tutorials always super helpful. How do you make a transparent section in general? I mean not just the header

[@OnHOWGuy]

Hey, you very welcome. Your store's background is a solid color (white, black...) so when you want something as transparent you need to have something behind it so it will transparent to that background but when you have white color as background then whats the point ? if you want to set a background image to only a section then check out my channel i already made that video, and that actually is a transparent background to some extent. Cheers

[@pietrog6141]

@@OnHOWGuy Thank you, Anas, for your prompt response. I'm encountering an issue where the banner I'm using partially overlaps with my header, which is composed of a video loop, at the top. Consequently, it covers a section of the logo within the header. Since the banner only displays the word "welcome," one possible solution could be directly adding this text to the header. However, I'm uncertain about how to go about implementing this. any tip?

[@OnHOWGuy]

@@pietrog6141 You're welcome, ahh i see. This might be complicated to fix from my end as that has to do with what theme, version you using plus how did you add that video banner. Did you use my trick ? because i made a video on how to add video banner as well as transparent header. Also what theme are you using ? cheers

[@pietrog6141]

@@OnHOWGuy hi Anas, I fixed the problem adding an extra banner in the middle. Thx for your answer ,looking forward to see more new videos from you

[@OnHOWGuy]

@@pietrog6141 Hey, Really glad you did. You're very welcome and thanks, i appreciate that. Cheers

[@Homardlecrustace]

Can you explain how to get the banner to stop being transparent on scroll and on hover please ? this would mean a lot

[@auricooper]

This would be very helpful thanks!

[@helderwrld]

@@auricooper We need this!

[@christiancastano8369]

any updates ?

[@momesz27]

yes pleaseee @onhow

[@NOODIDDYY]

Buddy dude I thought you working for us? The people need this

[@marcoantonioreyescoronado9519]

I'm using theme 1, the default one.

[@user-qw3jo2im2l]

hi guys. it worked on my desktop view, however when i switch to mobile view it is interfering with the content. does anyone have a solution?

[@levijoyce3109]

Please tell me how I can undone the code as it’s affected things badly and I can’t fix it

[@colorqueen-vv9xj]

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

[@unknownideas-wy8qq]

How do you get this to show up on all pages???