how to make header transparent shopify

Hi guys welcome back to WebsSensePro i'm your host  Bilal Naseer with another Shopify how-to video and  ,in this video, we will learn how to make a  transparent and sticky header in Dawn theme  ,after implementing this tutorial you will have  your header like this which will be transparent  ,and when you scroll down it will be  sticky and change its color to white,cool right also you will  have option in your customize  ,to disable this feature by just checking it out  so if you go to customize and click on header  ,you will have an option to disable the transparent  header and you can also have you will also have  ,option to disable the sticky header by default  that's how the header of dawn theme looks like  ,so that's the default header of dawn theme when  you scroll it down it's not sticky but when you  ,scroll up it shows up and after implementing  this tutorial we will have it like this,so if you want to learn please stick to the  video don't forget to subscribe to the channel  ,comment on the video below if you  have any confusion or questions  ,and let's just get into the  back end to implement the chord,so guys that's the tutorial which  i'll be following i'll put the link  ,in the video description so you guys can have all  of the quotes now just let's go back to the admin  ,and activate the fresh dawn theme  which i have already installed,click on online store,so that's the dawn theme with already have  which already have transparent header which i  ,showed you guys so i i prepared all the code in  order to preview you guys how it will look and  ,that's the fresh copy of dawn  which I added just 12 minutes ago  ,okay now i'm going to publish it  so we can start from the scratch,click on publish,and here we go now i have the fresh non-theme  activated now i'm going to click on actions  ,and then edit code before editing the code  make sure to have the duplicate version save  ,so click on duplicate and save your current  state of the theme so because we'll be doing  ,a lot of code edits and if you miss anything  with miss any step or mistakenly delete any  ,other line you can easily revert it back okay now  let's hit refresh and that's how our store is now  ,with the default header so when you scroll  down it's not sticky and when you scroll up  ,it's sticky now we'll make it to transform  like this okay i'm going to close this one  ,and just start work on the code  i'm going to click on edit code,close this window as well okay  now our first step is to go to  ,header dot liquid and delete  everything which is between  ,these tags so that's how your code will look  like and you will have to delete all of it,from top to bottom okay so i'm  going to go to header.liquid,and search for,javascript here we go so that's a code and i'm  going to delete out everything till and javascript,so that's all of the code which  is currently added by default  ,in dawn theme which is responsible to  make the header sticky but it's not  ,uh ideal sticky header that we need so I'm  going to delete all this code and hit save,okay now let's go back to our article and  scroll down now we need to add the following  ,code to our global.js file i'm going to search  for global.js so that's the file click on that  ,scroll down to the bottom that's the end of  the file add a line break and copy this code,and paste it,okay now hit refresh sorry hit save  ,before hitting refresh and then go  back to your store and hit refresh,and now when you scroll down you have your header  sticky so previously when you were scrolling down  ,it wasn't sticky now we have it now we will do the  transparent header thing and we will add option in  ,customize to change icons color and to change our  header background color by doing by going to uh  ,by editing the customize options okay now we'll  go in theme.liquid file and replace this cord  ,with discord okay let's go to our theme dot liquid,there's the file i'm going  to search for this chord,oops,okay here's our chord,and replace it with this one,okay done it's safe,now let's go to our next step which  is replacing code in header.liquid  ,so we will replace the header tag which  looks like this with the following chord  ,replace this code with this code  okay now let's search for it,in our header.liquid go to  health.liquid search for this code,okay here we see this code,now i'm going to replace it with this,replace this paste the code hit save,and go back to our tutorial again now  we will update the detailed stack within  ,header.liquid file so that's the chord which  we'll be replacing with the following chord  ,okay i'm going to search it,so here's our chord,yup summary class header so these are  the two line which i'm going to replace,with this code here so just  copy the code and paste it here,okay hit save again go back to the tutorial and  follow one more step which is in the same file  ,now we'll be replacing details model attack  now search for this code in the same file,and replace it with the following code,okay it's safe,now go back to the tutorial and,just two more snippets which we need to add to  complete our tutorial and we will add this code  ,above schema attack so all of these changes are  in header or liquid file make sure to read the  ,main heading before replacing the code and okay  now we will add this code above our schema tag,we'll scroll down to the bottom so  that's all of our schema tag which is  ,starting from here as you can see schema i'm  going to paste this code here above our schema,so you can see this line if request.page type  is equal to index we'll add this code above  ,now paste the code,hit refresh hit save sorry  about that okay hit save,and then finally we will add our schema code  ,below the current schema tag which will  add option in customize section okay,so i'm going to copy this code and  add this code above our image picker,scroll down,so here's our code and we need to add our code,here make sure not to delete any commas here  it's really important for that and do not mistake  ,anything keep watching and paste our code here  okay now hit refresh oh sorry it's save again,and now let's go back to your  website and now finally hit refresh,we are not seeing anything because  we'll have to enable this option  ,by going to our customize so i'm going to go back,to the back end,click on online store,click on customize,and from there click on header and here we have  option to enable our transparent header and,enable our sticky header so our  sticky header is already enabled  ,we'll just enable our transparent header and  there we go our transparent header is showing up  ,we can change the icons color here so these  are the icons which can be controlled from  ,here we can change the color from here so  just click on that and change color to see  ,it updated okay i'm going to make  it white perfect now hit save,go back to the home page and hit refresh,and here we go as you can see our menu text color  and the icon color is white but when we scroll  ,down it's transformed again to black so guys  the code which we added for transparent header  ,is only for the home page it's not going to work  if you go to any of the inner page so for example  ,if i click on my catalog and go to the new  collection page you can see that it's sticky  ,but it's not transparent header but if you want  this feature to enabled on enter pages as well  ,you can amend that you can uh change code a little  to make it appear on all of the pages which can  ,happen from this code so the code which we copied  from here the code which we added above schema  ,has this if checked so it's checking if the  template is index you can simply remove this code,template is equal to index and so  if you remove this code hit save,and now if i go back to my store and to my  collection page which is the inner page of  ,my website and hit refresh my transparent  header will come back it's looking a little  ,weird because i don't have any top picture on my  collection page but you might have it on the top  ,so it will look good if  you have that kind of setup,and you can easily get it back if  you just want it on the home page  ,so template is equal to index and and it's safe  now it will only be applied to your home page,done okay guys so that's it for the tutorial if  you guys liked it don't forget to comment ask  ,questions if you need more clarification and if  it's not working for you or your team and if you  ,want any help with shopify customization wordpress  web design and development we can help you with  ,that just contact us on info at websensepro.com  and until next video have a great day

Congratulation! You bave finally finished reading how to make header transparent shopify and believe you bave enougb understending how to make header transparent shopify

Come on and read the rest of the article!