shopify how to add social media buttons on pages

hey collins here and i want to show you,on this video how you can add a share,button on your shopify page,so currently on the shopify down theme,you have this feature that allows you to,share your product or maybe click on,this share button just allows you to,like copy the link,that's pretty much all it does there's,no option for you to be able to share,this through an email share with your,friend on whatsapp but to do this there,are two ways you're going to use a,custom code or use an app so this is,awesome and it's totally free so that's,what we'll be using on this video to,show you how you can do that app store,you need to search for this this,this is shin,so this is share or this share button so,this is what you're looking for,so just to click on it it's totally free,when you have this app add it to your so,follow the process and install it to our,store once it is installed it's pretty,easy to set up so you want an inline or,a sticky so an airline is one that you,can place anywhere on your store you can,place an inline here you can place an,airline here where a sticky is one that,has to just always remain at that,position so whenever users are scrolling,is only sticky,so you need to choose that from here so,let's go with the inline,and we're just trying to customize how i,want it to look so,who don't like this look obviously you,want to make it look more like your,theme so it does not just stand out,so what we'll do in this case is just,trying to play around with it here i,want it to be on the left you want,you don't want all of these words so put,it to none,so just a couple of blocks we don't want,it to be color wanted to just be white,and black so,i wanted medium and if you want round,corners or,extra space you know anything else just,remove the ones you don't want from you,are the ones you want,that's just pretty much it and you,go to nest,and you just sign up an account here and,share button you have the active so this,is the only button that we've,created on the app then we'll click this,we'll have this code right copy this,code just click here then we go back to,your online your theme,and,whenever you want this share button to,appear you need to just insert the code,so let's say i want to put on our,product page so,you need to access your product page and,from the down theme from here you go to,actions,remember if you go to your live store,themes actions edit code i want to,search for the,products page and start this coding onto,it into it,so the best way to always go about this,is go through your templates right,everything is a template so you look for,the product page template so this is it,when you open up the product page,template you're able to find the,section that is being used so in this,case you are using the main product,section right,so select,sections look for main products,so there's a section we need to edit,so now you just need to find the place,you want to insert this and the best way,to go about this is to,from here you need to just do like an,inspect right click here,so from now i want to know the exact,splits on this page i want to insert,this code so use the share button and,just to inspect where this share button,is,just allow it to know the right place to,insert it,so we can just see the class here you,can see share button quick add hidden,you just want to get this class so once,you have let's say this share button,right so,you know we want to insert it below this,so we'll cut on this we just need to,come back here we'll hit ctrl f or,command f,then,share button so now we can see the code,right so this stuff here,this is it from here so from here to,here,right so for us to insert down to insert,it just below this right appear below,that,so just put it in here,so we'll just save,right,so go back to the page i'm gonna refresh,you see your share button you know so,there's it's on the live page,that's pretty much how you do it so if,you want to change the position of this,element you want to insert it somewhere,else you just need to go through your,console to know where you want to add it,so you also want to insert this code to,a,blog page,so let me want to do this here so what,you want to do is go back to your theme,go back to the theme editor so from the,template again you need to search for,your articles and set it into an article,so search for the article or json so on,this you will see the section so i,follow this process because i believe,it's easier for you to find what you're,looking for,so this is your main article so we need,to go to the section side and look for,main article,so i believe this is what you're looking,for i mean article this is what you're,looking for,so as you can see for me i already,copied this social sharing where you can,also,see,the classes here for the share button so,you just want to find the location right,just for you to know the points it is on,the code so i can insert you on just,right below it,so we can just put this share button,class here,so all you just need to do is find your,id school start so from this div,to here,so we can just go back and copy this,code snippet and,just insert it right below this,let's set it right below here so,so let's start it right below here,and that's it so now we can refresh this,page and i believe we should find it,here,yes so here we will insert this code,here and go to this page and we'll check,we'll see that it is here so this is,because we've added it outside of the,main div right,so we need to copy this controls see,this and move it inside the,shift div,so you want this to be inside this tab,so we'll just remove this now,right,and now i've copied into this steve and,we'll save it again,if we go and refresh on the page,you can see that it's not inside another,step,if you want to remove this entirely you,can just comment out this code,right so from here,from this part this is shape button you,can just add a comment,on it so,you can just add the comments,comment and here that it ends you can,just add another end comment,so this will completely remove it from,showing,so,refresh this so only this is showing now,so this is what i want right for any,other page that you want to do this is,still the same process you,look for the class using the inspector,then you come on here and you search for,the class then you know get the code,start and they want to insert yours so,thank you and,have a nice one

Congratulation! You bave finally finished reading shopify how to add social media buttons on pages and believe you bave enougb understending shopify how to add social media buttons on pages

Come on and read the rest of the article!