This tutorial will explain how you can change the colors and sizing of your JadePuma product seals. It will also explain a bit of how the seals are created.
Transcript
Hey, Scott Austin here from J Puma in this video. No, I'm going to show you how you can change the colors and your product seals in your store. So I've set up your theme and the seals in such a way that you can change the colors through some theme settings that I've added to your theme. So here here's an example of some product seals. This one, this product, extra showing a lot of them. We've got seven of them here. Some of these show for every product in this store, and some of them are dependent, you know, they're based on tags or something. These are all based on tags. So the products will be tagged a certain way for those products seals to show up and the seals are, are meant to map to the overall theme of the site, the co the color scheme of the site.
But let's say you want to adjust them, for example, the Brown underneath the fair trade here. That ribbon is it doesn't contrast enough with the background, or if you want to change different colors, you know, we can do those also, or any of the colors. So where it's located is right now, I'm in theme customization. So this is where you'd be on theme customization. If you open it up, you scroll down to the bottom of the leftover here, you'll see there's theme settings. And in your theme, I've added under theme settings, a Jade Puma elements. So if you click on Jade Puma elements, there's going to be all sorts of things that I've added to your theme for you. And one of them somewhere is going to be product seals. And here you can see there's five colors to be set for product seals and then three size variables.
So the five colors on these seals right now, there's four colors being shown. I've got another one, which is the accent to color, which also in a minute here. So it's, you know, primary colors, usually the text, and it can be anything, right. I just tagged them a certain way. So all you have to do, so, you know, the highlight color is that ribbon underneath the text. So let's say I want to try something that's green, but make that much, you know, dimmer green, you know, it's too, you know, but here you can see how easy it is to get on the color wheel and just play with the colors or put in the apps, you know, the absolute code, if you know what that's going to be for something. So there, if I wanted my seals, you know, I've changed that light tan to a light green, boom, I'm done all right, you stay into it across all the seals on all of your products.
And this store has something like 20 different seal options that pop up depending on the different qualities of the site. So, you know, how do you figure out which one of these does what it's actually pretty easy. You just go in and play, right? So accent color start playing with that. And, you know, it's pretty obvious what the accent color is controlling. You know, as, as with any of them, the background color, you can see pretty easily, you know, how drastic the contrast can be if you want them to be. I try to make my product seals, not too bright, not too contrast to not detract, right. I want the customer to see that add to cart button first and foremost, and the product seals are meant to be just gentle reminders. I would never have something as drastic as, as these showing up, but I'm just doing it right now to show you, you know, how you can just play with the colors and you know, make things happen and, and change them as you want to change them.
So that's colors and the seal size desktop. So I've got two sizes for these icons, one for desktop and one for mobile right now they're set to be 120 pixels, tall and wide. I can change that down to 75 or any number that I want to and I'm may need to save to have that change take effect. Let's see if that happens way to scale it up. Yeah. The size one doesn't take effect immediately like the the color ones do, but it just changes the sizes of your, what I'm going to do. I'm going to refresh the page. So I don't want to save these colors. So it's going to refresh that page and I'll show you these, these seals actually in use in the actual store we were under men's shorts.
So see shorts right here. Right? So here you can see, these are the sets of 120 pixels in size. So if I go back to theme customization I can say, well, let's make that 160, save that and look at, you know, the change that, that affects on the front end, and you're in control of the size of your seals. You can make them larger or smaller, and you can also space them closer together or farther apart. So that's where the padding comes in. So there's also a seal size for mobile phones and then padding, you know, you can, you know, take the padding up to 15 pixels, for example, space and much farther apart. And obviously it's going to just, you know, fit less per row will be the impact of that, right? So what I normally do, but then you can adjust it, you know, based on personal preference. What I normally do is I set them to be about one 10, one 20 with a, you know, five or six, sometimes 10 spacing. And that looks like this. And you'll notice that the seals wrap rather nicely, you know, it was three per row a minute ago, and now it's four.
So the CSS wraps those and, you know, you can just change the spacing or the size, and it'll, it'll render cleanly result, you know, based on the results of those changes. So that's how, and it's pretty simple, right? That's how you update your product, seals, colors, or size and spacing. Now I'm going to dig into a little bit deeper because I want to explain a little bit of how these seals are made. So let's say you have these seals in your store, and then I made them, right. But you want to add more seals to your store. So I'm going to explain to you a little bit of a concept, not all the details behind it, cause you can get a little bit tedious in the technical details, but I want to explain the concept of what's going on here. So you understand those.
So these files are normally, I used to make seals at a PNG files, right? Which are good for solid color graphics. These are actually SVG files, which stands for scalable vector graphics. So they're, they're vector files, not raster files. So at a P and G is a raster files it's pixels on a page. So a vector file is it can actually be rendered as text, right? There's actually a text file that drives this, this SPG. So give you a real example. Here is I'm going to open up one of these products, seals the spandex one, the first one here, I'm going to double click on that SVG file. And it's going to open it up in Inkscape, which is open source software. So it's free software that I use for making an editing SVG files. And here over here, this is the XML of the, so this is the actual text that renders this file over here, right?
And, and to prove that even more, I'm going to open this up, this file up in sub line, which is my text editor. And you'll see the entire file is just text. So this, this is how a vector, a file is created through text. And then all browsers know how to interpret this text and draw the vector file. So to have the ability to die and amicably changed color on the fly, I couldn't make these PNGs because I can't control the color as a P and G is through CSS like I can within SVG, right? So I created these as SVG files and each one of these SVG files is a text file. That's embedded in your theme. So here, for example, here's the theme editor and four way stretch. This is the liquid file that I created added to the theme. And it's just that SVG text file in there, right?
So I just copied it from, you know, I actually opened it up like you saw a second ago in the text editor, I copied all this and drop that into a liquid file inside the theme. And then I render that when necessary. So here I am, here's my product seals liquid file. And you can see what I'm doing each time. So four way stretch is farther down. So, you know, if the product tag contains four way stretch, then render four way stretch which is a snippet file, right? It's stored the snippets in the theme. And that snippet is just the SVG file, which, you know, works as HTML. You know, SPG texts can be embedded inside of an HTML page without a problem and browsers totally know, and understand how to do it. And then the cool thing is all these elements, right?
If I go back to my Inkscape file here, all of these elements, I can assign classes, just like I can assign a class to a paragraph or an each one or a div or a span in HTML. I can assign classes to these vector elements inside of this SVG file. And then I can use those classes to adjust the fill color, which is exactly how I'm adjusting color. So for example, on this element here, if I look at this path, I've got a class assigned to it, a background, right? So this class is background. And then what I've got going on here is when we adjust this background color, there's some code elsewhere that says, take this color and use it for all the classes of background inside of SVGs. So what I have to do when I create these SVG files let's go back to the folder here. What, when I create an SVG file, a new one, I draw the elements the way I want to. And then I go in and edit them. Like I was just showing you here. And I take each one of those elements and assign it, the class that I want it to have. So this, this element here you'll notice has a class of accents. This element here is going to have a class of Primary right there. Okay.
So each one of these and this ribbon here has a class of Highlight right there. So each one of these Solid colors is assigned a class inside of the SVG file. And I, across all the SVG files that I make use the same classes over and over again. And that's the way you get that uniform behavior across all of these. Cause I'm using the same class taxonomy across all the files that allows me with five simple elements here to change the colors of all the product seals. And I just want to show you that fifth color because that is cotton. Sometimes I use five colors in an SVG, a product seal, not often, but sometimes, and this may not come up inside. It's the, here we go. So there's, there's the fifth one cotton. Right? So and I can change that accent color to anything I want it to be, but sometimes I use a second accent color. So it's background for the scallop and in the middle here, it's highlight for the ribbon it's primary for the text it's accent for the stars and the element in the middle and sometimes accent too, for the element in the middle also. So that's how you can edit the colors and, and sizing of your products, seals. And it's a little bit of an explanation of how that is set up in case you want to add more seals to your store. So thanks for watching.