Published on: January 31 2023 by pipiads
Table of Contents About shopify color
- Shopify Development: color swatches to product page (variant switch explained)
- How to add Shopify Color Swatches on product page 2022
- Collection Filters in Shopify 2.0 - Full Tutorial & Concepts
- What Is The Best Free Theme For Shopify? Colorblock Vs. Dawn
- How To Create Color Swatches for Product Variants in Shopify (Dawn Theme)
- [Color Swatches Shopify] - How To Add Color Swatches on Shopify Dawn Theme
Shopify Development: color swatches to product page (variant switch explained)
How to add Shopify Color Swatches on product page 2022
all right, welcome everyone again to resolution design on another video here, and in this video tutorial, we're going to tok about how to add color swatches in the collections and in the products beginners tutorial. let's get right to it first. as always, I want to remind you guys that if you really like content like this, please, please, please, subscribe, press that like button so that I could continue to make more contents like this. I make this content for you so that you could go ahead and build your store without having to rely on anyone. it means that you have time and you're gonna do this yourself. okay, this specific video is extremely intense in the sense of a long instructions, so I'm gonna be very, very slow in the process of explaining this. just have like some notepad or something next to you so we could get started right away. okay, alright, so let's get right to it. okay, so we are back again using the turbo theme and again, I cannot emphasize how important the turbo theme is because, unlike other themes, they don't have everything all together now. granted, you see this super big banner. maybe you might not like that, that's fine, but we're just gonna tok about this partikular instance, which happens to be the color swatches. again, turbo theme is on the description. it's a very good investment because it has everything that you need in order to make your store to look nice, and let's get right to it, okay. so let's pretend for a second that you went on a parallel, okay, and you went and you got a product that has multiple variations of a product. okay, it comes in different colors. so over here I'm gonna go to the back end and I'm gonna go to products, and my product already has been imported from Ober lo- I have another video if you don't know how to do that- but it has already been imported from a bear load into the store. I've already added it into a collection, okay, and it's already living on the front end of my store. it's just that it has all of this gibberish stuff. right, we're gonna get right to it. so let's click inside here of the product and, as we can see, right here we have these. we have these mugs- right, warm, stainless steel mugs, whatever, if I could speak today. and then we have these variation colors. you see that these are not really colors. so your suppliers like, yeah, whatever, they don't care, they just want to. you know, you just sell it right. and so in order to make this attractive, well, you need to make sense of this. you don't know what's what because they have different values, as you can see here, and they only gave you one picture. all right, so let's go ahead and fix this so that it looks really nice, all right? so the first thing that we're gonna do is let's first find this product and Aliexpress again, and what I'm gonna do is I'm going to go into a bur low. if you guys don't know how to do that, let me just back up. you go over here to where it says apps and then you click on where it says Ober low, okay, so I'm just gonna go back and just save my spot over here. I open- I like to open- a separate tab for things because I don't like to just go back and forth on things. so if you have a bare low up and running, make sure that it's on another tab. here is the product, right? so if here's the product, then right here, we have information of the product over here and let's go ahead and view supplier store. I'll click on that and that's going to take me to the dedicated page of this vendor, right? and we're gonna look for this product and there it is, right here. okay, let's go ahead and click on it. so a few things that I want to do. I already have this picture, but I don't have these other pictures, right? you're like, ah, what's up with those pictures, why, how come I didn't get it? it's okay, we could get them right now if you wanted to, but I like to do it the old-school fashioned way, right? so I am just going to take some screenshots of these images. by the way, if you're asking me, what screenshots, fool, am I using? I'm currently using a Mac, right, but if you have Windows, you could go ahead and take these screenshots yourself using, kind of like a tool- I'm not sure what it, what it's called, but you know. go ahead and google it. okay, so for you to take screenshots, but I like to work on Macs for this reason, right, because I don't. that time, I just wanted to do things, I just want to get it done, all right. so I took four screenshots that are currently on my desktop and, again, the objective here is to figure out what is what. so I clicked on the first one and, as you could see right here, color is zmm. 4, 4, 2, 3. let's see if I could associate that with something over here. ah, it's this one right here. it's the actual first one, okay? and so what I'm gonna do is that first I'm going to upload those four pictures and I'm gonna add them here, okay, so let me go ahead and just kind of like expand my window so you could see me adding these four images, alright. and now let's give it a name. so we're gonna give this, you know, something like let's just call it frame, oops, right here. so I'm all over here. guys, come over here and I'm gonna call it green, okay, all right, let's just call it old pack green. I'll call this biggish. I'm gonna call this pale pink. I'm giving it like unique names, not exact names. I'm gonna call this light blue. okay, now here I go. one, two, three, four. I've highlighted them over here, guys. right, I highlighted them. drag, drop that in there. now I have those pictures. so remember this guy right here. it was supposed to be a specific color. let's click on this box right there. I'm gonna click on this box right here and I am going to look. they have the other pictures there all along, well, well in case, if it doesn't have it, it's okay, click on this one. it's one, the 4 4, 2, 4. which ones out? 4 4, 2, 2. that's this one, 4.24. and then the last obvious one: save. now, once I've done that, you're going to notike that in the front-end of the website. it probably didn't do anything, okay? so we don't have any swatches yet. if I click inside of the product, I just have like these four circles that are pretty much just saying the same thing. okay, we're gonna go ahead and fix that, all right. okay, so the first thing that we're gonna do is let's go back to that name. so, right here, in the color I'm gonna call it, just give it a name. right, it doesn't. we don't have to be tiknical. beige, light blue, and what do we call this? we called it pale pink, and let's press save to that and let's see what it did onto the website. let's see if it changed. so some color swatches started to come up here and if I start hovering over them, you could see that the colors actually coincide with the name. right, but the problem is that this green doesn't match this and this color doesn't match that. that doesn't match this, this doesn't match that, all right, so something seems off like these colors just don't match at all. furthermore, if we back up into the collections page, we go over here where it says home style, we don't see any color swatches here too. right, so let's try to fix one problem at a time, all right, so let's go back here. let me go ahead and refresh, just in case. make sure that everything is up-to-date, all right? so when I first reproach, now I have a whole bunch of repeats. right, let's go ahead and can't rid of the repeats, right, but let me move, let me shift these guys around so that it matches this. so you see how this one- it's first, second, third, fourth- right- let me move these pictures around. click, hold, drop, click will drop. that's cool, and that's cool. so it's reading it like from left to right type of thing. these guys don't need to be here because there are duplicates. delete media, let's go, and then it's gone, right, so what does that do for the front end? because we have like the super long amount of pictures, right, let's go ahead and refresh this and there you have it. now it's cleaner. it doesn't have all of those pictures, right, so I could switch them around, see, and then I could go here and then here, here, here. so now the pictures are coinciding, but again we need to fix this problem, because right here this is.
Collection Filters in Shopify 2.0 - Full Tutorial & Concepts
shopify 2.0 has completely changed the way that filtering works. we now have a brand new filters section under the navigation in the shopify dashboard. we can finally filter by price. we can filter by product options like size, without having to tag products with the size or the price, as we had to do previously. on the other hand, we are losing tag based filtering and i know that's a big deal for many of you, especially if you have a large store. your entire catalog may have been organized around tags and now you have to rethink your whole system. it's maybe even a deal breaker for you with upgrading to shopify 2.0. but don't worry, i'm going to give you some tips on how you can transition from the old tag based filtering system to the new one. in general. in this video i'll quickly discuss the differences between the old filtering system and the new one in shopify 2.0. then i'll move on to kind of a tutorial format. i'll teach you everything about setting up filters and i'll show you lots of examples. first i'm going to show you how to set up basic filters like size and price. then i'll show you how to create your own custom filters using fields. my example will be filtering by fabric- and you'll be able to filter by cotton, wool or polyester, and you can apply this knowledge to whatever it is that you sell. it's going to be the same concept. i'll also briefly tok about color filters and why this is the most difficult kind of filter to set up, and finally, i'll discuss filtering apps. there are a couple of situations when filtering apps might be the best solution for your store. for example, if you still really need filtering by tag and you also want filtering by price and other advanced filters, right then you might need to use an app. but first let's tok about the difference between the old filters and the new ones. so, finally, filters are now a built-in part of shopify instead of being a feature of a theme. that's very important difference. this is the reason why the whole system has changed. filtering in shopify used to be done inside of the theme. some themes had filters and some did not. so if you wanted filters, firstly you had to get a theme that actually offered that feature, and what you would do is you tag your products and then you set up the filters inside the theme customizer- not inside the shopify dashboard, but inside the theme, right, and this was very inconvenient because every theme had a different way of setting them up. you had to read the instructions for that partikular theme and then you had to name your tags accordingly, right? so usually with underscores or dashes or some specific format, so that those filters got grouped and they would show up in the correct way. this was bad for a few reasons. firstly, it's confusing. there were many times when a client asked me to help with a bug when really it was just a matter of naming the filters correctly. it was also time consuming because you had to manually tag all of your products or you had to use some kind of bulk editing app to do that. you know also, you're just creating a whole lot of tags on products, which is kind of messy. and then, lastly, if you change themes or if you even update the same theme, but you have to set up the theme settings again, you also have to set up the filters again, right? so in general, it was just hard to manage. so now we finally have filters built into the shopify admin. you can find them under online store navigation page and it's a lot easier to use, at least for basic filters. it just makes sense. you simply tik what filters you want to activate, right. you don't need to do a whole bunch of tagging, so you save time. your product stays cleaner. this also means that the filters are now standardized and will work across themes in exactly the same way, except for color filters, but i'll get to that. but still now, when you change or update themes, your filters stay intact. there is a separation between your themes and the filtering. you don't have to worry about moving to a new theme. your filters will not break, they will just work. there is a downside, though, for many stores, and that is that tag filtering isn't really an option anymore. so if you're watching this video to confirm that, then yes, it's true, no more tag filtering. you will still be able to add tags to products. tags are not going anywhere, but they're more intended to be used for internal administration, organization of your store- right for things like automatik collections, for example, and not so much for customer facing things like filtering. instead of tags, the new filters now use actual product data, things like the price, the product type, the vendor, the product options or the variants that you have, like size or color or whatever you may have- and, of course, meta fields for those custom fields, for those custom filters. if you don't know what meta fields are. i'll be teaching you in this tutorial as well, so let's tok about each of those in a little bit more detail, okay? so, as you can see, this filters menu is kind of split up into three sections. we have this: products, product options and meta fields. i'm going to tok about this one now. i'm calling it product properties because it's properties that the product has on its own without you adding anything to it, so like the price, the availability. now it has these four properties: availability, price, type and vendor- and that's all there is to it. you can't add to these. these are the default filters that every shopify store will have. the most useful of these is probably the price filter, because this is the one that was most painful to set up in older themes. so here i've got- actually here i've got a price filter on the old version of turbo and, as you can see, i had these tags like under 25 and then 25 to 50, and then 50 to 75. those were the price ranges that people could filter by, and then i had to tag all products with this kind of pricing and if there were two different variants and they were in two different brackets, then i had to add two of these tags to them. that was very difficult to do- obviously not on my store because it's a test store, but i've definitely done this on client stores and it was a pain. and look, now the situation has changed completely. it's so easy. you just tik this box, hit save and then you will have the price filter appear on your theme. it will look differently on different themes, so in dawn we actually have to enter a number, right? so i want all products that are under eighty dollars. i would enter eighty dollars. we see this filter zero to eighty, we can go from forty or whatever. anyway, it just works and you really don't have to do anything besides check this filter. so, my god, so much easier and saves so much time. and the other one is the product type. that's something that you should pay attention to as well. i know that a lot of stores they don't even use this. they don't even fill this out because previously it was not that useful, but now it is one of the major filtering types and shopify obviously wants you to use that more. so you should think about naming your product types in a way that actually helps customers browse your store. okay. so the next filter type that i want to tok about is the product options. now, these are actually dynamically taken from the options or the variants that are on your product. so here i have a size option, right, and that's where we're getting size from here. and if my products did not have any options- like if it was a single option product like this water bottle that i have here- it has no options- if all of my products had no options, then we would have nothing here. so it's possible that on your store you don't have anything here at all. and likewise, if i did add options, for example, if this bottle has two different variants- you know it has a one liter bottle and it has a 500 ml bottle for americans, that's, you know, 32 and 16 ounces- and so now this product does have variants or options. if i save, that, that's immediately going to be updated. if we refresh, that's immediately going to be updated in th.
More:is amazon dropshipping worth it
What Is The Best Free Theme For Shopify? Colorblock Vs. Dawn
color block or dawn? which free shopify theme should you be using in your store? let's find out. yo, what's up everybody and welcome back to the channel if you're brand new here. i want to welcome you and say hi. my name's carrie, i'm the founder of shirt school and i created this channel to bring you the best strategy, secrets and hacks to grow your online t-shirt, apparel or print-on-demand business. you're probably already aware that shopify has transitioned fully over to online store 2.0, which was a complete overhaul of the shopify system. they released brand new themes and also recently they released shopify editions, which was this huge collection of new features which i want to tok about more on the channel. but when they initially transition over to online store 2.0, they put out a few free themes, new free themes. i've toked about those on the channel and i've told you that one of my favorite themes is called dawn, which i've been using in my stores and i've been recommending to most of my students to use that dawn theme. well, a little while after that, they came out with a few more free themes and one of those is called color block. so i've been eager to review this theme on the channel and kind of put it up against the dawn theme because, according to shopify, they say color block is a good one to choose for apparel brands and, as you know, i like to tok about apparel brands. it's what i've built in my own businesses and what i help my students with. so today i want to tok about color block. is it better than dawn? is this the one you should be using if you have an apparel or a t-shirt or a print-on-demand business? so that's what we're going to dive into today. so, looking at the free shopify themes page, what? what themes they have right now? you see studio dawn, which i've toked about a lot, sense, refresh, taste, crave. color block, which we're also going to tok about today, ride and then craft. so, as i mentioned, a few of these came out initially and then they added more and most of these are- uh, they're positioned for certain categories. so if you have a beauty brand, you know you might want to go with the one that's really designed for beauty, like sense, this one, you know. you see hardware and automotive, health and beauty, pet supplies. so these themes are designed for certain types of stores, to be better for each of those. so the two that we really focus on in clothing are dawn, and then this color block theme. so i want to break those down. so let's start with the color block theme. as we go just to their uh page here, that kind of shows us what color block is all about and explains it. you see some of the main features right here: confident and colorful design, so it's very colorful, ideal for a large catalog. so it's got this kind of menu system and it says it has expanded menu navigation. so if you have a lot of products, if you have maybe a big apparel store, this might be a good one to go with. and then you see advanced customization options. so that's flexible design, customization settings to achieve your desired vision. yada, yada. you get the point. as we scroll down here we see a little bit more right here. this, as i found, was actually just kind of standard throughout the themes. if we go over to dawn theme just to kind of compare and contrast, obviously you see some different pictures and everything here. the main things that it's going to highlight: chic and minimalist design. media, forward product page, so it has large media to help your customers see what the products look like. that's been a topic of conversation in our community. and then the advanced customization options is actually the same exact thing that it says on the color block theme and if we scroll down, this is the same as what we see on the color block theme. so even though it says features, they're kind of just copy and pasting the same text here, so right on these pages. you know, the biggest difference here is what that you're going to see just up front is you're going to see that the design is different, so like one is more colorful where one is more minimalistik and chic, they say, and then you're going to see that the color block- ideal for large catalogs, whereas the dawn theme might be, you know more. they're highlighting kind of the media forward product page where there's bigger pictures and more media. i guess you could say, and we'll tok more about that. the next thing i want to do is i want to look at their demo stores. so here we have the color block demo store- i'll actually go back over to the main page- and then we have the dawn uh store. i'll go back over to the main page. can i give you a free guide that will help you build your shopify store in a matter of just a couple hours? we've put together a cheat sheet that has 13 steps that you need to go through before opening your shopify to the public. it's extremely helpful and we've had thousands of people download it and the best part is it's completely free. if you'd like to download that, that shopify cheat sheet, just go over to shirtschoolcom cheat cheat and get your copy completely free. now one of the things i think can be a little bit deceiving here when you're looking at these free themes- i've toked about this on the channel before- is that you know shopify has professional designers that they're paying a lot of money to design really beautiful demo stores and oftentimes it's hard for us as smaller shopify sellers to make our stores look as good as these, because you know the shopify store builders, that they have the pros. number one, they're really really good at making these look good, but number two, they have really high-end media like this. you know really professional pictures on both of these. you'll see that the pictures are just really professionals, professional and one of the big differences between a store that looks like junk and a store that looks really good is simply just higher quality photos. you know a more professional logo and some of the color selections, so i think that's something to consider that. you know, even though these stores are beautiful here on the demo stores, you know i wouldn't necessarily expect your store to look that beautiful unless you're really a pro designer. that's not to say that, you know you can't make your store look awesome, but i just want you to keep that in mind, that it's always a little bit deceiving to compare these pro stores. so if we look at these two stores, what's the difference? as you see, color block, as they mentioned, it has these really vibrant colors, uh on it and so that's the biggest difference. you see, like these pastel kind of colors, yellow and this kind of, uh, blue and this pinkish kind of color, uh, with just these really nice color blocking. obviously, as the name says. you know, that's one of the things that is different. over on the dawn theme, it just looks more, i guess, modern and, like it said, chic or, you know, minimalistik. you can see it's more, more kind of like high-end fashion maybe, you know, has that kind of look on here. so that's really the difference that i see right, right off the bat. um, i do want to go over to the product pages, because the product page is one of the most important uh places, um, in your entire store. it's where most people are gonna land. if you're running traffic like paid ads or even from social media, you always want to be sending people to your product page, and so i want to look at the difference between those two. so let's go over to maybe like sandals and click on one of these and look at how they differ. now these are the demo stores, and we're gonna dive into the actual editor here in just a moment. um, but just looking at the demo stores, um, here's kind of the difference is that on the color block theme, you're gonna see this drop down menu and you're going to see only an add to cart button and you're going to see some more of that color blocking here with like kind of this light pastely looking color, right. if we go over to the dawn theme, you're going to see these large photos- right, they really want to accentuate the th.
How To Create Color Swatches for Product Variants in Shopify (Dawn Theme)
bonjour. in this video, we're going to learn how to create color switches like this for our shopify product page. you want to learn how to do that? well, you gotta stay tuned for that. [Music]. before i begin this video, i just want to mention that we'll be using the shopify theme called done in this video. so what that means, what i'm trying to say is, if you're using a different shopify theme, or if you have a different shopify theme, then this video is probably not for you, because not all themes, not all shopify themes, are written the same way. they will have a different template file, section files and so on. so if you want to do what i'm doing in this video, what i'm going to do in this video, then you're probably not going to be able to follow along because you're using a different shopify theme. so make sure, if you want to do what i'm doing in here in this video, make sure that you're going to use done as well. so we're going to divide this video into two sections or two parts. the first is setting up the meta fields and then the second is using liquid to access the meta field. so obviously we're going to code, but don't worry, this is honestly really, really easy. in fact, we can do the switches, the color switches, in just 10 lines of code. how cool is that? so, without further ado, let's open our shopify steam, shopify steam. so, without further ado, let's open our shopify store and start working. so i'm right over here in my development store. so the first thing that we're going to do is to create the meta fields. so let's access the settings page, let's open the meta fields page and here we're going to create one definition for the variance. so select the variance and then we're going to create a new definition. so click add definition and then for the name, you can just call it something like color, hex or just color, it doesn't really matter, you can just select color. and then, for the namespace and key, you can just change the my fields from my fields to something like color and then, instead of color, change it to value. so it's going to be variant. that meta fills that color, that value. if you want to access the value of this meta field, and for the description, you can just leave it empty. if you want, i'll just leave it empty. and then, for the content type, we're going to select color. so make sure that you use a like color. okay, select color and then hit save and we should have the following definition or meta fields. so the next thing that we're going to do is to create the values for our variants. so let's open the products page in a new tab. let me just open that, and then i'm going to select one product, say, for example, i'll select the sports watch, this one, so you can just select any product you want, as long as there are variants. so here, if we scroll down, i have the following variants. so i have blue, gold, purple and then black. now, keep in mind, the option is color. so if you have like, say, for example, there are there are cases that you have multiple options, not just color, but also you have sizes. i don't know. maybe there is like weight as well, or height and so on. those are sizes as well, but whatever. so my point is we're going to only customize or create the buttons for the color option. we're not going to customize the sizes as well. that's not going to be the case. so let's go back in here and here i'm going to select the edit button and we're going to apply a color to this volume variance. if you scroll down, we should have the following meta fields, so you can just change the value of this by clicking the color. and then, since this is going to be blue, i'm going to select color blue. so here i'll just set it to blue, hit save. and the next stop is for the gold. i'll select the gold and then i'm going to change the color to something like gold. so maybe something like this: hit save and the next top is for the purple: select the purple and then change the color to something like purple. so i'll change this to something like that. hit save. and last is the pink, i believe, or black. so here we have black. i'll change the color to black, something like that. hit save. there we go, okay, so now that we have the colors, the next we're going to do is to write codes. so let's go back to online store. i'll open this in a new tab and then we're going to open the code editor. so let's just wait for it to be loaded and i'm going to select actions and select edit code. you should open the following code editor and the first thing that we're going to do is to open the sections folder. scroll down and open the sections folder- it should be right over here sections and scroll down and open and look for the main product: that liquid. so here, as you can see, we have main product that liquid. that's the product page. okay, open that and we should have the following code. that's going to be really um confusing, so make sure that you pay attention. so i'm going to press ctrl f to open the following search box or search input field- so if you're using mac, i believe it's going to be a command- and then f to open this search box and then we can just type something in here like variant- make sure you type it correctly- variant underscore picker. so we should have the following when tag. so basically what this means is if or when the blocktype is set to variant picker, you should render the following button or radio. we also have in here something like block that settings the picker type. it's either button or drop down. so since we are using buttons, we're going to customize the following variant radios. so inside of this we have a four tag and that says: for each option in product options with value: so this is the option that i'm toking about the options: sizes, colors, weight, etc. those are the options and then inside of this four tag. we also have the following four tag that loops through the values. so for each value in options we have red, blue, yellow, gold, pink, black. those are the values that we need to customize. so inside of this four, we have the following input field and we also have in here the label. so the label is basically this that you're seeing right over here. let me just open our shopify store and i'm going to open the product. so i'm going to open view all and it should be this one: sport watch, led luxory. so here this are the labels: black, blue, black, gold, black, purple, black, black. so, honestly, if we change this to something like, um, hello, if we concatenate something like that, then if we refresh our page we should have black, blue, hello, black, gold, hello, and so on. so basically, what we're going to do is to customize this label and apply a color. so here i'm going to get rid of the hello and in this label tag i'm going to use the style attribute and i'm going to use the background high fan color and for its value we're going to use the meta field. so if we go back to the meta fields, you can access the metaphiles using the following: so: variant, that metaphase, that color, that value. but since we are looping inside of the options, how can we access the variant meta fields, since this is not a product variant? well, it's honestly really easy. we can use the for loop object to get the index. so if you take a look in here, in the four attribute, as you can see, it's using the for loop, that index zero. so we're going to use that as well to get the meta fields or to get the variance. so in this object that we just created, we're going to use the product, that variants, and this is going to be using an array, so create open and close brackets and then inside of this brackets, we're going to use the for loop object and then the attribute index 0. and then outside of this bracket, we're going to access the meta fields and then this is where you're going to use the color and the namespace color and then the key value. okay, so let's go back to the code editor and here meta fields, that namespace, the namespace is color and then the key is value. so, again, product, that variance, it's an array. so we're going to pass an index, so for loop that index zero and then we're going to access the meta fields and should be the.
[Color Swatches Shopify] - How To Add Color Swatches on Shopify Dawn Theme
welcome back to websites pro. my name is Bilal Nasir and I'll be teaching you guys how to add swatches on the Shopify product page today. so you'll be adding a small piece of code in order to add Shopify swatches on your product page. so let's jump into it. so, guys, after learning from this tutorial, you will be able to make your product page look like this, where you'll have color swatches and color will be changing when you will click on these color swatches. so let's jump into the code and let me show you how you guys can do it. guys, this is our Shopify dashboard and the first step is to add the product with variations. so I'm going to add the t-shirt product: t-shirt. let's price it 10 and add in the main media file. from here and now, I'll select the needed option where it will show the variations. so, from options checkmark, this product has options like size or color. click here and then add in color and then values of the color. in our case, we'll have black, white and red, so we added the main image as a red one, so I'll make it the first one. now click on done and hit save. and now our product has been added. now switch it to active product. click on save again. and now we'll go to our settings page to add in the meta field. click on settings, scroll down to meta fields, Click here and then click on variants and, from variance, add a definition by clicking add definition, name it, color and in namespace, add in color dot values. now, from select content type, select on color and hit save. now go back to our product page again. so this is our product page. click on that and from each variant, click on edit. now in this red color variant, I'll select a picture which is red color. click on the done, scroll down to meta fields where we'll add: we will select the color red. and there we go now. hit on save. now repeat the process with a black color variant: select in the image first. so i'm going to upload the black color image. now select the image, hit done and now scroll down to the bottom where it says meta fields and in color, select the black color. hit on save and I'll repeat the process with white color again. add in the image for white color. Click on the done, scroll down to the bottom and, from meta fields, add in the white color. hit save now. finally, step is to edit the court of our liquid file to display the color swatches. so at the moment, our product page looks like this, so that's how it looks like. by adding the core, we'll be able to see swatches, which will replace these buttons. now let's go to the online store and click on x's actions and added chord. before editing the chord, make sure to duplicate the theme. so if you're working on a live theme, you don't want to be mess up your theme, right? so take the backup of it before editing the chord. okay, now click on edit code and search for main dash product- liquid file. and here's the file. and now in this file we will search for discord and we will replace this code with this court. okay, now let's search discord. so this is the blog post, and link of this blog post you'll find in the video description. okay, now copy this and find this code in our main dashboard. click file. actually, let's search in the first line because, due to the line break, it's not showing up properly. copy the first line and search it on our main dash product- liquid file. okay, so that's the court and these are the three lines which we'll be replacing with this chord. okay, now copy this chord and replace it with this chord. normally you will find this code in line number two zero three. two zero four, but I just displayed the code which you will be looking to replace in, so you don't make any mistakes on that. okay, now, after that, click on save. and now let's go back to our product page and see if our color swatches are showing up. fine. so that's a product page, and let's preview our product page and here we go. our color swatches are showing up fine, so click on them and they are functioning properly. so if you have multiple color, you can. if you have more than three colors, you can add more color swatches. so i hope you guys like the tutorial. make sure to subscribe the channel, comment on the video below and share it with your fans. have a great day.