how to add textbox to shopify pages

hi everyone in this tutorial we're going,to create a personalized text box or a,drop down for your product page so what,we're creating here is something like,this and you can put like example it's,an engrave so you can put hello on the,engrave and you could have a message,make sure,it looks nice,so when your customer add to cart,it should show on their card so right,here so hello make sure it looks nice,it should show on when you click on the,order so you should see what their,customer put in here,so to start we have to go to the made,for you website,so in here i provided the link for the,shopify ui elements generator and when,you click this one it should bring you,to this website,um this website is not related to me,but it does provide simple code and when,you,you have a choice to add text short,which is just a one line text box which,is good for a name and you also have a,text loan which provide your customer to,add a paragraph which could be like a,message,and also you can have a radio buttons,and drop down select check box and check,box group,for me i'm just gonna use text short,and then i'm gonna change the name to,engrave here,and i,really don't want it required but i want,it to show a check out so your customer,knows what they put on the message so it,will give you hint right here and this,is the preview right here but it's not,really the preview i will show it to you,so what we're going to do is copy to,clipboard,we're going to go to our shopify store,so online store we click teams and then,we're not gonna edit the live team,instead we're gonna edit this new dawn,theme and you click actions and then,edit code,let's just expand our um screen by,clicking this button,so we're looking for a section folder so,let's close this one we're going to,click on section folder,and under our section folder we're,looking for the main dash product liquid,so main dash petal liquid right here,and in here we're gonna find our add to,cart so ctrl f,and then let's type add,to cart so right here this is what we're,looking for and if you go to my website,it should look like this okay,and then in here uh we're gonna paste,our code,that we just copied from the,chevy pi ui element so when we copy this,one,we're gonna paste it here so click enter,so we can have a space,and ctrl v to paste right here and then,let me just fix this a little bit,and then click save,now when we preview this one let's see,how it looks,so we preview and let's say a sample,and then see how it looks right here i,don't really like it in line so um let's,try to customize it a little bit,so what we're gonna do is just to add,let me just close this one,and what we're gonna do is just gonna,add the break so br,and i'm gonna have a style in here as,well so style,and then width,100,and i also want to adjust the line,height so it's a little bit taller,and i'm gonna put two right here,and then make sure you close it with a,quotation mark and click save,and then let's preview again so yes it,should look like this and i also provide,that code in my website right here so,when you go to my website i added this,code right here the br and then the line,height for the text short and if you,want text long you can just add the,width and then also the vr and i also,have the drop down so when you add the,drop down um let's go back to our ui,shopify ui elements generator,and when you have a drop down right here,let's say colors and then we're just,gonna add um red then comma,white,and blue,so make sure,everything is capital so you can have it,previewed right here so red white and,blue,and then i wanted to show and check out,so we're just going to copy this one,and then we're going to go to our liquid,code again in our sharpie by store,you can add multiple shapify ui elements,as long as it has a different um id and,then the name,so let's ctrl v right here,and let's fix it a little bit,so this is my new one so let's click,save and look on our preview,so in our preview right here it doesn't,really look good so i added some,customization,so when you go to my website i added,some font size to 1.5 rim so it's a,little bit bigger and then the width i,wanted to it's just the same length of a,button,and then i also added the padding so it,looks good inside so what we're going to,do here is just going to copy this one,ctrl c,and make sure,you paste it,before the,angle bracket,let's paste it here and click save,and then let's do the preview again,and yes it looks better right now,so it's the same thing it should work,hello and then add to cart,and then when we view our cart,yes it should be here,and i believe that's it guys and let me,know if you have any questions or you,want me to customize some of the sharpie,by ui elements,and don't forget to subscribe thank you,so much for watching

Congratulation! You bave finally finished reading how to add textbox to shopify pages and believe you bave enougb understending how to add textbox to shopify pages

Come on and read the rest of the article!