Here's how to show savings in your cart from the Automatic Discounts & Gifts Shopify app. This code is for the Flex theme. Though it may be a helpful starting point for those on other themes.
Theme edits needed:
- Create a new snippet - cart-automatic-discounts.liquid - using the code below.
- Add a render to the new snippet to the section cart__main.liquid. Example in the code below.
Code for Flex Theme
Create new snippet
Edit section cart__main.liquid
Transcript
Hey, Scott Austin here.
In this video, I'm gonna show you how to add the savings in cart functionality to the automatic discounts and gift app to your flex themes cart. So if you're using automatic discount and gifts, the app that allows you to stack more than one discount in a store, I'm using it in a store right now for allowing bulk discounts. So if you have more than $75 in your cart, you get 10% off. Then if you have more than a hundred dollars in your cart, you can get 15% off and you know, up, up the ladder there, you can't do that with normal Shopify discounts. So you have to add an app in, and the app I use is automatic discount and gifts. And if you go into their menu under this savings in cart functionality, here's their instructions on how to install it.
And, you know, I gotta be honest. It's, it's not the best of instructions. There was a video I found somewhere. That was how I was able to finally figure it out. But even that wasn't the easiest starting point. But you know, every theme is different. So what I'm gonna show you is the code that I added to the flex theme to get it to show. So if you're using flex in this app, this is a great way for you to kickstart this process. So what we're adding is I'm gonna add two of these to the cart, which is a $50 price. So at $50, I don't have a savings. You can see there was a savings, you know, displayed down here a second ago. But then the apps JavaScript comes in removes that cuz we're our threshold for our first discount is $75.
So if I add one to the cart, just by, you know, clicking one there, now you can see my cart total is $75 and then the app's JavaScript came in and said, all right, that's a savings of seven 50 cuz 10% off for order is over $75. And then here's your new total? So the liquid code that I've added has this line, these two lines here, right? So this is the normal flex theme subtotal. And then I've just added some code to show the savings and the new total for the cart. And you can see here that, you know, this is also, I got some Java script in this. If I change the quantity to four, I'm now gonna get 15% off and that's reflected here and now here. So the code's pretty simple. What I did is I created a snippet called cart, automatic discounts, dot liquid, and all the codes you need. So there's some liquid in there. There's some CSS in there and then there's also some JavaScript in there. So these three work together to show the information, style it like the rest of the site and update it when you add the plus or minus functionality, you know, changing the quantity inside of the cart. So all you have to do is copy this code, which if you're watching this on YouTube, there'll be a link in the description to my blog article or actually share all of this code with you, right? So create that snippet. And then you want to go into cart, main liquid, which is a sections. You go into sections over here, down to cart, main liquid. And what I did is there's already an element inside of the flex code for cart discounts. So if you score, you know, it's around, you know, line 280 in, in my flex, which may have been customized in other places, but just search for the section setting, display savings like this, this element right here. Just find that in your cart code and comment that out. So I took that whole if statement all the way down to the end, if right, that, and I bracketed that in a comment ed and comment liquid code. And then I put my render to my snippet that I created right above that.
And that's how I get it to display inside of this colored background where the total information is. So that's all you need to do to get this work. And now you're gonna have to go in and maybe change some settings or some, some CSS here for the color you want, like my savings. I wanted it to show in this version of red, which is the red we're using in this store, this, these colors here, the, the brown is already in the, the liquid code, but this, this is a CSS setting for this red. So if you wanna different red, you'll notice this red here matches my checkout button. You may want to change that CSS a little bit. So that's how we do it.
Hopefully that helps. Thanks for watching.