in this video we're adding swatches to our collection page this customization is compatible with version 15 of Dawn and the other free Shopify themes like refresh sense origin and others and we actually uploaded a version of collection swatches not too long ago about 2 weeks ago but that was compatible with version 14 of Dawn and the other free Shopify themes but the next day after we uploaded it Shopify came out with Dawn version 15 uh and that also included some changes so we had to make some adaptations to it here it is now you might already want collection swatches on your collection page so you already know why you want this but if you're on the fence or you're not sure why you want to add it to your store well what this does is it can help your customers browse your products without actually going into the product page so it just removes a couple of clicks of extra friction for customers to see your product which could in turn lead to more sales by increasing the conversion rate so let's say for example your conversion rate is 3% % so that three out of every hundred visitors that come to your store buy something and if you just get one more person out of that 100 to buy then you're up to 4% but that's actually a 33% boost on your conversion rate so that's 33% more sales so sometimes these small changes can actually have a really big impact I also wanted to thank all of you for watching these tutorials especially those of you that have subscribed it really means a lot to us uh if you haven't subscribed what are you waiting for we have have lots of free tutorials on this channel that help upgrade your store so you can sell more stuff online and if you can't find what you're looking for on our Channel or on our website and you want to hire us for some personalized help then head over to the prompt. co/ hire us and book a call with us I'll add the links to everything in the description below all right let's add swatches to our collection page okay so let's first do a quick tour of the customization and the settings and features available uh and then we'll get into the custom Iz ation now we're going to go through all the steps in this tutorial for anyone who's here for the first time uh if you're coming from a previous version or you've added this before and you've are familiar with some of these features I would still go through all of this just as a refresher or maybe you're coming from an older version and uh you want to see what's new or what's been changed in this version but I will go a little bit faster just because this is a very similar video to our version 14 compatible uh swatches uh it's just that we've changed the code a little bit to make it compatible for version 15 so here it is okay so we're on our demo store here you can see we have our swatches in the product cards and if we just click on one of these images then you can see here that it changes the color now if we go into our quick ad we can also pop up the uh the quick ad window and we can actually see that when we have our uh our selection here let's say it's red it will automatically choose the red image here likewise if we go into the product page it'll just come to the selected variant uh in here as well and so that's it in a nutshell you'll also see it in other parts of the of the store so let's say in this case you have these product recommendations or product are being shown here if you go to the homepage then the product cards here will also have the swatches and they will work uh and finally if you go to the search results then you're going to see that it also works on the search results so we have the product cards showing up on the collection page the product page the homepage search results and the swatches are going to work in each one of these cases so if you like what you're seeing here then let's look at how to add this to your store we'll take you through it step by step okay so we're in our themes area of our Shopify admin and we're going to work on this theme right here and so what this is is Dawn version 15 with the product page swatches already added into this uh this theme and so if you haven't already follow our product page swatches tutorial because it's actually a prerequisite for this video link is in the description the reason why we want to do that tutorial first is because there's some foundational setup on how the uh swatches are defined that we're also going to leverage in this tutorial for the collection swatches this way we have one place where we can Define the images or the hex codes of our swatches that can apply across our website for the product page or the collection page swatches okay so I'm assuming you're done now whether you are coming back from that video just finished adding it in or you've already done it and you waiting for this video well let's let's uh let's continue okay so um like I mentioned this is for Dawn version 15 our previous video on collection swatches was Dawn version 14 so uh make sure you're using the right version of this customization with the right theme um but assuming you're on Dawn version 15 or any of the other free themes uh also version 15 then what you can do is uh you can first duplicate your theme now I can't do this it's gray out because I'm actually at my store limit uh but if you aren't in that scenario uh then you can actually duplicate so duplicate first because if anything goes wrong you don't have to worry about how to revert back you just easily go back to the uh duplicated version um if you are at the limit just delete a theme you can download it first so you can save it and then you can remove it from your store if you don't need it uh so let's just quickly view our store and we can see here if we go to the collection page we don't have any swatches applied here so that hasn't been added in that's what we're going to do now so you've you've already uh duplicated your theme now you can edit code and so we're going to go through here and uh make some changes to some existing files we're going to create some new files so uh here we go actually one thing to do before we start here is let's actually go into the theme customization settings and we're going to head over to the collection page and we're going to verify a couple of settings first so if we go to the product grid there's this check boox here for show second image on Hover and we're going to want to un check that so this is good already um and if we go to our product page we're also going to want to make sure that we uncheck this box for second image on Hover so this one is checked let's uncheck that and saving and let's go to the homepage let's check this as [Music] well okay so we're going to uncheck that uh let's also make this uh all clothing okay we're going to save and then we're also going to check our search results okay unchecked there so this is what uh one of the first steps we wanted to do because um we're actually modifying how those images are showing on the product card so if we hover over it it just kind of makes it act a little bit funny so that's why we do want to turn that all off okay so now we can go back to our uh code editor and we're going to start off with the settings schema and here we're going to look for uh the word card we're going to come down to the settings here where we're going to see the card style settings um that's actually right here so product cards you can see style image padding um image padding here so so we're just going to come below this so you can kind of highlight this bracket here we're going to see where it ends right there and we can copy and paste and we're just going to save that next we're going to create a new snippet file so we'll go to the Snippets folder add a new snippet and we're going to call this card variant Swatch custom. liquid and we're going to copy Cy and paste our code into here and save now we're going to create a new asset so this is a new asset here create a blank file we're going to use JavaScript and we're going to call this card product variant selection custom.js and we're going to copy and paste our code into here and save and we're going to create a another asset file now and this is the component card variant Swatch custom and we're going to copy and paste that and [Music] save okay so what we've done here is we've created a few new files so the first one is going to uh control how the swatches are going to behave we're going to render this file in our uh collection Pages uh through the card uh the product card code next is some JavaScript to control what happens when we click those swatches and then third is a CSS file which is going to control the styling so that's the shapes um and the sizes of our swatches okay so now we're going to move on and we're going to edit some of the existing files so the first one is going to be the card product. liquid file and so this is what um defines the actual cards here so this is this is a card and it's going to Define what that looks like um and so we are going to modify it because we want to add our swatches in and so right up near the top we're going to uh beneath the CSS files here we're going to paste in our code next we're going to be looking for cardor uncore content and we're going to see it show up once here we're going to see it show up a second time here so just above the second instance we're going to create some space and we're going to paste our second code block here and then we're going to take these two lines so the card content and card information and we're going to actually add some uh additional classes and so we can actually just replace them with the code uh here by pasting it down and now we've added some additional classes which are going to just help it get styled a little bit better once we add swatches in um so we're just modifying how the how the uh the spacing between the the swatches that are coming in and this product title okay so let's let's save that and sorry there's actually one more thing we need to do on this file so let's come down to the bottom and there is uh this else statement followed by uh some liquid code liquid assign ratio one uh and so we're just going to come right above that else statement and we're going to paste in this uh this if statement with a span in there which is going to uh close the opened spam uh if we are activating our uh product card swatches okay so now we're done with this file okay so next we're going to the theme. liquid file and we're going to come here we're going to look for these uh JavaScript and we're going to come right below it and let's copy and paste our code into here and we'll save that and this just um calls the JavaScript files because the product cards actually show up on different parts of the store right your collection page your product page your search Pages um your homepage so we want to actually have this available on um different parts of our store which is why we'll do this on the uh the theme. liquid file which is um accessible by your entire store okay so finally we're going to do our search results and we're going to do our related products so uh just one small change in each of those files it's the same change so let's uh do that right now so on our search we're going to look for um this UL element with the class grid product- grid right so there's a UL element grid D product grid and we're going to add our um data ID in there so let's copy and paste that right there and save and then in related products do liquid we are also going to look for grid product- grid there it is and we will paste in our data ID and save all right so last change we're going to the global. JS file and we're going to look for the class um product recommendations and we're going to come to this load recommendations method and then in this if statement here with the recommendations we are going to paste this line right here okay and then we're going to save and we have one more method to add into here which is this one right there execute scripts right and so we're using this line to call here and we're going to make sure that it's um a method that's at the same level as these other methods here and so um just like before if you highlight one of these um curly brackets it's going to show you where it closes on the other end so we can save that okay and so what we've done here is we've just um added a little bit of script to handle how the product recommendations work um because they are a little bit different than the regular product cards um so we have to add this a little bit of JavaScript here so that we can get the uh swatches to behave properly okay so one last thing to do is we actually have a typo you can see here um this is supposed to say selection uh but we have an extra s in there and you can actually see in our theme. liquid file it says here it cannot find this file uh because we have this typo here so we need to correct that first so we can come here uh to our Uh custom file and then we can select and edit the file and now if we come back to the theme. liquid file that uh should be resolved let's let's refresh okay perfect so we can now find the correct JavaScript file and so now if we come back to our uh collection page and if we refresh nothing is actually going to happen and that's because we still need to enable the swatches in our theme editor so if we come to our theme editor you can actually go to the settings uh and then open up the product card swatches menus area uh if you don't see it here yet just refresh your page and it should show up because we added it in previously with our uh with our settings unor schema. Json code and so in here you have this checkbox enable product card swatches and you can see here once we save or even before we save that the swatches are showing up and so now if we come back to our collection page refresh you can see here we have our um our swatches and fully work they're clickable um and we can we can do a couple things to show that it works everywhere so let's turn on our quick ad let's refresh again okay so if we uh turn this to Green go to Quick ad we're going to show up on green the green page we go into the product we show up on the green variant uh we come down here we can see the swatches are working over here uh go to the homepage the swatches are going to work over here uh so essentially all the product cards are going to be working properly now there's a couple of settings in here that we can configure so the first one is this lazy load variant images so what this is doing is if you notice on your page that maybe when you click on the variant that it just takes a little bit longer to load up the page it's just maybe not as responsive what you could potentially do is you can turn on you can turn on the lazy load mirant images and what this will do is when the page loads it will actually load up all of the variant images in the background so that when you click on it it'll become immediately available when it's off what it does is it uh only retrieves the image once you click on the variant so it's it's faster to load uh initially but then it uh it will call the extra images as needed so sometimes the responsiveness might be a little bit lower whereas if you lazy load all of them it might be a little bit slower to load the page at first but then once you click it it will be more responsive so there's kind of Pros on cons on both sides um if you have a really large product catalog with lots of variants probably not best to Lazy load because now you're loading tons of images in the background um but if you have a smaller catalog then it might actually be uh handy to Lazy load them so test that on your own store you you're going to have to test out to see which one performs better um but the options there for you you to to try it out uh next is the color variant uh option name so we have set this to color by default if you have different variant names you can change it to something else so for example if we change this to material we can see here that uh um only one of these uh products have the material uh variant option but if they all had it then they would show up as material in here as well so um if you got stuff F material anything else you just have to match it to your products variant option so um if we come back out to the admin go to our products and then go into our product that's this variant option name right here color uh but if you have material here instead then uh you can just type that into here uh it just has to match exactly and then we'll pull the proper variant option that you want to use uh next we have here a uh variant Swatch map meta object uh I will come back to that so let's skip that for now uh next we have the shape so let's bring this back to color and we can change the Swatch shape so we've got Circle right now we can change that to square and we can also adjust the size so bigger smaller it's completely up to you on how you want to do that okay let's come back to Circle okay so let's just save that for now now we have this variant Swatch mapping met object uh if you've made it this far in this video this is already probably familiar to you uh because you have used this meta object in the product page swatches uh but just as a quick recap let's look at this again so uh we're going to come to our uh meta objects area and we're going to uh open up our variant Swatch map and we can see here that there's uh an entry variant Swatch mapping and then in here there is a Json so this Json will Define the uh the variant option and the values whether we use uh just the default variant image so we haven't defined anything in here we leave it blank so you can see that here with the green shirt is the variant image or we might use a hex code right so for black and red we're using a solid hex code you can see that right there black and red so that's why they all look a little bit different and that's how it's defined uh but we also have this other feature here so if if we come back to our products and go to the original t-shirt you can see here if we scroll down to the bottom we have this variant watchat map override option and if in here you can actually select one of the meta object entries that we created and so you can see here the prompted text sweatpants actually has a different set of colors right so the black is actually an image of a flower blue is a solid image instead of the the flower here green is this other image right so you have uh a different set of swatches for this product and so you can actually override the default variant images by setting your override and so what we're going to do is we're going to uh go to the prompted text sweat pants and we can scroll down here and we can see that we actually assigned the override value original sweatpants into our meta field which is going to uh which is actually defined by this Json code right here right and so we have a different set of uh it's going to have the same structure but we Define the image to be this uh sorry the green variant to be this image we're defining blue to be a X code right so that's why it looks a little bit different because we have a different Json uh set for this product here okay so you should now have added swatches to your collection page your featured collections your recommended products and search results this should work with the quick ad features and you have a number of settings to change the shape and size of the swatches and you have full control over how you defined what is in the swatches whether it is across all products or you can override individual products with different swatches as well let me know in the comments below if you found this tutorial helpful uh we tried to pack as many features in here for you so that you can control it the way you want uh and we worked really hard on this uh so it would really uh mean a lot to us if you could subscribe and like this video uh and also if you want to hire us for any personalized help uh you can book a call with us at the prompt. co/ hirus thanks again for watching and I'll see you in the next one