how to add social media icons to shopify header

okay also something else that i wanted,to show you in case you wanted to do,this for yourself,i wanted to add social media icons to,the top of the,um website,and so the way to do that is very tricky,you have to add a lot of code code,so i have i found an article,um,i will try to put this link in the,description of the video,but basically,it tells you,to,scroll to the top,it's a lot of code you have to edit all,right so basically you're going to go to,you're going to go to,these three dots,you're going to click edit code,if you're already editing your page this,is where you'll find it,if not the other place to find it is,let's see if i have it open,okay,so if you're on this page this is a,development store in case you wanted to,know,if you're on this page the way to get to,the code is by clicking actions and,clicking edit code,okay,so now that you're there,edit code,you're going to look for,um,you could type in here search files and,you're typing in header.liquid but it's,going to be in the sections,area,um so what i did so i didn't mess,anything up i copied everything so,command a or control a,and i added a new section and i called,it,copy dash header dot liquid,so that if i messed up i could just get,the code again and re-paste it back into,the original file so do that first in,case you want to mess up anything,because it's a lot of code okay so make,a copy,of the header.liquid,and then once you do that go back into,the original header.liquid,and you're going to look for,this stuff so this for me,i found div dot,div class equals header dot dash icons,on number 415,um line 415 and it went all the way down,to like,456 or something like that,um then i should have wrote that down,because that was helpful but it starts,at 4 15,and then,um you're gonna look for,the ending it's gonna end with the div,make sure it ends with the div,and that might be like at four um five,something i forget the line,um let me see if i can still find it um,4 15,because then when you re-paste it it's,not going to be lined up properly,so,you'll be able to um,well no,am i in the right one,i am,and it doesn't look the same,well anyway for me it's 4 21 now,so,yours might be 4 15. it started for 4,15. maybe when i added the rest of the,code that i added it pushed it down,but,from 421 all the way down you could tell,it's not lined as this line like,vertical when you when it's cold it,usually,indents but being that i add a new code,is not intended so i could easily find,what my edits are so from 421,all the way down to,602,so however many lines of code that is,th yours will start at 4 15,and count the same amount of code lines,that i have to figure out where it ends,if that makes sense,and you're going to replace the code,that's there with the code that this,document gives you so i'm going to link,this in our in the description below,then,the next line of code that needs to be,changed,is,this,menu draw link so it starts so you start,at the bottom,this is the bottom the first line of,code you're changing is towards the,bottom of the of the um,document or whatever you want to call it,and then you're going to scroll back up,and let's see what number that is,so from,for me it ends at 263,again for you the number is going to be,different because i already added the,top portion portion of the code so we,pushed everything down for me is 263 so,count from 263 whatever that number is,all the way up to,um,it should be 176 but,no,header list oh,well it's supposed to be 175 for some,reason it's indented but you're looking,for this menu draw,utility links you're looking for this,yeah i don't know somehow,it's indented but anyway,make sure you're looking for this div,class menu dash draw underscore utility,links,and then this is a short amount of code,so you're going to be confused because i,was she's telling you to take this code,delete it and you're going to replace it,with this,code,and basically,um,you're just changing i think the,beginning portion and everything below,is the same that's already there,but just copy everything so,find this line right here when you,draw utility links find that,and if you need to read it line by line,do that until you see um,the end of the div and now if you're,doing this and i'm doing this in april,2022 i'm using the dawn theme,the div ends with a bunch of other code,inside of it so you're going to think,that it's wrong just follow the end of,the day so like when you click,to know when a div ends,and begins right,if you click it,it'll turn orange and then you would,just,um this below,you will follow it down and it tells you,see the orange so anytime you want to,know where a block of code begins and,ends just click on,on it the beginning of the code and,it'll highlight and it'll tell you,everything in between is what's included,in that line of code so this should be,back here but whatever i'm not changing,anything,so,that's a good way to know what is,included what needs to be included um,so then once you do that you're gonna go,and replace the second block of code,then you're gonna scroll back up to the,top styles are usually at the top of a,document or code document so you're,gonna scroll all the way back up mine,started at number 17 so you should start,at 17 as well,and you're going to just replace the,whole style so it starts with style here,and it ends here,1771 you're going to replace that i,think it's the same amount of lines,maybe and um,they just give you different functions,or whatever it is then you're gonna hit,save right,and as you go back let me go back okay,so then when you come back here the way,you're going to get their social media,you're going to click um,theme settings,you're going to scroll down till you see,social media,and then basically just copy this this,part right here copy it and paste it in,the box,right all the ones that you want so let,me let me add i don't know i'll add,twitter because it's popular control,copy,ctrl v,and then it'll pop up,um,over here see there's twitter,and you hit save,and that's all there is to it hopefully,this was helpful and it'll save you some,time googling because yeah it's a lot to,figure out i stumbled on it alright,that's all

Congratulation! You bave finally finished reading how to add social media icons to shopify header and believe you bave enougb understending how to add social media icons to shopify header

Come on and read the rest of the article!