 In this video, we're going to add a sales badge just like this to our product loops inside Elementswar. And a big shout out to Jonathan for asking this question and giving the idea for this video. This is going to be a follow up from yesterday's video. Let's go ahead and check this out. We're going to be using this shop page right here. We're going to be adding our sales badges to these product cards. Now, this was from yesterday's tutorial. We built this all using the loop grid for products inside Elementswar. And then we also added these filters. Now, if you do want to learn how to build this and how to add these filters, I'll leave a link to yesterday's tutorial somewhere up on the top above me and also inside the description. Today's tutorial is a follow up from yesterday's. All right, so what we're going to do is add the sales badge here to our loop grid to get started. Let's go over to our dashboard and we're going to need to add a custom field for this. So I'm going to go over to plugins and I'm going to add ACF. Now, ACF Advanced Custom Fields is going to work great for this. We're going to use the free version. But if you want to use something like Jet Engine, Metabox, Toolset, ACPT, they're all going to work the same. Let's go ahead and activate it. And once you got it all set up, I'm going to go down here to my ACF to fill groups and we're going to add a new field group. So let's click on fill group right here. I'm going to call this one sales badge and then I'm going to leave it at text. I'm not going to change anything here. We're going to not touch any of these other options. We're just going to move down and I'm going to call the fill label the same thing, sales badge. That way it's easy to identify. And then we're going to leave the default value blank. Don't add anything in here. Next up, we got to go down to our location rules. And we're going to leave this at post type, leave this at equal to and change this to product. This is now adding this field to all of our products. So let's go ahead and save change. Now let's go over to our products and take a look at what we got. So down here, we could see now our custom field, this sales badge. And here I could go ahead since this product is on sale, I'm going to go ahead and put on sale. Oops, got a spell cell, right? Okay, on sale. There we go. And I'm going to update it. Now let's go back over here to our template where we have our loop grid. And we're going to go into edit template. This way we could add in our sales badge directly into here. Now we can't see these items here and that's because they're all using dynamic tags. But we could see the outcomes here on the items that loop. So right here above our image. And this is why I also like to use this navigator as well. It's really helpful to identify things and move it around. Okay, so right above this image, we're going to drop the heading widget. And then we're going to go to dynamic tags, scroll all the way down till you find the ACF field. Or if you're using jet engine or meta box, you're going to see the same thing. You're going to go down to your field. Let's click on this again and go to the key and pull up sales badge. All right, I'm going to make a few more settings over here. I'm going to change this to a span. Now you can put this on span or div. Definitely do not leave it on the H tag. That's really important. Let's go ahead and style this up a bit. I'm going to make this. Let me see. I'm going to make this a dark color. I'm going to find a small text. I probably would end up creating a new text style. That's really, really small for this one. I'm going to go in the back and add a background. So I want to make this into like a tag and I know right now I'm designing blindly, but I have a pretty good idea on how I want this to look. So I'm going to go over here to border radius. Let me go ahead and make this 50 pixels. And then let me add some padding. I'm going to switch this to Ram. Let me do 0.4. Whoops. All right. And that's on right and left on top and bottom. I want to do 1.4. All right, it's kind of big, but it's okay. We'll adjust that later. Let's go here to update now and take a look at the front end. Click on save and back. And now there we go. We have the tags where we set it. They're showing now on the products. We got to make some adjustments. So let's go over to edit template and we'll be able to see the updates happening here now on the looped items. So I'm going to go back here to my tag. I'm going, let's start here. Align self. That way it's only filling in that space and this is way too big. So let's go ahead and okay, I got it wrong vice versa. I wanted to do right and left a little bit bigger. There we go much, much better. And next up now this is on top of it and it's breaking our grid. So what we want to do is go over here to position and select on absolute. And now this is going to be right on top of the image. Let's go ahead and update it. Now we didn't see it happen there and sometimes it doesn't just refresh it. And there we go. We see the tag now is on top of our product cart. I'm going to go further and make a few more adjustments and then I'll leave it up to you to style it up the way that you like. Okay, I'm going to use a margin and I'm going to just to go quick. I'm going to put 12 pixels left and 12 pixels top. And now you could do your own thing. Make it look the way that you want. Let me go ahead and go to save and back. Well now anywhere that we put on sale inside that badge, it's going to show on our products. Now back over here to our products. This method is a bit more manual than I would like it to be. Ideally it would be best to have this and what I would do is take it a step further to make it conditional. It would all depend on the tool you're going to use. You might have to ask some custom code do some chat GPT on it. Dig in deeper if you're going to be using jet engine for their conditions. So whatever tool you're using, I probably would take it a step further. But at the same time doing this one manually is a bit manageable because if you're going to be putting a sales price in, well, the sales price is going to be something you do manually and we have the sales badge right here. But this is a really quick, easy and free way to go ahead and start adding sales badges to your product grids inside Elementor. I hope you found this video helpful and I hope this also sparks us some ideas on what you could do with the loop grids inside Elementor using custom fills because this is just one possibility right here. And if you do have any questions or if you want to learn something else, please drop it inside the comments. This is how I get a lot of my ideas as well for new content. Well, I hope you found value in this. And if you did, then please don't forget all that good YouTube stuff, you know, like and subscribe. It does help to support the channel and it's super, super appreciated. Well, thank you for watching and I'll be back again soon.