how to fetch image of selected variant with jquery + shopify

hi guys welcome back to websensepro youtube  channel I'm your host Bilal Naseer and in today's  ,tutorial we will show how to show only specific  variant images when you have multiple variants  ,so this is my product page and as you can see that  I have four variants and each variant have two to  ,three images attached to it in default shopify  page when we select a variant it doesn't change  ,or show the specific variant image it shows all  the media library which is in the product it does  ,not show only those specific variant images after  implementing this tutorial you will be you will be  ,able to show only specific variant images so this  is the product page now when you click on black  ,as you can see it's only showing you the  black variant images picture and when you  ,select any different color it will change the  picture to show only specific variant images  ,so without further ado  let's get back into the code,so guys before we proceed i would like to tell  you that this tutorial is specifically for dawn  ,theme so if you're using any other theme it won't  work i previously created a tutorial for debut  ,you'll find the link in the description below  so this is the tutorial which i'll be following  ,i'll put the link in the description  so you guys can easily copy the code  ,and follow through so let's go to the first step  i'll go to the backend of the shopify and add in  ,the below code in our theme.liquid  file so let's go to the backend,so here's our shopify backend  i'll click on online store,and then from there i'll click  on actions and click on edit  ,code before editing the code  make sure to duplicate your theme  ,so if you break anything you can easily  revert it back okay now click on edit code,and from there i'll click on team load liquid file,and in team dot liquid file below the  head tag i'll add my jquery skipped  ,script which i have it here so i'll  just copy it and paste it here it says,cool now let's go to the second step in our second  step we'll find main dash product or liquid file  ,and add this code as shown in the  file so we'll add this code on line  ,number 69 as shown on the screen chart  let's go to our product or liquid file,here we have our main dash product rejected file,and now we'll go to line number 69.,so that's the line number  where we will add our code,which is an extra attribute thumbnail color  ,is equal to media alt so i'm  gonna copy and paste this code  ,make sure to fix your inverted commas because when  you copy the chord it shows the weird inverted  ,comma that doesn't show the actual inverted  comma so i just updated that and now it's safe,and after saving your main product or liquid  file go to your product page and hit refresh,now all of the images should show their  alt text as an extra alt attribute as  ,an extra attribute sorry so click on  inspect and check out all of the images,that if they are showing their alt text as you can  see we have here thumbnail color is equal to black  ,now check out the white one,here we have our thumbnail color showing up this  is an important part of the tutorial because if  ,it's not showing up properly then your javascript  code which we'll be implementing on our last step  ,won't work properly now let's go to our  second step let's go to our third step  ,in this step we'll add all text so i already  added the alt text in all of the images  ,in order to add the alt text click on products,and i'll go to that specific product  where i want this functionality,now from the product backend click on each every  single product image and add in the alt text,i have the option edit all text you will see add  alt text option here and you will have to add all  ,text as per the color of the image so  all the red ones should have red vortex,black one should have black,and the white one should have  white after updating the alt images  ,click on inspect and check all of  the images to make sure you have  ,attribute showing up their color as i have it  here showing up so that's the li of this product  ,image and as you can see it's showing the fault  attribute okay now we are done with our third step,now in fourth step we'll search for global.js  file so go back to our edit code section,so here's the global.js file,and in global.js file search for  line number 754 and add in this code  ,so i'm going to copy this code,go to our line number 754,so just below the update url or update media,let's add in your function name,hit save,and after that on line  number 774 add in this chord,so that's where i'll place the,chord copy it and paste it  here after pasting the code,hit save,and now it's our time to test our  code if it's working properly or not  ,so i'll go to the product front end hit refresh,and now if we click on any of the variant  ,we can see that our product page is showing  only the selected variant images it's not  ,showing all of the product media it  shows only the selected variant images,cool right i hope you guys like the  tutorial don't forget to subscribe  ,the channel comment on the video below and  let me know what would you like to learn in  ,shopify i'll try my best to create more  tutorials for you guys have a great day

Congratulation! You bave finally finished reading how to fetch image of selected variant with jquery + shopify and believe you bave enougb understending how to fetch image of selected variant with jquery + shopify

Come on and read the rest of the article!