Designing your eCommerce shopping cart page

Hey guys, this is Kellis Landrum from True North Social. We are a digital marketing agency in Los Angeles California and we specialize in e-commerce driven websites. We also do SEO and social media marketing as you would guess. But today, we are going to do our latest installment on e-commerce website design. Today, we are going to talk about shopping cart designs. A lot of people overlook the cart, but if you work with it you can considerably improve your customer’s shopping experience. If you are a new merchant or you don’t have a lot of experience running the store, you may not realize all the amazing things you can do with the cart and what you can do with it to improve your conversion rate.


So let’s dive right in a little bit and talk about the eCommerce cart page. Now, the purpose of the cart is this is where all of your products are going to get added when someone purchases them. Just to move backward a little bit, when someone is on the product page they would see an ‘add to cart’ button depending on what platform you are on this may say something a little bit different. It may say submit, it may say… you may have a bag instead of a cart. The nomenclature might be a little bit different but people are going to choose whatever size, quantity whatever options they want to and they are gonna hit the ‘add to cart button’. I am going to change the size here, as a matter of fact, sorry I’m gonna be using my cart and I am going to add this and now at this particular theme, this particular set up, our button changes to show ‘view cart’ or ‘continue shopping’.
shopping cart pages
I am going to click on ‘view cart’ so it would be the exact same thing and the same if I click on my cart shopping cart icon up here and now, I am going back to my cart, I can see all of the products that I have added. So let’s talk about what the fundamental pieces of a cart are right? a cart would have a list of products that you have added to it, it will also usually include a picture of the product, it will include the name of a product. if your product has variants like size or color, it will usually include those as well. you always want to have a remove button in your cart, are you want people to have a way to get rid of things if they made a mistake. It will generally include the price and quantity if you want people to control the quantity and will show the per item price here or if we change the quantity in here, I believe this will update…no. Depending on what platform you are working on and what setting you have, you may.. the quantity may… The price may reflect the quantity of items you have in your cart, it might not. Let’s try refreshing this page and see if it changes. Yeah, I’m on… I’m showing this example in ‘Shopify’ this is the default functionality of ‘Shopify’, which you can’t really change. If you are working on Magento or Woocommerce or something like that, you can go down to the hood and adjust it to do this if you choose to do it. But, in general regardless of what e-commerce platform you are using, pretty much all carts are going to have a set up like this. Now, this needs to be ubiquitous for a very fundamental reason.
added to the cart
That said, there are all sorts of different online stores so all kinds of different products. this store sells mostly physical products, mostly small ones you can slip in a box like a bottle of cold brew or a bag of coffee or a t-shirt, right? Some stores might sell digital products like you might sell mp3 downloads of your band or you might sell cooking classes things that don’t have a physical object attached to them that you are going to send to somebody. regardless of that, this cart is still going to be pretty much the same and there are not many things about e-commerce websites that you can stay… say really stay the same from one website platform to another and they stay the same regardless of what product you are selling. This is because customers have a fundamental need, right? They fundamentally need to see what they are buying before completing their purchase they need the ability to edit what they’re going to buy before they pay for it. so these are all fundamental aspects of this and I want to point out these details. We work with quite a few merchants and some are more experienced than others. But even with very experienced merchants, you find it’s very common that they will confuse cart with checkout. So the cart is when we hit this little add to cart button up here that says ‘cart’ that shows us the list of products.
shopping cart
Check out is the series of pages where we collect someone’s shipping information, we collect their payment information so on and so forth, right? So this is a very clear distinction that I want to make between the cart and check out. We are actually going to record a completely separate video and talk about checking out because it is it’s own animal in and of itself. now, there’s a lot of opportunity in the carts to do things. There’s a lot of opportunity for price rules, logic rules, discounts, and selling. One of the most common things that clients would ask me about is they’ll say, “oh I want to show people how much it’s going to cost to ship to them in the cart” and of course, the phrase ‘abandoned cart emails’ is something that we that we talk about a lot. so this is this is… sometimes these terms are used accurately and sometimes they are not, right? So on our cart page here, we show price right? Down here, we show sub subtotal and nearly every checkout page would show you subtotal regardless of what platform you are on. Now, we would have quite a few clients come to us and say, “Hey I want to show I want to show customers how much shipping would be when they go when they go to check out” and they talk about the cart page. Now, let’s be clear, in order to show somebody how much it would cost to ship to them, we need to know their shipping address right? And in the cart, in the cart here, with most platforms, there’s not really a good way by default to get the person’s shipping address.
ecommerce website
Now, with most platforms, if you use apps or you write some kind of custom code into your shopping cart that would allow someone to enter their shipping address or maybe even just their zip code, you can calculate the cost of shipping. but even that is still a guess because you’re not necessarily giving people the options or do I want to ship with UPS or USPS or FedEx. Do I want to ship within the next week or do I want my … do I want my stuff delivered tomorrow. There are no options here in order to calculate, that is where you would go through check out to collect that information right? So keep that in mind when you want to do, if you want to do shipping calculations. On a very similar note, a lot of our clients are concerned about abandoned cart emails and as you can see, there is no field in here for someone to enter their email address right? So you may have a customer come and add a bunch of stuff to their cart. However, if they abandon their cart before they click the checkout button, there’s no method of getting their email address and we have to have their email address in order to send an abandoned cart email. This may take a minute to kind of wrap your brain around, I know for some of our clients it does but there… if we are going to send in an abandoned cart email, we have to have an email address to send to.
checkout process
So someone adds this stuff to their cart and they make it far enough to check out that we can collect their email address, we can probably send them an abandoned cart email and say, “hey, you left this stuff in your cart. Why don’t you get it?’ we might even offer them a discount. But unless we have found some way to capture their email address, we can’t send anything to them and in most cases, there is no method to do that here in our cart right? So this is something to keep in mind for abandoned cart emails regardless of what e-commerce platform that you are working on. Now that said, let’s talk about selling in the cart right? most clients are… on our… are pretty familiar with discount codes but the deal with discount codes if you don’t usually enter them in the cart, you usually enter them in check out. so and… but it also requires you to enter a code, which you don’t always do. So you may want to create some special logic inside your cart to offer a discount to the entire order or specific products inside your cart. But, that that does not usually default functionality cuz, not everybody wants that right? But this is something to think about when you. If you’re if you’re working with a partner like True North Social and you say, “hey, I want to give people a discount but I don’t want to enter a code” this is you and the cart is usually where you would start to do that right? Because you need to get these specific products that are in a cart to create rules right?
discounts in cart
You need to understand if someone wants to add items to their cart. You may want to say that if you order over a certain amount you would get a discount. and that may be shown in your cart. If you order over $500 worth of stuff, you may create some logic that says there’s a discount inside the cart because you have reached over 500. That may be automatically applied, that can happen in the cart. one of the most common requests that we get is to do in the cart up sales or free giveaways of products right? So let’s say you wanted to offer a product in your cart when someone gets to the cart. there are many apps or add-ons or plugins depending on which e-commerce platform you are using that can be used to offer stuff in the cart. I’m going to show you an example of one that we have added to this store. We… this is ‘Shopify’ and we added an app that would let us that would let us show someone an add-on, in the cart provided that they have added this particular product right? If someone adds a ‘Chemex pour-over coffee maker’ to their cart, this message would appear; would you like to add a Bodum ® Pavina 2.5 oz. espresso cup? Right? So this is where logic comes into play right? Until someone had added this product to their cart, this thing does not trigger. There… when I talk about logic and pricing rules and discounts, I want you to burn the word logic into your mind and rules into your mind because this is really what we are talking about is; if this, then that right?
product detail page
If someone does something, then something else happens right? In this case, the logic was if a customer adds this product to their cart, then this message is displayed allowing them to add another product to their cart right? Now, you want to be careful what it is that you’re putting in here right? This is the option to add this cup to the cart. You notice that this does not offer a price, this does not offer any options like size or color. This just says, “do you want to add it to your cart?” this is a very very simple message. Now, let’s just assume someone collects, yes, I do want to add this to the cart. you may want that message to continue being up here, you may want it to disappear right? In this case, you chose to have it removed. This product now has… has now been added to the cart and it has a price of $4.50 right? so now that is added to the total cost and there’s a discount applied to this, whatever. You can create whatever you rules you want within this cart. Now, this is where there are some examples where logic is really tricky right? You may be offering multiple discounts or multiple incentives and if you do this inside of a cart, you want to really stop and think about if I am offering multiple discounts or incentives for people. Would the combination of multiple incentives cause problems for me? Just as an example, we are currently working with a customer who wants to offer a … they want to offer a subscription product and the first product you get your first order for $5 but they offer discounts or discount codes on certain websites offering a $5 discount.
in cart upsell
So we had to go through this process and mention to them, hey someone is ordering for their first time and they enter this discount code, it will decrease the cost of their first order down to 0 right? So you would be giving this away, do you, in fact, want to do that and they said no right? So we had to create some additional logic saying, “hey, you can’t apply a discount code if this discount is in effect right?” so many discounts may need to cancel each other out. Let’s show a slightly different example. I’m going to remove this real quick so I’m going to remove both of these and I’m going to go to the backend of my website. This is the product listing for this Bodum cup right? Now let’s say, for example, I wanted to give this cup away when someone orders that Chemex right? So I’m gonna go, I’m gonna change the price of this to 0, I’m going to save that and I’m going to go back over here and I’m going to add this to my cart right? So in view cart and it says, “hey, would you like to add this cup?” Now let’s say, let’s say you wanted…. For some reason, you wanted to… you ran a promotion saying, “Hey, if you buy this ‘Chemex pour-over coffee maker’, you can get a free cup along with it right? So people do that. Now, they have added this cup to their cart but let’s say they want to get sneaky right? Let’s say I’ve added this stuff to my cart now I want to remove all the other stuff that is in my cart including this ‘Chemex pour-over coffee maker’.
discount applied in cart
Well, we have just offered them a product for free and I assume this is going to maybe cost them something to ship it, it cost us something to ship as well. Some stores offer free shipping for everybody inside of the United States let’s say. So depending on what our discounts are and what we offer, we have now offered this person a way to get this cup absolutely free of charge right? This is where things get tricky inside of your cart we if I am going to do something like this. I want to make sure that I update my logic to say, hey, if someone… is I’m gonna offer someone something that’s dependent on this other product and they remove that product, then the free product is removed as well right? This is this where logic and rules can get kind of tricky you just want to make sure that you think through the logic of these rules and that you are not accidentally giving someone something away for free or discounting products down to a negative price. You just wanna, you wanna test these things before you actually offer them out to the public. These are things you want to consider when you are thinking about your store’s cart and the way it’s set up and the different discount options that you can offer.
shopping cart design
Once again, my name is Kellis Landrum. I am at True North Social and if you are in need of a partner to help you build your e-commerce website or you just have questions about issues with web design like this and you want some help sending up discounts or doing some consulting work with your e-commerce website, we are more than happy to help.


Check out all of our posts in the Ecommerce Website Design series:

E-commerce Website Design: Series Overview
E-commerce Headers and Footers – The most underrated piece of your Online Store
Homepage Banner Best Practices for Shopify Online Stores
How to make a great homepage for your E-commerce Website
What you need to know about your E-commerce Shopping Cart Page
How To Create New Products in Shopify – Video Tutorial
How To Create Collections in Shopify – Video Tutorial
How To Create New Pages in Shopify – Video Tutorial