shopify how to map multiple images to 1 variant

hi this is Jung from let's build Shopify,and today I have another hands-on,tutorial for you where we will improve a,product page so that it would only,display in the product images that,belong to the selected variant so if,you've seen my video on implementing,these color swatches you may already,recognize the product page and if you,haven't seen that you may find that,right here but now you can see that I,went ahead and actually added some,lifestyle photos of me wearing the,t-shirt in different colors and now you,can see that all the thumbnails would,show up at once but actually the,preferred way would be that they get,filtered based on the selected color and,that's exactly what we're working on,today so let's get started all right so,first of all I went to the product,editor and you can see here I have all,the product images and down below we can,see all the different product variants,and each of these variants has one,featured image assigned to them so for,all the red variants I have the red,t-shirt for all the blue ones the blue,and so on and so forth but I also have,one variant it's at the bottom it's the,black one where I don't have a featured,image and we will also implement some,fallback logic for this case but we will,get to that later and now that we have a,featured image for every variant IATA,needed to find a way to group all the,product images of a single color and one,way of doing this was giving them the,exact same alt text so you can see that,all the red images would have the,alternative text red and all the blue,ones would have the alternative text,blue and basically this could have been,anything so it could have been awesome,red t-shirt or something but it needs to,be 100% the same or every image of a,single color alright so now that we've,completed the basic set up we still need,to find a way to select these thumbnail,elements in order to filter them at all,and therefore we need to find them in,our theme files so I jump over to the,Shopify theme file editor and the good,place to start is the product dot liquid,and as we start to read satisfy it we,can quickly note that the actual content,lies within a section that is called,product - template so I move over to the,section folder and open this file that's,called Parekh - template and somewhere,in here we should find our thumbnail,elements but right now I don't have any,clue how they are called or how they are,made up so I think it's a good idea to,jump to the front end and investigate a,little bit more so we can find some,insights back on the front end I would,now pick one of these thumbnails and go,to inspect this should bring up the,chrome developer tools and highlighted,we have the image tag that contains the,actual image and it's wrapped into an a,tag to make the whole thing clickable,and this a tag is wrapped into a list,item,so all these thumbnails are basically an,unordered list of thumbnail items if,this confuses you you might want to,watch my video on HTML this will make,things very clear but actually I was,interested in finding out the CSS,classes of one of these list items and,if you don't know what if CSS classes I,also have a video on CSS so I think,we're getting to a point where this,channel starts to make some sense,overall and for now we could pick the,one that's called product - single,underscore underscore thumbnails item,and we would copy this to our clipboard,and as we jump back to our theme files,we can now search for this CSS class and,right here we have the list item let me,zoom in a little bit so you can read,this better and the list item is right,here it contains the a tag to make it,clickable and further inside we have the,image tag for the actual thumbnail and,you could see that this is rendered in a,for loop so we do this for every image,in the product images which makes sense,and yeah that's basically how this works,now we need to find a way to identify,what color a certain list item belongs,to and this is exactly where the image,alternative text comes into play that we,previously defined in the product editor,so we will add a data attribute to that,list item and maybe we could call it,data,- thumbnail column,and the value should be equal to the,image alternative text,and this is some liquid code and we have,access to this image object because we,are looping over every image in the,product images and in very modern or the,most recent version of W you might see,this in a slight different way there is,a for loop that loops over every media,object in the product media and then you,would altimeter assist to media but,alternative text for better,understanding let me quickly show you,what the output looks like on the front,end right now and after a quick refresh,we could inspect the thumbnail list,again and now you would see that every,list item has a data attribute that is,called thumbnail - color and it contains,the color that this list item belongs to,and the cool thing is that we are not,only able to tell what color a certain,thumbnail belongs to but we could also,select these list items by their data,attribute and let me quickly demonstrate,that in the JavaScript tab for example,we could select all the elements that,have our custom data attribute,regardless of the value and this would,return all the twelve thumbnail items or,I could narrow this down even further,and say the data attribute should be,equal to let's say blue and then this,would return only four of the list items,and we will make use of that very soon,in the next step of our journey we will,now start to write the logic to actually,filter the thumbnails and mainly we will,work in the theme je s which contains,most of the JavaScript for your theme,and you can find it in the assets folder,and before working in here it might be,good idea to duplicate your theme just,in case anything breaks not that this,has ever happened to me but it's always,good to have a backup in place,in this file I will now search for the,keyword variance because this will bring,up any code related to the variant,change events and here we have Slater,variance but what I'm actually looking,for is a function that is called on,select change you could also directly,search for that and in my video on,implementing these color swatches I,explain this function very much in,detail but for now in a nutshell we,could say that this gets executed,whenever the user changes one of the,product options and then the variant is,retrieved from the options and based on,that new variant the page content so the,images the price and whatnot is updated,and we will follow the exact same,pattern so we will implement the method,that updates the thumbnails based on the,given variant so if we scroll down a,little bit we will find the actual,implementation of these methods because,here they are only executed and you can,see here we have the update images,function the update price function and I,think it's a good idea to add our,function right on top,we could name our new function,underscore let's say filter thumbnails,just to stay coherent with the naming,convention and : and this should be a,function that takes the variant as a,parameter and we have curly braces and a,comma at the end and in here we can now,define all the code that makes up the,function but in order to make things,easier for you to understand,I will now just add a console dot log,statement and I will log a text that,says thumbnail updated and I will also,lock the very end let us pass to that,method so that you can get a very good,understanding of what this object looks,like and by now we only implemented the,functionality but we never use it,anywhere so I will copy the name of our,new function and then scroll back up to,the part where all the updating is done,and maybe in between the image updating,and the price updating we can call our,new function this dot underscore filter,thumbnails and we will pass the very end,that just has been selected,and then we can save this and after,another quick refresh on the front end,you would now see that whatever I change,one of the product options our new,function gets called and we lock,thumbnail updated to the concert for now,this is just a text and we also lock the,variant that was associated with that,change and inside of that object we have,a ton of information on that variant so,for instance we have access to the,variant ID the variant title the price,the compare price but maybe most,important we get some information on the,featured image and that's also why it,was important that we assign the,featured image to any of our variants,and in here we can see the alternative,text that says blue so we now so we now,know that we have a blue variant,selected all right so now the time has,come that we can actually implement our,new function and we no longer need this,debug statement so let's remove it and,the first thing I want to check is if,the variant featured image is available,at all so I'll write if the variant,dubbed featured image is not now and I,also want to make sure that the,alternative text is available so end the,very end dot featured image,turn ative text shouldn't be naive Oh,want to show all the thumbnails for the,selected color but for now I would just,add a comment so some needs for selected,color,and otherwise so if we can't uniquely,identify what color has been selected,else we just want to show all the,thumbnails,all comics and now we have to implement,the logic for this and then the filter,method should work okay so let's start,with the lower half of the function and,in order to show all the thumbnails we,first need to select them all but we,know that every list item in that,thumbnail list has the data attribute,data,- thumbnail - color because we,previously defined that in the product,template so we can select all these,elements by their data attribute later -,thumbnail - color,and then I want to show all these items,easy as that,will now work in a similar way but we,need to be a little bit more specific,because we only want to show the,thumbnail items that match to the,selected color so the selector could,look something like data thumbnail color,equals to red and the color value has to,be pulled dynamic,so we will create a new variable and,call it selected color and we get the,value from the variant featured image,alternative text,and with a dynamic color value we can,now build our dynamic thumbnail selector,so let's call it thumbnail select on,and this should be equal to this one,right here I will put it in single,quotes but now I want to replace this,hard-coded color value with our selected,color variable so I will break the,string right here,and at our new variable in between,dynamic thumbnail selector I can now,select all the thumbnail images that,match to the selected color,and show them sure and now we are almost,finished because we have a function in,place that can make the selected,thumbnails visible but actually we never,hide any of these and I think the,easiest way is just to copy this,statement down below and we will edit to,the top of our function and then just,hide all of the thumbnails so when this,function is executed all the thumbnails,will be hidden and in a fraction of a,second the selected ones should be,visible so let's test it on the front,end,and after another page refresh you can,now see that all the thumbnails are,visible and only once I start to select,a different color they will get filtered,and when I select the black color which,has no featured image assigned to it,then all the thumbnails become visible,again and the only thing I would adjust,right now is that they get filtered on a,initial page load so let's hop back to,the theme files,and actually this is fairly easy to,implement I would just grab our function,call from the ball and I will bring it,to the initialization of that page so we,scroll up a little bit further,and I think it's right here where they,say Slater barians and they initialize,the container the product and here they,grab the current variant and down below,we can call our self-made filter,function and we will pass this dot,current variant instead of the selected,variant and when I save this again,you should now see that these thumbnails,should get filtered on page load so,let's give it a try,and this seems to work fine perfect and,with that we have another project,finished I really hope you found some,value in the video and maybe you'll,learn something new I'm always open to,any questions and feedback down in the,comment section and if you haven't,already you can subscribe to the channel,so you don't miss out on future content,and then I really hope to see you in the,next video bye

Congratulation! You bave finally finished reading shopify how to map multiple images to 1 variant and believe you bave enougb understending shopify how to map multiple images to 1 variant

Come on and read the rest of the article!