Here is how you can make a color swatch for your Shopify store.
Transcript
Hey folks, Scott Austin here from Jade Puma. And in this video, I'm going to do a quick little tutorial on how to make swatches for your Shopify store.
So many themes, as you can see here, this is the fluoxetine buyout of the, a sandbox and many themes have the ability to have swatches for colors. They show up on collection pages going back here a second. So you can see the swatches here on the, on the collection pages. And then it also has them on the product page. So a lot of people want to know how to make those swatches. So there are PNG files and they have to be in, what's called a hand aligned format and I'll show you what that means here in a second. So what you have to do is you have to make a PNG file for that color.
Now you can just go in and make a color if you want to using the hex code or whatever in your, your graphics software. But what I like to do is actually use a little small image from the actual product, which gives it a little texture here. You can see on the blue one, especially on the gray one here, the Heather Gray. And I don't know why that, that image is showing up the wrong color there. These products aren't aligned properly, but you know, the, the gray one here is, should use this as the image. And there's a little bit of texture in that gray. And sometimes you'll like have a two colors, so you can take a little screenshot of the two colors overlapping a little bit or something, and just gives me a more realistic swatch than just using a hex code so quickly.
Let me show you how I do that. So we're missing a swatch here right now from mustard. So what I'm gonna do is I'm going to create a swatch from mustard for you now, I windows. So I'm going to use this little piece of software here called snipping sketch, which comes included in windows. You Mac people. I'm sure there's a way for you to do this, but I don't know what that is. So what I'm gonna do is I'm going to do this new, and then I can just grab a little part of my screen. So there we go. And now what I'm going to do is I'm going to save this. And right now I'm working on this storm enthusiasm, insight assets. I'm making swatches. This is an original one. Now, when it comes to making them handle lies, here's what it has to be.
So it's a PNG vile and the file name must be exactly the same letters as the color is. It must be all small letters and any spaces or special characters like an ampersand have to be dashes. So for in this case with mustard, which is just one word, all I have to do is save that as mustard in small letters safe. So now, if I look in that folder, here's my original from my mustard. So what I'm going to do is I'm going to open that up in my photo editing software. I use gimp, which is
Open source, free software, sort of like Adobe Photoshop just without the cost. So I use GIM for almost everything that I do from a graphic standpoint. So all I'm going to do is take this image and drop it into gimp where I can edit. Now, what I do is I make my swatches 96 pixels by 96 pixels, which is a little larger than it requires most themes, want a 50 by 50 or something around that I make at 96 by 96, just in case, you know, one of these themes wants a bigger file someday in the future. So what I'm going to do is I'm going to change my canvas size to 96 by 96, and then I'm going to place that right around. So I want to get a little bit of that texture in, but not too much of the shadow.
So I just move it around. So I get it where I want it to be. And I say resize. So there we go. And now if I save this one, as I'm going to put it in a different folder in the cropped and save, let's sit in the file. I need to export that as a PNG. There we go. Export is P and G swatches crops. That's my right file location. And that's good to go. So now I'm going to get out of gimp and I'm going to go over to the folder where my cropped ones are and there's my crop mustard file. Now, what I have to do is I have to go into Shopify admin for the store, and some themes want the files stored in the assets folder under the theme code. Some themes want it stored as a file. And in this case with the flex theme, they want it stored as a file. So what I'm going to do is in my file section, I'm going to go to upload files and I'm going to find that mustard swatch
Right there,
And now there it is on the site. So what should happen is if I go back to my page and I do a hard refresh, you now see there's this watch I just made. Right? And you can see the little bit of texture showing up so you can see it it's actually fabric. So that's how you can make swatches for your theme in your Shopify store. I hope this was helpful. Thanks for watching.