shopify show variants on collection page

hi and thanks for watching so what I'm,kind of going through here is how to try,to follow of these tutorials to show off,the colors of a products as separate on,a collection page on Shopify this has,been very highly commented on on my blog,so I figured I'd make a video to show,people how it works so the initial thing,you're going to do and is I'm gonna copy,everything above insert for loop so,let's take this and I'm gonna go in so,this is you're gonna look for your for,your the for loop of your products so in,this in this theme there's almost every,theme there's always a collection,template so what I'm going to do is I'm,gonna take this for loop of the question,and I'm gonna modify it and I'm going to,add everything from here above the,product because you can see so this is a,for loop of products I'm just going to,delete the else statement because I know,that's gonna throw me off because all,that does is tell it what to do if,there's no products in there and then,here you can see include include product,guard and that is what shows on the page,so you have everything organized here so,unless colas contains color and now I'm,gonna go in and I'm going to take cat,I'm gonna capture everything below this,I'm gonna ignore the last for loop,because it's already there and I'm going,to paste it so let me start by saving,this and I'm gonna go left here and it's,working is accordingly so now one,product you can see for variants but,obviously no other products are showing,so what I'm gonna do is I'm gonna write,everything after here I'm gonna add an,else statement I'm going to copy my,product card grid and I put this here,and I'm gonna say okay here I include,this in another one of my guides so it,could is the top if product up variant,size is greater than one I don't put,that right here so what you're saying is,if there's more than one variant do the,color sorting if there's not then just,show the regular one that's not working,so let me take a look and see what,because I didn't close this alright just,gonna take a look and all the products,are here and the ones showing its,variance this is exactly what we want so,now this is the product card grid we,don't want to touch this but we need to,modify it so what I've done is I've made,a new one called product card grid,variant so I'm saving this,so what I've done here is I've gone in,and I've found everything that's related,to the product so this includes the,image so starting with the image so,assign this are the preview image I,removed everything that was here and,it's now varying image here I'm just,going to go through start all over so,let's copy the credit card grid paste it,in,so preview image instead of product dot,featured media preview I'm interests,ignore that and change it to variant,image and that should update the very,image everywhere on the site or on this,product because it calls it right there,as preview image now continue down,perfect perfect,and then here's the product title so,what I'm gonna do is I'm gonna add,variant title so then if I save that and,now I see a unicorn blue black orange,and pink and you can see the images for,these two which is different is under,here's the variants here's the separate,images and the names next you make sure,that we're showing the variant price,instead of the product price now this is,all on the debut theme this will be,different on every theme but you can see,the prices showing or different some of,their own sales some of them aren't,this lets you kind of not show that,every variance on sale if they are at,all on sale so just like that you can,now see the product or every variant of,every product that has variants showing,separately for color variants they won't,this moment do the same for size so you,don't have to worry about extra ones but,that can easily be modified if you,really want to auction is color you,could change,um if you're in Canada I can do the,color that's a very easy change anything,there can be changed and also this four,loop index is zero if you happen to have,two options size and color,if colors second then you'd want to,change that to one if it's the first one,it's zero so that's saved and that's,exactly how you organize it so thank you,very much if you have any questions,please comment and I'm happy to help,thank you

Congratulation! You bave finally finished reading shopify show variants on collection page and believe you bave enougb understending shopify show variants on collection page

Come on and read the rest of the article!