how to change image variant on shopify when drop down option changes

bonjour bonjour shopify world my name is,andrew from e-com experts dot io,and i have to apologize this week again,there's two coding videos no strategy,videos and that's because it's black,friday and i'm overwhelmed not to worry,this,video should save you a whole bunch of,money i am going to give you a heads up,though if you are using the boundless,the,express or the narrative team this will,not,work i'm sorry i'll make another video,about,these teams and this code if you're,using the brooklyn team it will work for,you however you have to put,the variant option as a drop down and,not as,a swatch that's kind of the anointing,about doing this youtube coding i tried,to give one tutorial that matches,a million different sites i'm doing my,best i'm sorry,this video i'm gonna explain to you how,you can save money on returns because,people click on the image of a different,size of your product but the size,variant,picker doesn't automatically change and,so they add,the wrong product to their cart and they,ask for a return seriously this is,super common together with people just,forgetting to select their size,one of the big issues is really people,clicking on the image and assuming that,their variant picker automatically,adapted,well it did not and so they end up,ordering the blue t-shirt while actually,they clicked on the red t-shirt and,we're hoping to get the red t-shirt and,that gives you returns that cost you,money and that's just a hassle,okay let's head to the online store,let's look at our demo store right,here and welcome to our demo store in,here i think i have a product,set up just for this it's called,colors right here and you see,this is the black color in a size small,but if i click on the red,oh i really like the red buy it now but,the color picker didn't change it's,still on the black,of course if i click the yellow then it,changes,but you know if i click on the actual,images,it doesn't change it fun fact this is,actually one of the test,questions my team had to do in order to,become a developer for e-com,experts dot io because it doesn't work,on certain teams,there is really a little twist to it,that you gotta understand,now they can just look at this youtube,video and they can go in the description,down below and click on the link and,there is the exact code that you have to,copy and paste in your team,that i will be doing with you right now,okay let's get,to work so first and foremost whenever,we touch code i said this a million,times in my videos you're going to have,to duplicate your live team so you're,going to click on,actions and duplicates,this is to make sure you have a backup,in case you screw something,up you don't have to call a developer,you can just revert,to the old version that still works fine,because you haven't touched it once,that is done we're going to go into the,code so we click on,actions edit code,welcome welcome bienvenue on the,code side of your shopify store so it,looks intimidating but it really isn't,you get used to it you scroll all the,way down and you go to,assets in the asset folder it's going to,depend,which theme you have but you want to,look at something,general like theme.javascript you're,looking for the dot,js extensions so theme.javascript,maybe yours is a little bit different it,might say team.js.liquid,maybe maybe something like general.js,depending who worked on your theme,just make sure that it's something,general like,theme not like gift card which is,something specific or lazy slides or,password no no something general,but usually theme.js should be there,when you find the theme.js which by the,way should also be the biggest file of,all of the gs files,you're going to scroll all the way down,we're going to go downtown i can't,actually put the actual music because,that will be a copyright infringement,anyway you go all the way down you hit,enter a couple of times so you create,those white lines and then you're going,to type in,forward slash two times and you will see,the line will become gray you will type,in here,code for making sure,when clicked on an image,the correct variant,is selected,so what i just did there is i added a,piece of comment,this is for any future developers that,walk into your store,and look at the code they immediately,know that code block,is for that purpose if you want to save,a lot of development time and money down,the road,comment your code please once that is,done you can go down the description,next to the subscribe button,there is a link and there is a big block,of,code in that document you just copy it,and you paste it right here,boom did i mention that the description,is next to the subscribe button,it would really help really anyway,once you have done that you just copy,paste the code,make sure it starts with a constant,select variation by clicking,image and it ends with like this,curly bracket at the very end that way,you know you have,everything you save this,and that's it let's see if it works,we go to online a store,copy of the debut team we do actions a,preview,we go to the catalog we go to my color,products,and normally if now i click on red it,should select,the red one automatically here let's see,if that works boom,who the boss boom who the boss and i,turn it back to black,and it's back again and then i turn it,to red it works,isn't that fantastic,so now that we know it works we can just,click on actions,we can click on publish are you sure you,want to publish did you,double check to make sure everything,works on the team yes we did sir,and we hit the publish and we're good to,go now we're live,and we're ready to save a whole bunch of,money on those returns,as a quick fyi some of people might ask,well how do you know that,the black variant is attached to the,black image well if you go into your,products,make sure to add the picture in the,variant section and not,in the general section so we added the,picture here next to each variant and,that way shopify knows that this variant,has this picture there you go guys i,hope this video was,helpful to you i hope it will save you a,little bit of money on those returns,that were done,a by mistake i'll look into making this,exact same coding video for the themes,that,this didn't work on and then for the,rest,make sure to subscribe to the channel,make sure to check out the strategy,videos the app review videos because it,can,save you a whole bunch of money my name,is andrew from ecom experts dot io we,specialize in shopify and i'll see you,in another video adios,you

Congratulation! You bave finally finished reading how to change image variant on shopify when drop down option changes and believe you bave enougb understending how to change image variant on shopify when drop down option changes

Come on and read the rest of the article!