how to add radio button in shopify store

hey this is ralph and in this video i,want to show you how easy it is to,create radio buttons,radio buttons are ideal when you want,your user to be able to select one out,of a set of options and you want all of,those options displayed on screen at the,same time so they can easily pick,the comparative would be kind of like a,selection menu that would produce a drop,down list of options so let's get to it,on my page i've already got a section,here to display my radio buttons,and radio buttons are a little bit weird,in the fact that they do use a label but,we would generally put the label to the,right of the input,whereas with a,text box or select menu,input text we would put the label to the,left of the input and you'll see what i,mean exactly,so i'm going to start off with input,type equals radio,so of course type equals text that gets,us a text box,type equals password,gets us a password box,type equals color for a color input type,equals date for a calendar or date input,type equals email type equals,url type equals tell where's tell at,type equals telephone all those look,like regular text boxes but they just,have a slight different effect on a user,on a user's keyboard if they're on a,mobile device,but i want type equals,radio,now that's actually enough to see,something but it's certainly not as much,as we need to do let's see what we get,right now input type radio let's jump,over to my browser and there it is right,there there's my radio button i've got,one and i can click on it and activate,it notice i can't click on it to,deactivate it that's a little different,than a check box another useful tool,so radio buttons are weird,in that you would never just do one,radio button you would always do two or,more radio buttons so let me go ahead,and do another radio button,there we go so i've got two radio,buttons and of course there they are if,i click on the first one great and if i,click on the second one i select it but,my browser doesn't know that these two,radio buttons are connected you know,what i'm going to do really quick,i'm going to jump over to my styles,and i'm going to say,input,type equals radio,and input,type equals check box,and i'm going to do transform,scale um,two yeah this will uh double these these,little guys up in size and in fact i,guess apparently while i'm here,margin right how about uh,there we go so now i've got those radio,buttons however when you use radio,buttons the browser needs to know that,they are part of a family part of a set,and we're going to do that using the,name attribute so back over in my editor,back on my html file,i'm going to make sure that these,buttons share the same name,name equals we'll just say shipping,and i can just copy,this and paste it there they go they,share the same name so check this out,now when i click on my first radio,button it gets selected but watch what,happens when i click my second or s and,my second radio button there the first,one gets deselected and now the second,one gets selected so they're part of a,set and they allow me to jump back and,forth,now if i had another set of radio,buttons on this web page,they too would have the same name they,wouldn't have the same name as this set,they would have their own name so radio,buttons in a set share the same name but,they do need to be distinguished from,each other,and of course that's where the value,comes in or and or the id so i'll,actually do both,id equals,radial one and i'll go ahead and also do,value equals radio one now this is for,shipping so um we could just go ahead,and call this uh,standard,for this one id equals radio 2 remember,two elements should not share the same,id on a web page,and value equals,express now although these they have,unique ids and they have unique values,that's still not very helpful to the,user so that's where that label comes in,i do need to supply a label so after my,first one,i'm going to go ahead and do a label,for,radio 1 and this is going to be,standard shipping,and then after my second one i'm going,to do a label,for,radio 2 or rad2,express shipping,so now i've got those inputs and those,labels now if you recall the four,attribute on the label connects to the,id attribute on the input that's going,to allow the user to,click on the label in order to activate,the appropriate shipping now clearly,with my margins and stuff it's a little,bit misleading it makes it look like,it makes it look like my radio button is,next to the previous one but that's okay,but that's the basics for radio buttons,so the key is input type radio and then,they're going to share the same name,however they're going to have unique ids,and unique values,then we can use our javascript in order,to find out which radio button selection,the user picked thanks for hanging out,with me,you

Congratulation! You bave finally finished reading how to add radio button in shopify store and believe you bave enougb understending how to add radio button in shopify store

Come on and read the rest of the article!