Liquid Section
Liquid Snippet
Video Transcript
Hey, Scott Austin here from Jade Puma. In this video, I'm going to show you a liquid only solution for free gift with purchase. Instead of using an app and a lot of JavaScript this is using liquid only, and it's not perfect solution it'll work for, you know, most stores in most scenarios, but it is not foolproof. And I'll highlight that for you, but using liquid only, this is a way to do free gift with purchase. Pretty simply actually. So in this story here Bixby chocolate, this is why I built this. This is the client. I built this a solution for the first time. What we have is a $75 threshold for the free gift with purchase. So right now this is my card. Is it 72 50? And if I add another product to the cart, and remember I said, this is liquid, not JavaScript.
So I just added another product to the cart inside of the cart and it updated the price automatically because there's JavaScript going on with Ajax. But the liquid that only happens at render time on the server. So I have to refresh the page and most customers aren't going to have this problem, right? They're going to get to the cart with $75 already in it. But like I said, I wanted to highlight the pros and cons of the solution. So when you add $75 to the cart, this promotion shows up up here and it says, Hey, you get a free gift with purchase. And we're over the a hundred dollar threshold. So let's just actually get rid of this product here and bring it under the a hundred dollars, but over the $75. And you'll see, we have tiers here. So now we get the $75 thing, which is three bags of fall treats.
And then the photo is specific to that thing. If they had add free gift, the promotion goes away and the free gift gets added in here. We say, Hey, get the black Friday gift set for free in the, in the prices changed. Now, the way we're doing this is with an automatic discount. So if we look at our automatic discounts, remember you can only have one automatic discount in your store at a time, which is, you know, a limitation also we had to do is we had to say anybody, who's got more than $75 in their cart can get a specific product for free. But we had to add all four of our products because we have four price tiers here. So it is possible to grief the system. Someone could buy $75 worth of product and add this product manually to, to the thing to the cart and get it for free. So it's another, you know, imperfection of this solution, but the way it works in the front end customers, aren't going to know that right, and what we're doing through liquid, or we're promoting the right product at the right price tier. Now let's say that they actually go over that a hundred dollars threshold. I mentioned before, refresh the page, and now they see a different product shown here and they can add that free gift. And it shows as free also with the automatic discounts.
Yeah, this, this product we're actually out of quantities. Let's just open up another product and add it to the cart. And now what I want to do is get ourselves over that $200 threshold, refresh the page. And now there's these $200 thresholds shown here and it's a different product also. And they can add that to their cart and get it for free. And then if they go over the $300 threshold, there's another, a free gift for purchase product. We are at 3 0 4 and now they see the $300 threshold and they can add that to the cart. And that automatic discount is making that for free. And if they go to check out they still see it as free because that automatic discount has taken place. So this is all as I said, done in liquid, and what I did is I made this as a section. So I added this section to my cart template. So if I go into the cart, a template here,
You'll see, I added the section gift with purchase above everything else that's going on on that cart page. So I wanted to place with this top and center. Let's go back a level here and show you that you can on mobile, right? Let's take our free gift out and get the promotion showing again, even on mobile, we want that to show up. We got rid of the photo on mobile just to save some space, but you know, the first thing you see in the card is, Hey, you get a free gift, right? Add that free gift right there.
So that's done, like I said, through a section, and then I seen about adding this as a section is all the settings that are necessary. I put into the section settings, so here I'm Dean customization on the cart page and I have the ability to select the gift with purchase. So here's the normal cart options, right. But I have the option to select the gift with purchase settings. And you can see here, I can just turn the whole section on or off, and then I can change the colors. And we went with, you know, a holiday color scheme here. And then we start off with the highest value promotion. You can add up to four different price tiers. Susan's the highest one is $300. We said, it's this bundle? Here's the text board. We want the button to say, add free gift.
And we wanted some text underneath right there. And then do you want a second price tier? Yes or no? You check it on. So there's if bad logic going on, it starts at the top. It says the cart exceed this threshold. If yes, show this promo, if no, then, you know, go to the next statement. Does the card exceed this threshold? If yes, show this promo, if not go to the next section. So there's up to four of them here. And then at the bottom, these are normal. This isn't the flex teams or normal flex team settings here. So, you know, if you're going to copy and paste the code that I'm going to provide, remember this has done for flex theme. You're gonna have to customize it to fit inside of your theme appropriately. And this is a flex pre online store 2.0 this is a store I built over a year ago.
So like in December of 2020 so there's not an online store, 2.0 version of the theme available at that time. So that's all the settings, you know, pretty, like I said, you can turn off any price trends. You want to show one price to your multiple price tiers as you saw it. So, you know, if you're worried about people grieving, you may only want to have one price cheer on, and it's just one free gift with purchase. But this store for the black Friday sale wanting to really encourage the increase in average order value by having better free gifts at higher cart tiers. And then in liquid you know, you've got to add the section, as I said before to the cart dot liquid. And then what I did is I made a, this is the section and all it does is call the snippet.
And then all the settings that we saw. So all these settings here are the settings that are in the section file. You know, there's lots of them there. And then and then in the first setting is, you know, do you want to show the section, right? And here we say, Hey, have section setting shows. Sections is true. So it's checked on, then actually show the snippet. And the snippet is telling all the rendering of the layout. So here we're determining all of our price thresholds from the settings. And then like, if the cart size is greater than threshold one. So in this case here, if the cart size is greater than $300, then because the $300 is set right here if it's greater than 300, then do all this stuff. And what we're doing is we actually go through all the contents of the cart, right?
And the text, if this product already exists in the cart. So in this situation here, it detects that the product existed in the cart. So it doesn't show the promotion anymore. And then when I get rid of this and because we're doing liquid, you got to refresh the page. It shows up again, right? So the Dean, the liquid logic is showing or not showing this based on, does the cart exceed the value and does the product or not already exist in the cart? So when it exists in the cart, it doesn't show it. Now this here, this price discount, this is automatically happening through the discount codes. So there's no theme edit. We have to do to make this work. This is just setting up a discount code properly. So back to our liquid, we just, it's the same code, basically four times with different settings.
And then there's a whole bunch of CSS settings at the bottom. And then the last step of that is to create the discount code. And remember, you can only create one automatic discount codes that we've done here and, or you only have one line at a time in your store to be more accurate. So, and that's where we put in, Hey, you know, you gotta have a minimum purchase price of $75. So that's going to map up to your lowest tier setting in your theme settings. So in this case here we set the lowest one to be seventy-five dollars. And then we added all four of the products, all four of these bundles into that tier. And that's like I said, that's where somebody could grieve or cheat the system if they knew enough about what was going on. I find that, you know, in over 99% of situations, you'll never have a problem with this.
Totally like a top tier brand where people really figure things out that they would learn how to cheat the system and things like that. For most stores, it's not a problem at all. So that's how you can get a free gift with purchase promotion into your cart and have people automatically adding the items to the cart and the discount applying without using JavaScript or without using an app. So feel free to, you know, use the code. Like I said, this code is optimized for flex and this store, so there may be some settings or some colors or stuff that's referenced from elsewhere. But Eileen you'll be able to edit that code and figure that kind of stuff out.
Thanks a lot.