how to add color variant in shopify

all right welcome everyone again to,resolution design on another video here,and in this video tutorial we're going,to talk about how to add color swatches,in the collections and in the products,beginners tutorial let's get right to it,first as always I want to remind you,guys that if you really like content,like this please please please subscribe,press that like button so that I could,continue to make more contents like this,I make this content for you so that you,could go ahead and build your store,without having to rely on anyone it,means that you have time and you're,gonna do this yourself okay,this specific video is extremely intense,in the sense of a long instructions so,I'm gonna be very very slow in the,process of explaining this just have,like some notepad or something next to,you so we could get started right away,okay alright so let's get right to it,okay so we are back again using the,turbo theme and again I cannot emphasize,how important the turbo theme is because,unlike other themes they don't have,everything all together now granted you,see this super big banner maybe you,might not like that that's fine but,we're just gonna talk about this,particular instance which happens to be,the color swatches again turbo theme is,on the description it's a very good,investment because it has everything,that you need in order to make your,store to look nice and let's get right,to it,okay so let's pretend for a second that,you went on a parallel okay and you went,and you got a product that has multiple,variations of a product okay it comes in,different colors so over here I'm gonna,go to the back end and I'm gonna go to,products and my product already has been,imported from Ober lo I have another,video if you don't know how to do that,but it has already been imported from a,bear load into the store I've already,added it into a collection okay and it's,already living on the front end of my,store it's just that it has all of this,gibberish stuff right we're gonna get,right to it so let's click inside here,of the product and as we can see right,here we have these we have these mugs,right,warm stainless steel mugs whatever if I,could speak today and then we have these,variation colors you see that these are,not really colors so your suppliers like,yeah whatever they don't care they just,want to you know you just sell it right,and so in order to make this attractive,well you need to make sense of this you,don't know what's what because they have,different values as you can see here and,they only gave you one picture all right,so let's go ahead and fix this so that,it looks really nice,all right so the first thing that we're,gonna do is let's first find this,product and Aliexpress again and what,I'm gonna do is I'm going to go into a,bur low if you guys don't know how to do,that let me just back up you go over,here to where it says apps and then you,click on where it says Ober low okay so,I'm just gonna go back and just save my,spot over here I open I like to open a,separate tab for things because I don't,like to just go back and forth on things,so if you have a bare low up and running,make sure that it's on another tab here,is the product right so if here's the,product then right here we have,information of the product over here and,let's go ahead and view supplier store,I'll click on that and that's going to,take me to the dedicated page of this,vendor right and we're gonna look for,this product and there it is right here,okay let's go ahead and click on it so a,few things that I want to do I already,have this picture but I don't have these,other pictures right you're like ah,what's up with those pictures why how,come I didn't get it it's okay we could,get them right now if you wanted to but,I like to do it the old-school fashioned,way right so I am just going to take,some screenshots of these images by the,way if you're asking me what screenshots,fool am I using I'm currently using a,Mac right but if you have Windows you,could go ahead and take these,screenshots yourself using kind of like,a tool I'm not sure what it what it's,called but you know go ahead and google,it okay so for you to take screenshots,but I like to work on Macs for this,reason right because I don't,that time I just wanted to do things I,just want to get it done all right so I,took four screenshots that are currently,on my desktop and again the objective,here is to figure out what is what so I,clicked on the first one and as you,could see right here,color is zmm 4 4 2 3 let's see if I,could associate that with something over,here ah it's this one right here it's,the actual first one okay and so what,I'm gonna do is that first I'm going to,upload those four pictures and I'm gonna,add them here okay so let me go ahead,and just kind of like expand my window,so you could see me adding these four,images alright and now let's give it a,name so we're gonna give this you know,something like let's just call it frame,oops right here so I'm all over here,guys come over here and I'm gonna call,it green okay all right let's just call,it old pack green I'll call this biggish,I'm gonna call this pale pink I'm giving,it like unique names not exact names I'm,gonna call this light blue okay now here,I go one two three four I've highlighted,them over here guys,right I highlighted them drag drop that,in there,now I have those pictures so remember,this guy right here it was supposed to,be a specific color let's click on this,box right there I'm gonna click on this,box right here and I am going to look,they have the other pictures there all,along well well in case if it doesn't,have it it's okay,click on this one it's one the 4 4 2 4,which ones out 4 4 2 2 that's this one,4.24,and then the last obvious one save now,once I've done that you're going to,notice that in the front-end of the,website it probably didn't do anything,okay,so we don't have any swatches yet if I,click inside of the product I just have,like these four circles that are pretty,much just saying the same thing okay,we're gonna go ahead and fix that all,right okay so the first thing that we're,gonna do is let's go back to that name,so right here in the color I'm gonna,call it just give it a name right it,doesn't we don't have to be technical,beige light blue and what do we call,this we called it pale pink and let's,press save to that and let's see what it,did onto the website let's see if it,changed so some color swatches started,to come up here and if I start hovering,over them you could see that the colors,actually coincide with the name right,but the problem is that this green,doesn't match this and this color,doesn't match that that doesn't match,this this doesn't match that all right,so something seems off like these colors,just don't match at all furthermore if,we back up into the collections page we,go over here where it says home style we,don't see any color swatches here too,right so let's try to fix one problem at,a time all right so let's go back here,let me go ahead and refresh just in case,make sure that everything is up-to-date,all right so when I first reproach now I,have a whole bunch of repeats right,let's go ahead and,can't rid of the repeats right but let,me move let me shift these guys around,so that it matches this so you see how,this one it's first second third fourth,right let me move these pictures around,click hold drop click will drop that's,cool and that's cool so it's reading it,like from left to right type of thing,these guys don't need to be here because,there are duplicates delete media let's,go and then it's gone right so what does,that do for the front end because we,have like the super long amount of,pictures right let's go ahead and,refresh this and there you have it,now it's cleaner it doesn't have all of,those pictures right so I could switch,them around see and then I could go here,and then here here here so now the,pictures are coinciding but again we,need to fix this problem because right,here this is kind of like it just,doesn't look right,ok so the next step is well how do we,make it so that the colors are either,exact or if it's more or less the same,right so turbo what it's telling you is,you could go to this website right here,where it's called and I'll leave the,link in the description it's called,w3schools calm colors blah blah right,and over here we have color names you,could type the variant names to any of,these colors now not the code I'm,talking about the the actual word of it,right so if I wanted to I could try to,find something that resembles close to,this color in this website here okay and,so let's see if I could find something,like this,I mean aquamarine is a little bit too,bright dark grey dark turquoise knots,too dark but you have so much okay so we,have a light green light green might do,it medium aquamarine hmm maybe let's try,it out,and notice how it was all one word guys,okay I mean it's okay it's it's pretty,close right and we could try to do the,rest like that but I'm gonna show you,the way I like to do it because as a as,a developer I like to make my customers,very happy and I want to make sure that,it is on point I'm not taking any,shortcuts okay so what I'm gonna do is,I'm gonna go more intense on this you,see these pictures over here I'm gonna,go ahead and get rid of these I'm gonna,toss them in the trash those are gone,okay and what I'm gonna do is that I am,going to take a screenshot of the exact,center point I'm gonna do one of these,okay I'm taking the exact texture of,that and that is this guy right there it,looks kind of grayish or whatever but,let's go to the next one next one I'm,gonna take the exact texture of that,okay I made a second screenshot the,third I'm gonna go and that's why I did,the first step as I showed you right is,to do this to get a real zoom in and,then right here there is so as you can,see on the upper right hand corner of my,monitor I have very quick screenshots,okay and but they're just called,screenshots the files are called,screenshots whatever right let's go,ahead and change the name of it all,right so let's go back over here I'm,gonna rename this as how it was before,so I'm gonna call this old pack yeah,look at green press save,and over here I'm gonna rename these as,PNG files these pictures I'm gonna,rename them so right here what I'm gonna,do is on the first one I'm gonna call,this and it has to be all lowercase guys,so watch me Oh,hack and because it's two words I do not,press the spacebar,I press a - still lowercase green dot P,n G that's the name of the color swatch,it must be like that what's the next one,the next one is called age all lowercase,beige okay,but we have to give it a code word hmm,so let's call it pale beige or off-page,dot PNG the reason that I'm saying that,is because the word beige probably,already exists here and Shopify is gonna,like uh what are you talking about,so right here I'm gonna call this fall,off page because it's a custom color we,have to give it a code name it cannot be,a name that lives here it cannot be that,it has to be a custom name next one,light blue we have to give this a,different name so we're gonna call this,we're gonna call this it purple that PNG,I gave it a code name right and then,right here I'll call it a bit purple,okay and then finally this one pale pink,so Shopify knows that this one's pale,pink right so what we're gonna do this,we gotta give it another name we're,gonna call this let's call it strawberry,pink,I'm a PNG so it's strawberry - pink that,PNG see that so any space within the,word you have to put a dash into it but,over here you don't have to so I'm gonna,put strawberry pink okay so now we have,our new colors now let's see what,happens over here okay it should it,should be broken it's gonna break what,it's still off okay let's go ahead and,fix it now the last stuff that we need,to do is we need to go to the coding,area guys don't get scared of this don't,like don't get super nervous if you do,you could contact me maybe you know you,could hire me whatever but I'm teaching,you this so you could do this for free,just take it slow like that song okay,all right so what I'm gonna do is I'm,gonna create another tab I don't want to,lose my place here I'm gonna go right,click and I'm gonna create another tab,okay if you like this experience that,I'm giving to you the guys please don't,forget to subscribe and press the like,that helps me so much all right so we're,gonna go right here into the actual,turbo theme okay and in the turbo theme,don't press customize go to where it,says actions right here and go to where,it says edit code don't get scared now,this edit code in order to make things,very easy to view let's go ahead well I,already have a zoomed in but let's pay,attention to this right here okay so,this column what we're looking for is,the assets folder right here the assets,folder click on that okay and we're,gonna add a new asset we're gonna choose,a file,we're gonna go opaque it's open,upload a set saved successfully refresh,our color is there let's do that again,add a new asset choose file off page,upload let's do the rest add new asset,choose file a bit purple open upload,last one add new asset choose file,strawberry open upload go back here,press refresh we have our colors our,custom colors if you like that trick,holla at your boy right there and the,subscribers right there on the likes,please please please this is valuable,stuff ok we still have one problem we,fix the the product landing page but our,next problem is that when we go to the,to the actual collections page it's not,showing it and this is the last issue,that I'm gonna help you out on hopefully,by now you would have subscribed I don't,know ok so let's go here what do we do,how do we enable this well let's get out,of here for a second now let's click,where it says online store and on online,store we're gonna go ahead and click on,let me see yeah let's go and click on,customize,all right so on customize what we're,gonna do is we're gonna go to that,collections page so and by the way this,is mega mega mega menu if you guys want,to learn about mega menus I made another,video about it we're gonna go to the,actual collection home style and notice,how all of this changed alright and,we're going to click on collection to,see this interface and on this interface,what we're gonna do is we're going to go,right here where it says theme settings,at the bottom which expands into even,more settings for right here what we're,going to do is several things I don't,like the fact that I can't see the,product unless you hover over it that's,annoying and I don't think your,customers are gonna like that either so,we're gonna go ahead and disabled Kwik,shop okay and we're also going to go,ahead and disable this one right here,with us show product information on,hover get that out of here I'll let it,load now we have the name of the product,and the price but still no color swatch,right here and this is why I left this,last place I don't want you doing this,first follow all my instructions before,and do this last show color swatches,there you have it guys for safe,all right everyone thank you so much for,watching this video again with this,theme that I have used is called turbo,and this theme does a lot of things,right the team out of the sandbox are,one of the best themed designers out,there and they've been with Shopify for,such a very long time if you want to,purchase the theme itself go to the,description at the bottom invest on it,because you're gonna see different demos,of that theme right you're gonna see,different demos of the theme and you're,gonna go ahead and choose the one you,like but in reality you get all of them,right for that same price again I'm,gonna continue making videos on how to,use turbo to your fullest potential the,only thing I request from you is to hit,that subscribe hit that like and thank,you again for watching thank you again,for the support and also let me know in,the comments what are you struggling,with if something's not coming out right,based on the instructions that I've just,told you rewind and try again just go,slower because this stuff you can't go,super fast you have to go slow slow down,right and let me know in the comments,where you get stuck and hopefully I,could help you out thanks again for,watching until next time

Congratulation! You bave finally finished reading how to add color variant in shopify and believe you bave enougb understending how to add color variant in shopify

Come on and read the rest of the article!