[2021 Free] Create CUSTOM PRODUCT OPTIONS on Shopify - Without the App

bonjour shopify world my name is andrew from ecom experts dot io and in this video i'm going to show you how you can add a product customization field yes or other things to any products in your shopify store so let's imagine a use case let's say you're selling um shoes or in my case it's going to be a video cameras and you want your customers to add the ability to add some engraving to the side and basically to add their name so you need to know that your name your customer's name is tom so that you can write tom on the product or maybe it's something completely different um i don't know there's a million reasons why you would want to customize your product with user or clients generated information and this is how we're going to do it it's super easy there is a follow along there is a description in the there is a link in the description below not a description in the link a link in the description below and that link is basically going to open a document with a step by step on how to do it so i'm going to follow that along with you and just copy paste most of the elements written inside of that document so that it's very clear and that it's as accessible for everyone watching this video so um let's just jump straight into it i'm on my store right here it's my little demo store and if i go to online store let's see to make sure yes i have the debut team installed um and actually let's see how it looks right now our beautiful demo store if we click on camera film you can see there is no way for me to add any information i can add it to cart add it to cart here we go and if we look here again there is no way of me communicating anything that i want custom engraving done a little side note we did say uh if you want a gift message this is not what this video is about this is not about adding a gift message or adding any type of message to the seller we've made a video about that right here on how you can just add a general card gift message this is really what we're going to do right here is really um how to add custom information to this product specific anyway i'm gonna stop talking and well continue talking but let's just start jump straight into it i have the documents opened on my right here the first thing you're going to want to do is go in online store like i'm here um go on your team and click on actions and do duplicate right here this is super important we're going to create a backup version of our code just in case we mess up and um we're going to work on that backup version so we don't affect any live customers this is i can't underline how critically important this is if you mess up this step there's chances that you're going to have to hire someone if you make an error down the line well if you just duplicate it if you mess it up here no worries your live team is not affected at all all right now that we have a duplication the duplicate something like that a version that's up and running we're going to go into the code editor so to do that we're going to click on actions right here and we're going to click on edit code okay welcome to the code editor so i might look a little bit intimidating but i'm going to walk you straight through it the first thing that we want to do is we want to add a new template so currently what might happen is that i in my case want engraving on only some of my products not on all of my products because let's say i sell the actual films to go into the camera there doesn't need to be any engraving on those just in the cameras themselves so for that we're going to use the concept of templates each product type so let's say my cameras are gonna have one product template and the camera films where i don't need the engraving information are gonna have another product template so currently there is only one product template that comes with a theme out of the box so we're going to create that second product template and we're going to do that by going to the template section right here and click on add a new template it's going to ask us cool you want to you want to add a new template that's fine what type of template do you want to add you want to add an article a collection we're going to say we want to add a new product template and then they ask us okay how do you want to name it and for the naming this is where i need to take your attention we're going to name it customizable but what i recommend you do is you copy and paste the name from the documents so i'm going to i copied it from the document i'm going to paste it right here and the reason why is naming is extremely important so you don't want to be a space here you don't want there to be a space in the back you don't want to misspell that name because we're going to refer to this name in other pieces the code of the code throughout the website so if you misspell it the code isn't going to be able to find it easiest way is just to copy paste it from the document and create the template right here cool it says it was created and it was saved that's pretty awesome next step the next step is to find the line of code that's called section product template and the easiest way to do this is command f on a mac or control f on windows oh ctrl f or command f and there is a little search and then you just select what's written in the document the section product template and you're going to paste it in right here and boom i found it for me it's on line 5 for you it might be online 15 or 50. i don't know there should only be one exactly there's only one and basically what the code is saying is okay well this is a template and in that template go and look for a section that is named product templates now the names is a bit confusing because there is a template here and we're working within the template so the naming is not ideal but the bottom line is that they're just saying okay go and look for a section that's named like this we don't want that because our new template that we just created isn't going to be identical to the old one so we're going to replace this by a section called product customizable template again the easiest way to do is is just to copy paste it from the code that i've provided so you're going to select all this and you're just going to paste whatever is written in the document so now it's saying in the code okay instead of going to look for the product section product template go look for the product customizable template so we're going to save that right here and the plot tickets because product customizable templates that section doesn't exist yet but we're going to create that so we're going to scroll all the way down to the sections section the naming is really confusing i get that it could be confusing but we're going to go to the section sections right here and we're going to add a new section we're going to add the product customizable template section so we're going to click on add a new section right here and it's going to ask us okay you want to add a new section what do you want to call it so then again i'm going to copy paste it exactly from the document we're going to call it product customizable we're going to call it product customizable template i'm doing the copy pasting again so that it's exactly the same for example here oh my god here i copy pasted it but you see there is a space here so i want to remove that space to make sure it's exactly like in the document perfect and then i want to create that section great this is the screen that you should see now it says it was created and was saved successfully fantastic and there is a whole little snippet of code here that we don't need so easiest way to do that is you select everything and then you press delete boom that was the next step now there is nothing left in this new section that we created make sure to save it all right so just to recap where we are at so far is we created this product customizable template we said within that product customizable template hey go and look for a section that's named product customizable template we created that product customizable template section so now it's going to find this but there is no code in it yet not to worry that's where we go to the next step the next step we're going to go into sections and we're going to look for the product product template this one right here the classic product template and we're going to select everything that's written here the easiest way to do this is ctrl a from andrew on uh windows or command a from andrew on mac so i'm doing command a it's selecting everything i do copy and then i go back to my section it's right here customizable template but in case you removed it for some reason product customize customizable template under the sections [Music] i could have just clicked right here so it's empty we're going to paste it all in here boom we're gonna save it all right we're about halfway through um i just want to take this opportunity to say i make a whole bunch of other videos beside coding i also do strategy videos for example if you're setting this up chances are that you're not on top of your data and you're losing a whole bunch of money on data with your shopify store you could be making more so here i talk about the importance of data it's these strategy videos they're a little bit more fun and they come out every wednesday i also do app review videos coding videos maybe even a drop shipping series sooner or later um so yeah please if you could spare a little subscribe it costs you nothing and it means the world to me it really keeps me and my team going for making these types of videos anyway i'm gonna stop jabbing about that and we're going to continue right here now that we have saved the product customizable template section um we're going to create our custom fields so the easiest way to do that is actually to use an external website that i'm going to pop in right here it is linked in the document i'll link it in the description as well and it looks like this basically what this does is it allows you to create your form right here and it will show you a preview on the right side and then it will also create the code for you so you don't have to code your form from scratch it's super useful you can do things like a long text radio buttons drop downs this is all the information you can require from your clients we're gonna because we're engraving and we just need a name we're gonna do a text short and we're gonna ask your name for might not be the best way to phrase it but you get it you can also say hey this is a required field so if you want people to enter that field before they continue to check out that's definitely a possibility to their card not to check out um or if you say like no anyone can do it we're gonna click required right here and this is how it's going to look um perfect we're going to copy it to the clipboard right here and then we're going to go back into our team perfect now that i have built my form with you know everything i need and i copied it to the clipboard we're going to go back into the code and we're going to go into these sections the product customizable template which is right here or right here that's the one we are in right now and we're going to place that block code that we have just copied from this external website we're going to place it into our r code now this is where it's a bit tricky because it's going to be different for everyone watching this video what i suggest is that you do a command f i'm sorry that shouldn't be selected command f on mac control f on windows and you find type is equal to submit so i'm going to copy that right in all right type is equal to submit there's only one and this is your add to cart button so you can see it says here button uh name add it's going to be a little bit different for everyone the type is submit that's what matters and this is code works and blocks and a block opens and a block closes and everything in between is part of the block this right here this little sign says that the block is opening this little sign when it's the same like little hat on the sides with a forward slash i don't know how to say it in english i'm sorry means that the block is closing so this is the start of the button this is the end of the button that's the button block the code that you just copied from here from the external website you want to paste it i would suggest just to make it easy paste it right here above of the button um type submit this is your add to cart button so above that that would be the easiest way to do it now you can move that block around just like you would feel like you don't this is a bit trial and error i'm trying to make this video so it fits everyone it's really going to depend on you if you want to be sure that it works and don't want to break your head over it just look for the type submit and paste it in here in the document i'm explaining how you could also put it into the form or this or that the bottom line is you always want to do it before or after a block you see here is a start of a block um there should be a another block here like you usually you don't want to go inside of a block although again that depends um so you can kind of play around with it for the ease of this video i'm just going to put it right above the add to cart button that's why i created some space here you can create as much space as you want that's not going to reflect in the front end so some space and then actually i'm going to go back make sure i copied this correctly to my clipboard and then all you do is paste it there you go i pasted it um that's really ugly so i'm going to do it like this so it's nicely it's just easier to work with for any developer that that comes in after me uh this is absolutely not mandatory i just do it because i'm very ocd on this so what i'm doing right now is i'm just adding some notes that do not affect the code at all so you're not you don't have to do this it's just some notes to keep the code clean and and pretty so that if i get hit by a bus and someone else has to go into this code they understand it in a matter of minutes instead of trying to figure out why there is this piece of code here anyway once you have found that type submit you've decided where you're going to paste your custom code from this website and you pasted it in and spaced it you can click on save and then we should be good to go everything that's code related now it's not quite done just yet um so now it's saved if we go to the online store now so you're going to see the last time our version was saved was just now now because our version isn't live yet we can't switch our product templates so we're going to have to put this live so you go to action and you go unpublish it's going to ask you are you sure you want to publish this and you're going to say yeah i'm pretty sure okay you publish so if you go to your website right now um even though we worked on it nothing has changed yet because we have worked we haven't switched the templates yet so this is still thinking hey i'm using the template that doesn't have the engraving code and we're going to change that right now the way of changing that is once the team the code that you worked on is live so you published it you're going to go into products and you're going to choose the product where you want the engraving for example camera film in my case you're going to scroll down and it's going to ask you hey for this specific product which product template should i use and you're going to say well don't use the standard of the box one normally there should only be two there is a from old code there is a bunch of others here but don't use the standard one use the product.customizable one that we have coded in together just now and that has the engraving field so you can do this with as many products as you like then you save it so then you go into your online store you go to your product drumroll [Music] there you go your name for engraving and my name is andrew i add it to the cart i view the cart and you can see camera film your name for engraving your name is andrew perfect and i can check out so um this is basically how you add customizable fields to any of your products and you can add as many of those as you want you can add all these different types it's very very easy for you to do you're going to get that information in the back end as well that you need the engraving of andrew that only makes sense again i make tons of these videos i also make tons of strategy videos i really hope i'm providing value here to you let me know if there's anything else you wanted me to say or do let me know if there's any way i can help you my name is andrew from ecom experts dot io and i will see you in the next video ciao [Music] you

Channel: Andrew from EcomExperts

Views: 40,060

Keywords: custom product options, custom product options shopify, best custom product options shopify, customizable products shopify, customizable products, how to create customizable products, how to create customizable products in shopify without an app, infinite options shopify tutorial, infinite options shopify, infinite options by shoppad, infinite options app, infinite options by shoppad shopify, infinite options tutorial, infinite product options shopify, ecomexperts.io

Id: 5b_5tFOzYuU

Length: 19min 0sec (1140 seconds)

Published: Thu Oct 08 2020