shopify show color swatches on collection page

Hi guys welcome back to WebSensePro with another  Shopify how-to video I am your host Bilal Naseer  ,and today we will be learning how to add swatches  to your collection page so after implementing  ,this tutorial you will have color swatches  showing up on your collection page like this,but before following this tutorial make sure  to watch the first video which is about how  ,to add color swatches to your product page I'll  put the link in the description that's the blog  ,post where you can find the video and all of  the instructions and code on how to implement  ,color swatches to your product page. You won't  be able to add swatches to your collection page  ,until you follow this tutorial so that's part  two of the swatches first we add it on the  ,product page now we'll add it to the collection  page and before proceeding further make sure  ,to subscribe the channel comment in the video  below if you like it and let's get into the code,so guys that's how the default collection page  looks like without color swatches so that's my  ,collection page and if I go to any of my product  for example this one where I already have colors  ,you can see that it's showing up color  swatching meaning I have already added  ,all of the codes which I showed you guys  in the previous video that's the link  ,for the previous tutorial which I created on  how to add color swatches to your product page  ,make sure to follow this first then you will  be able to add the collection on your swatches  ,page if you don't follow this one this tutorial  won't work for you okay now let's start adding  ,swatches to our collection page I'm going  to go to the back end of my Shopify store,and that's the back end of my Shopify  store I'll click on online store,and from there I'll go to actions  ,in an edit code to edit the code before editing  the code I suggest you guys duplicate your team  ,have a backup of all of your theme code so in case  you mess up anything you can easily revert it back  ,okay now I'm gonna go to my code editor that's the  code editor in here we will search for cart Dash  ,product dot liquid card Dash product dot liquid  file and in this file we will search for this code,again don't worry about the code I'll add the  blog post in YouTube video description where  ,you will find all of the codes below this line  of code I'll add new code which is also provided  ,do you guys in the blog post okay I'm gonna  copy that code and paste it here now click save,after saving this file search for base dot CSS,in base dot CSS scroll down to the bottom and  add this usage score provided in the blog post  ,that's the code just copy the  code and paste it click save again,and after saving this file go to  your collection page and hit refresh,and here we go our collection page our  collection swatches are showing up now  ,so as you can see this product have three  colors watching showing up here which is  ,also showing up on the collection page so  it that's it for the tutorial guys it was  ,a short video for you guys on how to add  color swatches to your collection Pages if  ,you like the tutorial and if you like this  channel content make sure to subscribe this  ,Channel or comment on the video below like  and share until next video have a great day

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

Come on and read the rest of the article!