show variants as separate products on collection page shopify for theme fashionopolism

hi everyone my name is michael yawasa,i'm the founder of antarctic we are a,digital agency based in new york city uh,on the call i have our technical,director brawny uh from antarctic and,today we're going to be walking through,how to show,multiple color variants of a single,product,on a shopify collection page,and i'm just going to give a quick,example of what i mean here,so this is a apparel brand called cdlp,and you can see that they have a black,white,blue and olive,variants of the same product on the,collection page,and then when you click into any of,these single products,single colored products you can see on,the product detail page that they have,the different color variants,so there's a couple different ways to do,this in shopify but i'll hand it over to,brony to walk us through how to do that,uh hi everyone i am bernie nadarchan uh,i'm the technical director antarctic,um so,as michael said we are going to uh see,about a split variant for a product,so,uh for example i have uh this product,this juice trousers new,and uh we have like,three separate tiles for this product,but once you go in,then uh,we just show the one that that the user,clicked and,the user can't change the variance here,so this is what we are we are taking as,an example,and uh we are going to uh show code as,well so this this is mostly aimed at,giving you an idea to,to develop,a functionality like this by yourself,um,we have,included a lot more other functionality,into our code so,we'll just show the code so you will,understand it and then you can go and,try by,yourself,so um,let's start with this so,the first challenge like when we started,with this the first challenge that we,had was to,like how do we,add multiple images per variant because,shopify just has,an option to add only uh one variant one,um,image per variant so if you see here,right in shopify you have this variance,here for this product,and,you can just add only one uh,one image per variant so which will not,suit for us so what we did was we,actually uh explored,like a few options and we we settle with,this option where you can tag an image,based on color so let's say,uh if if this one is red just go and uh,set the alt text to red,so the same way uh we did for every,images so for this product we have a few,images which are like red green and blue,so if it's green then we show the screen,and if it's blue it's blue so this way,we have categorized the,images,so once this is done we are all set from,the,backend part that's all you have to do,from a backend perspective but then,there is a lot more from a code,perspective uh first thing is uh we have,to make sure that,when we,uh when we display this product as part,of the collection,this product has to show,uh as three separate types of products,okay so um for that,i'm going to open my va store so this is,our code,so uh,i'm into the into the collection,template which is the standard one for,all uh collections,so we just basically uh,get the products from a connection here,and then uh we are looking through the,uh products all products one by one so,once we come to the product that that we,are interested in okay so what we do is,we basically set the color index to zero,so this is just uh,a way to uh,uh indicate uh what color number we are,in for a particular product whether it's,the first color or second or third so to,start with we are at zero,and then for that product we we go and,get all the variance and we basically,loop through all the variants,so,we have to find out,the colors as part of the variance,because when you take a variant right,uh we usually have like colors and sizes,so if you see here right so variant is a,combination of color and size but all we,are interested here is to,to,to get the colors,so what we do is we we look through the,variance and we check if it's uh it's a,color,and then we get that,and,now,once we get the color okay,so uh we get the variant color here,and then,we have to check,because for for one color there may be,different sizes let's say,uh small and large medium,so,we have to make sure that we don't uh,show the tile,again for the same color for uh,for another size so what we do is we,check here if the variant color changes,if the variant class,stays the same let's say for,for blue uh,blue small and blue large,for both these variants the the size,changes but the color stays the same,so uh we check that actually so if the,color doesn't change we just show only,one time if if it changes then we we,move to the next showing the next step,so that's the check that we have done,here,and then once we we have done that and,once we have decided that yes we are,going to show the time,then,we go and find out or pull all the,images for that particular color,so here what we do we are doing is,uh first we assign the image cone for,the color 0,so let's take its red now so for red,right now it's zero now we we basically,look through the the product dot media,which has all the images not just for,red but everything so,inside that,for each image we check if the alt alt,name matches the variant color,so,if you remember we set the alt text for,the images as red blue and green so we,check whether,the images match the color that we want,if the images match then we basically,pick it okay so now here we we basically,get a count of all the,all the red color images that are,uploaded,so once we get the count then we have a,condition here we are checking if the,color index is one that means if it's,the first color,for the product then we show the tile or,if the image count is greater than,one that means if it's a second or third,color then the image count has to be,greater than one then we basically show,the time,so this is just the standard uh,um shopify,um snippet which basically displays that,title so we are including that here but,the entire logics uh resides within,within this one so once we do that then,we show the type then again it goes,goes to the next color whenever the,color changes here,so we basically change the,um,color here so once it changes here again,we show the next style again when it,changes it shows the next style and then,it again it loops through the,uh next product and it,it goes on,so this way you you basically uh,modify your your collection logic,to show different tiles for the same,product based on,what type of images you have uploaded,into your media for that product,so now we have we we have,completed the first part of it where we,showed all these three so now you see,like we have juice of this new right red,green and blue,and then after that we are showing,different products the other ones,so let's go into one,okay so when we go into one um,okay so,when we go into this one right,uh we see here uh,the the product image and then,uh we have options to uh,see uh all the images in in expanded,format,so,um,for this what we are doing is,uh we are using an open source uh,library called swiper,swiper.js so this is uh actually an open,source one and it it's mit licensed so,uh you can use it there are a lot of a,lot of different variations that they,are given a lot of variation that that,they have here for uh this one,so uh just use this one and what we have,done is we have used this wiper here in,in like two different ways one is there,is a,vertical swiper,which,which goes uh from top to bottom and,from what and uh and vice versa and then,there is this uh horizontal uh swiper,along where,uh,you can just swipe the images here so,this is there as well so,there are this like,two swipers that we have used and then,we have this uh this watch here this,color swatch where we,we basically have,these,three colors,for that one,so let's go and see how we are uh,we are coding for this,um,for this we we are using the product,template in shopify,and in product template uh,i'll just show you what we have done the,concept here is,is to,first uh you set the,um,the swipers for these two and achieve,this functionality,so once this is done right,then um,one second,okay so once this is done uh what we are,doing here is,we are basically uh,again like looping through all options,uh in a product,and then uh we are checking if the,option name is color,because as i said right earlier,your option can be color or size so we,are just checking if the option is color,and then for each color we are basically,uh having,three uh placeholders,uh so this is the data tab so tab and,then here we open the color value here,so it it can be tab red tab icon red,tab iphone green and tab iphone blue,then on click we are,we are calling a method called set,variant images,which which changes uh,the,the images based on what uh what swatch,was selected or what color was selected,so once you said this right,so,um,now,this basically is to achieve,this code is to achieve this one these,three so once you get these three now on,click what happens is,on click of red i have to hide the,like hide the blue or green and and then,show the red the same thing happens on,on flick of blue so,what we have done is we have,we already have um,like created all the,all the um,swipers,for the three colors but we have just,hidden uh,the two and we are showing one,now on click of any color here,uh we are calling a javascript method,so,that basically,hides the rest of the two and shows,someone so this code basically does that,so it basically like removes remove,class and active tab so it just removes,the active tab and then,it sets the active tab as the current,one,so,this,this basically uh,hides the,the,the previous one and then,activates the new one so that way uh we,the user gets,to see that,the images for the color that they,selected because we have also like use,some animations uh,like some like subtle animation so that,the transformation is looks good so this,is one thing another thing that we have,we have to do is to,basically call the set variant images,method as i as i showed you here there,is on on click we call the set variant,images,and the set variant images method,uh it just initializes the swiper so,let's say if if we are,selecting the red color then it has to,initialize the swiper for the red,so for the selected color it just,initializes it so we like as i said like,we have like two swipers one one for the,thumbs on the left hand side and one for,the,the main one for the larger image so we,have these two swipers which we are,initializing,and then once this is initialized,then it just,works,so i just summarize um,what i told you um,all we have to do is uh to first set,your or like categorize your images,um,so set,set alt text for all the images,and once you're done with this,then you make sure you have the,the variance set so this is normal,functionality which you have already,done,so you see here we have red green and,blue variants for this product,so once you are done with this then,you go to your collections,and then,in your collection template you just,make sure,you actually identify the number of,images that you have for each color and,based on that you show the product for,that you have to,um,use your collection template,and once that is done,you go to your product template and then,you you have like like three deals or,like three tabs,and just show one and hide the rest,and then uh inside each tab use the,swiper js to,to achieve the the swipe functionality,so with this i think you should be able,to achieve uh um,this split product variant,and i hope this session was useful thank,you,all right thanks ronnie um if anyone has,any questions or comments feel free to,leave them in the comment section below,the video and we'll try to get back to,you,uh and one other note is we're using the,debut theme which i think i forgot to,mention at the beginning so,all right thank you again,thank you

Congratulation! You bave finally finished reading show variants as separate products on collection page shopify for theme fashionopolism and believe you bave enougb understending show variants as separate products on collection page shopify for theme fashionopolism

Come on and read the rest of the article!