Badgezilla

Flex Theme Sections

Checkout Toolbox

Linear Shopping Experiences

Episode 15 - DIY Cart Promotions for your Shopify Store

Subscribe to the Podcast

The Podcast


Show Links


Help the Podcast


Transcript

Hello Scott Austin here and in this episode I'm going to talk to you about do it yourself cart promotions. So we start off with explaining what I mean by a cart promotion. Most Shopify stores use a cart too. They're an a page or a pop up or a mini cart. And most themes in Shopify put some standard content in the cart. Things like what products are in the cart, prices, sale prices, and the different checkout buttons, whether it's straight to the Shopify checkout process, third party checkouts or checkout through Amazon, Google and iPhone. So what car promotions are or additional content that you can add to your themes cart to promote things. So it's pretty, pretty self explanatory, a pretty good title there. Now there are plenty of apps out there that allow you to add promotions to the cart, but your store may not need the overhead complexity or cost of more apps. So what I'm going to do in this episode is to show you some do yourself cart promotions that you can add to your cart to help your business grow. Now this is going to be adding code or editing code to your theme. So to do these steps, you're going to want to be comfortable with editing CSS files and liquid files, but we're not going to have to edit or create any Java script. This is all done through HTML, CSS, and liquid. So if you're comfortable with that, this episode's for you.

Okay, so now let's talk about why we should do cart promotions. There are two big goals to cart promotions. The first goal is to get customers moving from the cart and into the checkout. And the second goal is to increase your average order value. Now the cart is a funnel page that most users go through on the way to checkout. So it's the right time and place for some communications that may not be appropriate when they're starting their shopping process like on the homepage or on a landing page. So promotions in your cart are going to do things like inform people about the next step or the shipping policy or how long it's gonna take to process their order or tell them about promotions that they may be eligible for or close to being eligible for like a free shipping threshold or something to that effect. And it's also a good time to do cross-sells and upsells to let customers know what other products and services you offer that may be relevant to them.

Now the way that I implement cart promotions in a theme requires editing or creating five different files in your theme. So I'm going to walk through what those five files are. The first one is cart messages dot liquid and this is a snippet file that I add to the theme. Your theme doesn't already have this file in it and all the code that I put in that snippet is the HTML that's going to be used to render the promotion on the cart page and I like keeping that in its own separate file so that I can easily find it and edit that without having to get buried in the rest of the cart template.

So that also means what I have to do is edit the cart template file and you'll either edit the template cart dot liquid or the section cart dash template dot liquid, one of those two files and most themes is the one that's used to render the details of your cart. And what you're going to do in that file is put an include statement for include cart DAS messages, which we'll reference that snippet that we create the HTML for our cart messages. So those are two of our files, but if you wanted to you could actually not created independent snippet for this and just put the code straight into the cart template.

The next file that I create is additional.CSS.liquid. Once again, I like keeping all my CSS changes and edits in a separate file from the themes CSS file, but you could put this content in the themes CSS file if you wanted to. I prefer a separate file and if you're doing a separate CSS file and you'd have to make sure you go into your theme dot liquid file and add a call to your new CSS file that you're creating so that when the page loads up using theme dot liquid, it not only calls the themes CSS file, but your new CSS file also. So that's the third and fourth file, additional dot CSS dot liquid and theme dot liquid. Then the fifth and last file that I'm editing, this is already existing file on your theme is I edit settings, schema dot Jason, and what this file is used for is when you're in theme customization, when you're customizing your theme, whether on the homepage or any other page in your theme, when you're customizing that, it's actually calling that setting schema dot JSON file to determine what you can edit it.

What's the text box? What's a slider? What's a product? You know, menu pull up item, all that good stuff gets specified in your setting scheme of Jason file. So what I do is I edit that file and add to it all the inputs for you to be able to edit easily the content behind your cart promotions. So once we add that code to the top four files, we shouldn't have to go back and edit those anymore. We should have to edit the code to change the content of cart promotions. Let's say one day you want a a a rush order processing thing for $25 but in the future you change that to be $50 by adding this content, NC setting schema dot. Jason, we now can just go into theme customization and edit the content there so we can change that 25 to 50 through the theme customization process.

By adding the code to this file, it'll enables us to have our store staff much more easily change and add and subtract different cart promotions in the store. For example, in that code, I have a checkbox for each one, the different types of promotions we can have to just turn them on or off. Do you want to show this promotion, the cart, this promotion is promotion and so on and so forth. So that's the five files you're going to have to add or edit inside of your theme. And that's true regardless of what theme you're using. And in the show notes, I'm going to give you a link to a page where I've got all these files that you can just copy and paste the code that I've created and used. But a little disclaimer there is code is not meant to be copied and pasted straight from the code that I've created into your theme.

This code is meant to give you the building blocks that you need to understand how these items work and how you can get cart promotions added into your theme. But you're gonna have to edit that code so that they work with your store, with your theme and with your promotions. And one other thing to note about this code is that I've designed it for carts that are full pages, not for popups or mini carts. So they should work well regardless of what theme you're using. Most of the time, if you're on a cart page, you probably have to edit a little bit based on the CSS or placement that you want. But they should work as they are, but you're definitely going to have to be editing the design of them quite a bit if you want to use them in pop up or mini carts. So in my example is I've got code for five different types of car promotions. I'm going to walk through each one of those for you so you understand what they do and how they work. And the first one is giving the customer a discount code based on cart size.

So you may, for example, want to provide people who have, you know, more than $175 worth of products in their cart, a coupon code for 10% off on their order. So what this code does, it looks at the size of the cart right now. So let's say the customer has $150 of products in the cart and it'll say, Hey, orders over 175 get a 10% off a coupon code on their entire order. You're only $25 away from that. If you want, click this button here to continue shopping. And then once they get over that $175 threshold, the message changed and it says, congratulations, your card is now over $175 you can get 10% off on your order if you just click this button here will automatically add the discount code to your checkout. So that's a nice way for stores that don't want to use automatic discounts for car size type promotions.

And one of the reasons you might not want to do that is that then restricts customers from using other coupon codes that they may have for your store and automatic discount code. We'll block out any other user added ones in the checkout process. So this allows the customer say, yeah, I want to use this 10% off coupon code and add it to their cart and checkout. Or they can opt to not use it cause maybe they have a 15% off coupon code that you've already given them. Now the second scenario is for cross selling your customers on gift wrapping. So this is really good during the holiday season. And also it's really good if your store is selling lots of products that are used as gifts. So this promotion allows the customer to add a gift wrapping product to their order by clicking a button. And it allows you to put in texts like, Hey, you know, get it gift wrap, explain the details behind it, tell him what the price is going to be and they click the button and it adds that gift wrap product to their cart. And what this module also does is it looks at your current cart contents and if any of the products in that cart are already the gift wrapping product, then it doesn't show this promotion. So if you have one product in the cart, it's not gift wrapping. The promotion shows when the customer clicks on and says yes, add gift wrapping to my order. The gift wrapping product shows up in the cart and the promotion goes away.

So the third example, kart promotion is for rush order processing and I really liked this promotion a lot and it's really good for stores that take a lot of time to process their orders. Maybe you're selling personalized goods or there's a long lead time for you to create your products and then ship them out. What rush order processing says is, Hey, if you want this in products important to you, do you need it this weekend to give us a gift or whatever. You can make this a rush order for whatever dollar amount you the store when we're set it to be, you can make this a rush order. It moved to the front of our processing line and what it does when they click that button, make rush order, it adds a rush order product to their cart and then that promotion, because that product is in the cart, that promotion for it goes away. Just like we were talking about with the gift wrapping scenario.

And you can specify any rules in it. Like you know you have to do this before noon to get it shipped. Same day. If you submit your order afternoon, we'll ship out next business day. Whatever your rules that you want to put behind this, you can. But one of the beautiful things about this is there are a lot of stores that I've worked with in the past that worked with gifts and a lot of people are really last minute when it comes to buying gifts for whatever scenario they're buying it for. So the store has had to deal with quite often customers calling them up or submitting, you know, notes in the order saying, Hey, I really need this by this weekend. Can you, can you please get it out for me? Thanks a lot. What this does, it sets a clear expectation to your customers. Yes, we can get it out immediately for you, but you have to pay for it. And it ends up reducing the amount of queries that the store owners get from the customers asking for that type of service because you're clearly stating what it is and you're clearly charging for it. And then this becomes money that goes straight to your bottom line, right? There's, there's no margin in this for you. There's no product that you're doing, it's just part of your service movement in the front of line.

Now, the fourth car promotion module that I have is for product cross-selling. And this doesn't have any sophisticated AI behind it that says, Oh, they've bought gloves, let's upsell them or cross sell them on hats. Nothing that sophisticated. So it's meant for stores that have a smaller product catalog where there's not a lot of things that go together really well and naturally. But there are people that are buying things, you know, more than one item in their purchases. So, one example I have is, is I have a client who sells belts and they also have a really cool key chain. So what they've done is they're doing a product cross-sell for their key chain cause it's a low dollar item is less than $10 it's more of an impulse type buy for them. So they're just putting that in the cart. Hey do you also want to add a key chain for $8 to your order?

And those people that do that increases the average order value. Now the product cross-sell module that I have allows up to three different products. So if the first product is a key chain, someone adds it to their cart, it then shows a second product if you want and we'll add it to the car shows a third product. Or you can just say, no, I just want to cross-sell one of my products. So you can do one, two, or three, whatever number you want. You know, once you add all three of all three earlier order in your cart, then the module doesn't show at all.

And as with all the other ones where the promotion goes away, if the product is in the cart, what happens if the customer's in the cart and removes that product from the cart? That promotion will pop up again and they'll see the item being promoted. So these first four promotions that I've talked about, all are designed to increase average order value, whether it's getting them to add a new product to the cart or incentivizing them to keep adding other products to their cart to get that discount code. The goal of all of those is to keep the customer engaged in that shopping experience and buying more of your products. The fifth and last carte promotion item that I have is for just generic type messaging. And I call it the out of office notification. The first time I used it for a client was when they were shutting down their office between Christmas and new year's.

And they do personalized products. So if they're not in the office there, they're shipping new products at all because they AE aren't there to ship it and B aren't there to personalize it. So when they shut down their office over the holiday timeframe, they wanted to make it clear to customers that, Hey, we're out of the office right now. We'll be back in the new year. Any orders you place now will get processed the first week of the new year. But that module is generic enough that you can put an image and text in. You can put any image in any text that you want in. So whatever works for you or for your needs. For example, I had another client who's shipping a lot of products to customers in Canada and Canada had a strike of the mail carriers. So they put in a notification saying, Hey, due to the strike in Canada, orders to Canada is going to take longer than normal.

Thanks for your patience, that type of communication. So those are the five cart promotions that I'm including in the code that I'm going to show you or link to in the show notes. Feel free to take them, put 'em in your store, test 'em out, try them. But because it's liquid code and your theme, you can fully edit it. So you can take the code that I put in place, learn from it a little bit, and then come up with your own scenarios. And if you come up with your own scenario, I'd love to hear about it. So please feel free to send me an email on, show me the work that you've done and how you've added to this cart promotions, do it yourself component.

So that's all I got for this week. Thanks a lot for listening.


JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


Search