shopify how to display photo collections page true aspect ratio

all right here we go,hi everyone my name is michael uwassa,i'm the,founder and creative director here at,antarctic we're an agency out of new,york city focused on helping e-commerce,brands grow and we specifically focus on,shopify,in this video we're going to,show a couple different ways within,shopify to be able to show,multiple color variants for your product,on the collection page,this isn't a feature that's native where,you can show the different colors of a,product,on the collection page in shopify so,we've come up with a couple different,ways to show that,uh on the call i have brony and monique,do you guys want to introduce yourselves,hi i'm barney natarajan i'm the,technical director at antarctic,i am marianne,antarctic technically,awesome,okay so i'm just going to share my,screen real quick just kind of show what,we're trying to achieve here,bear with me one second,okay so,this is a brand called cdlp and this is,their collection page,and you can see that they have a black,t-shirt a white t-shirt a navy t-shirt,an olive t-shirt,and then when you click into the,products,you see all the products,all the different color variants within,the product detail page,so again this isn't native in shopify,and it's a bit tricky so uh brony i'll,hand it over to you from here,thanks,okay so um,as michael said um,we are going to show you uh how we can,achieve split variance,so there are multiple ways on which you,can achieve uploading,many images per color on shopify shopify,by default does not allow you to add,multiple uh images per color,so let me show you uh how you can do it,so i'm i'm going to the shopify admin,page once again,ronnie i forgot to,mention we're using the debut theme,uh we've customized the debut theme in,uh shopify for this tutorial,okay,so,i'm going to products,so,for every product right so i'm going to,just,go for a product,okay so once you open any product you,have the the images that you can upload,the gallery and then you have your,variants so you have just one variant,here but for other products uh there may,be like multiple variants i'm going just,going to open one which has multiple,variants so i can explain you clearly,so,i'm just going to use this tools process,new,so if you see this right so you have,like multiple variants so one is,you have red small red medium red large,and then you have green small medium,block so you you just create variance,based on color and size,and then once this is done,this allows just one image to add per,variant but it's still okay so if you,want to show like,three images,for red you can you can use it so you,can just click on this,and then you can add a variant image to,it,so you you you can add one image to this,one so,i'm just going to see what so it's red,so i'm going to add red,one to it,so the same way you can add like two,more uh reds,are to it to the medium and large so,this way you'll be you'll be able to add,like three images on red and then again,another three but there is one one,limitation in this method that is,uh you can only add as many images per,color as there are variants if you have,five variants per,for color yes then you can add five,images,so that's a that's a limitation,now once you have these images right um,on your uh on your collection template,or on your product detail page you can,just look through the variants and you,can get the images for the videos using,this,this is one way,uh,i'm going to go to uh,way number two or the method number two,so method number two is,is about adding uh meta tags to a,variant so shopify uh by default,supports meta tags so you can go to,settings,i'm going to leave this page,so,once you go here,you can click on uh metaphase,so,on meta fields you can add a new meta,fields for for a variant or a product so,now i have i have added two uh,metaphase for variance if you want to,add more you can click on add definition,and add more so i already have like,image one and image two so,um i'll show you how to add a new one so,i'm just going to click on say,i'm going to name it image 3,and then,you should select the content type so,it's of type file,and then you can say only accept images,so that's it so once you're done you can,save it,so now if you see we have like,three meta fields for,on variance so that means you can add,three uh,images per variant so if you want to,have five you can just add more fields,here so that each variant you can add,five images so once this is done right,you can go to products,and if you go to any variant so let's,let's go to our tubes,the one which i showed you earlier,so,you have the variant here right you have,red red small red medium you can click,on any variant,and,once you are there,you can see um,just scroll down to the end,where you can see the metaphase so here,you can just,add images so for image one i can just,choose,choose whatever images i have,done,and same way i can choose image two and,three as well,so,this is a second way,but the the limitation here is,um,you have to define uh earlier how many,images you want to add for variant and,again you are just adding for one,variant in a color there may be like,multiple variants for a color like small,medium large you have to ignore,ignore the rest or you have to consider,images which are added in all variants,so you get a,compare list of all images for that,color so it's up to you how you uh you,manage it but this is another way of,dealing with it,i'm going to show,the third way of doing it,so that's by,using uh alt text on the images so i'm,just going to uh go to the product,just see if it can minimize this one,okay,so,um i'm going i'm just going to open a,product,so once you open the product you have,this media right where you add all the,gallery images for a product so,here you just upload,all the images that you want for all the,colors so you we have some images for,red some for green some for blue and,once this is done,you can just click on any image,so,click on this,and then here there is an option to add,our text alternate things,so here you can mention the color of the,the image,that is i have mentioned green here same,way you can,click on the,dots here and you can mention right here,so we just classify the images based on,this alt text,and the only thing that you should note,here is the name that you give here and,the name that is,given for color should match,if they don't match then you will not be,able to pull the images based on our,text,so once this is done now you have a like,set of all images let's say 10 images,three green three blue and four red now,uh when you're displaying a product in,your collections page right so or in,your detail page let's say now i'm in,blue so now whenever i select do all you,have to do is,look through the images for the product,get the alt text and check if it's blue,just add it to your collection now when,i when i do it for green it works that,way so it just goes solve the images for,green from the entire set and then,displace it so this is uh how we have,implemented it,on our,store,so um,we find like this this the simplest way,of doing it uh but you can just choose,whatever you uh,you feel uh simple or easy to do,brony can you walk through the coding,requirements for each of these so,um so we showed three methods we have,the variant image which you can add the,meta tags and the alt text,option,uh,you know for showing the,multiple color variants on the,collection page but there's still a,coding requirement for each of these,right,uh yes sure so,let's go through the coding requirements,uh one by one,and,there's like a like another um,page as well there's a collection page,that i will show you so,on the,on the collection page as well you have,to uh make some changes so that uh,let's say for for a product like let's,say juice trousers new,uh we have,red,green and black,so,uh the way we basically uh do this one,is,you basically have to,you basically look through all your,colors first,and then,once you reach at a color level then you,try to pick all the images for that,color,and then you also have to make sure you,look through all the products as well so,the order will be like look through all,the products one by one,on your collection template,then for each product,look through your variants,try to identify your unique colors,and then for each color,get the images from the gallery,or whatever way we i i showed you from,the from the three options that i showed,you and once you,like you have the images you basically,display it here,and then you also use the same to,display on the detail page,so now for the,three options that that i showed you,right,there are some,some uh level of code changes that are,required which any uh shopify developer,can do,so let's go to option one,so in option one that is you are setting,your,images on the variants right so,shopify basically has an option like,gives us an option to basically pick,this image,so what you have to do is,look through the product look through,all the variants in the product now,go one by one and for each variant there,is one image you have to pick that image,and then,add that to a list so that you have the,images for that color for that list,so,this is one way of doing it from,variance,if you are going to use the meta tags,right,for the variant,you look through the variant one by one,and for each variant,you will have like,three or five meta attacks or like meta,fields that you have defined so for each,meta field,uh,you have to uh,pick the image for that matter so get,the path of the meta field and like pick,the image for that meta field and then,add it to a list so that,you have all the images for that color,this is uh the,the second way that i showed,and if you are using alt text,then uh,you can,look through all the images for the,product,check the r value so you can just say,image dot alt and you will get it so you,get the alt value for for each image,check if it's it,gives the color that you want to and,then use that particular color,so these are the three ways that you can,use it and then um if you're going to,use a,functionality like,a plugin,to basically show your,your thumbnails and the,product image and when you click these,thumbnails it's image changes,you'll have to make some changes as well,here to accommodate like three colors,three or five colors whatever it is,so if,the plugin by,by default does not support this,functionality you may have to do this or,there is another way that you can do,where you can you can use a swiper and,then,you can just use a,zoom library so with just a swipe around,zoom library you can achieve this,this feature,for all the colors,awesome,uh,thanks brony for walking us through that,uh,i think,i think we covered everything right,yes michael okay great um so if anyone,has any questions feel free to email us,uh we'll put our email down in the,bottom of the,uh video here and um,and,we'll see everyone next time thank you,thanks everyone yeah thanks to everyone

Congratulation! You bave finally finished reading shopify how to display photo collections page true aspect ratio and believe you bave enougb understending shopify how to display photo collections page true aspect ratio

Come on and read the rest of the article!