show text over image base on product name shopify

hi guys welcome back to another Shopify tutorial  I'm your host Bilal Naseer with another tutorial  ,video and in today's video we are learning how to  customize the Shopify Taste theme product page so  ,in this Shopify taste team when we have lots  of featured uh images a lot of variant images  ,when we have multiple variant images the issue  is that it shows up all the images at once and  ,it does not filter out when you click on  the specific variant so after implementing  ,this tutorial your product page will look like  this so after clicking on any of the variants  ,it will only show that specific variant image so  that's what we are learning in this tutorial if  ,you are interested to learn stick to the end  of the video do not forget to like the video  ,subscribe my channel and comment on the  video below let's jump into the tutorial,so, guys, that's how the original taste theme  product page looks like so when we refresh  ,as you can see we have all of the images showing  up, and when we click on any of the variants  ,it just sorts the image and shows up the one  on the main featured image but it doesn't hide  ,the other color which we have shown up so  the pages kind of look messy and show all  ,of the images after implementing this tutorial  you'll be able to see specific variant images  ,okay now let's go to the back end and add  in a new product so I can show you guys  ,let's go to the backend by  navigating to slash admin,and then click on products,and then add product,we will be adding our product  by the name of a new t-shirt,and add in images so I already  have downloaded some of the images  ,where we have black images three images for black  three images for white and three images for red,okay so the images are being  uploaded let's add in the pricing,scroll down so this is the option which we  need to check mark to add in the variations  ,so we will add the color variations  we have black white and red,co we have added our options okay after  adding them click on done here and our  ,variations have been added now after  up after the images are being uploaded  ,you need to add in the alt tags for each of  the images so click on every single image,and once you click on that image add in the  alt text for example this image for the black  ,variation so just add in black hit save alt  text and do the same for all of the images,make sure you don't do any spelling mistakes  otherwise, our process won't work and you won't  ,be able to see the image sorting up properly  so I'm adding all the alt text for the images,okay red save make sure to hit  save alt text after adding those,okay last three images left white,white,white and,we have the last one left white,okay our all images have been updated now  take a look at the product how it looks like  ,make the product active it's safe,okay so that's how our products look like and,okay as you can see,selecting variants is not changing the  product images so what we're gonna do we'll  ,add some chord to make it happen and also  we'll have to add in the quantity as well  ,because it's still say sold out so add in the  quantity for all of the variations it's safe,let's go back and see,okay perfect okay now first we  will click on the online store  ,as we'll need to add some liquid chord  and some gs code to make this happen  ,now after you go into themes click on actions  and then edit chord and before editing your port  ,make sure you duplicate your theme and have a  backup of it so in case you mess up something you  ,can easily revert it back cool click on added code  so we are doing this on taste theme version 2.0.0  ,and we will find the file main dash product  dot liquid main dash product dot liquid,and in this file, we will search line number,67 and hereafter ally we will add our  additional attribute thumbnail color is equal to,and that's our dynamic court  which will show up the part  ,of that specific image and after line  number 67 add in the same chord in line  ,number just copy the chord and add the  same chord in nine number one one six,and then after pasting that in lines number one  one six do the same for lines number one five five,cool and now it's safe,and once saving this file go back  to your product and hit refresh,and check out that your product attribute image  product attribute which we added is displaying  ,properly so now when we click on  this image inspect element this image  ,we can see that the ally is showing  the thumbnail color of this image  ,and there's additional space in here let's see  if we did some mistake in our code looks like we  ,okay so here's an additional space  we don't need additional space here,and related the cord which I am adding don't  worry about that I'll add the link uh to a  ,blog post in the description where you will find  all of the chords and make sure you check this  ,step really carefully because that's the first  step and that's the most important one whenever  ,you add thumbnail color and this chord it should  be line number 67 116 and 115 in taste theme  ,make sure that this tutorial will not work in any  other theme it will only work in tasty I have also  ,created a separate tutorial for dawn theme if  you're looking to get if you're looking to learn  ,how to implement this in dawn theme click out the  link and you will get it okay now hit save again  ,and go back hit refresh okay sorry this was a  product we'll close this one hit refresh here,and now when I click inspect  ,as you can see we have an ally thumbnail color is  equal to black and now check out for the red one,okay as you can see it's displaying the  alt of that image so this value is being  ,pulled from the alt which we added when we  were adding our product make sure to do not  ,do any spelling mistakes or do not add any  uh extra space or capitalize the letters etc  ,cool now go back to our theme editor section  and find out the js file and search for js,and here you will find the global.js file,okay in global.js go to line number 764,764 and add in this start filter media  that's the function which we'll be creating  ,in our js file and after that add in the  code okay so that's the code which we'll  ,be adding again don't worry about the code  I'll put the link in the description for  ,a blog post where you find where you will  find all the codes okay now click on save,and now let's go back to our product hit refresh,and there's our product and now when we  click on any of the variants okay it's  ,something isn't right,so guys let's go to the back end of this  product and see if we missed anything  ,so I'm gonna open the back end of this product,so that's our product new  t-shirt and click on that,okay so it looks like we're missing  the featured image of each variant  ,so in this case click on edit here,and add in the image choose the image  of the variant so it's the black one  ,and then similarly do it for  the white okay let's save,white,and then red,cool now the featured image  of each variant is selected  ,now let's go back to our product and hit refresh,and now select white and there we go  ,now our product is only displaying  the selected variant images,looks good right cool uh so guys that's it  for the tutorial I hope you guys liked it  ,if you guys have an issue implementing  the code or anything like that please  ,uh comment and put in some details about the issue  you're having uh until next video have a great day

Congratulation! You bave finally finished reading show text over image base on product name shopify and believe you bave enougb understending show text over image base on product name shopify

Come on and read the rest of the article!