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 display only a specific variant option + shopify and believe you bave enougb understending how to display only a specific variant option + shopify
Come on and read the rest of the article!