Hello fellow Wixers, Michael Patrick Strauch here from Wix Training Academy. And today we are going to be working in the Wix checkout process here in Wix stores.
If you're just joining us welcome and hit that subscribe button down below. So you don't miss any videos in this Wix eCommerce mini series. If you're coming back, thank you for joining us again, hit that like button comment, what you've enjoyed so far on the series and what you'd like to see upcoming tomorrow. We're actually going to dive into Wix code plus Wix stores. So that's going to be an exciting duo.
Before we jump into anything guys, head over to the brand, newly designed, wixtrainingacademy.com link in the description below and go through become part of the Academy here by clicking that register. When the lightbox pops up, everything's completely free webinars, courses, training content, all of it completely free. So just go register today. All right guys. So let's hop into the actual video itself.
Wix Stores Checkout Process
We're going to focus on the checkout process. And what I mentioned in the introduction video of this series is the checkout process has to be easy. It's gotta be clear and it's gotta be smooth. If you could hit those three things, you'll start to minimize the people that abandoned cart during your checkout process for your Wix stores, eCommerce store, whatever that may be. So we need to really focus on that.
Wix has done a pretty good job of making this easy for us in making that checkout process fairly clear and fairies fairly simplistic. So I'm going to show you more than anything, how to tweak it and how to customize it today. So that way you don't run into any issues with people dropping it. So before we actually do it, let me show you what it would look like.
If we actually added a product to the car and went through the checkout process as it stays right now. So we go to our shop page, I'm going to press preview here and we have a product here. You have a quick view. If you click that, it'll pop up just a quick view of the product. If you remember correctly, I added this, I called it cool product, and we will just say Michael, because I'm pretty sure I made his mandatory last time. And then we'll click add to cart.
We have to select a color first, we'll select black. And then I'm going to click, add to cart here. You could then see it adds the cart right there. And as soon as it's added to the cart, it shows the popup of the car. So this is already step one of a good checkout process. You want to make it very clear when someone adds something to their cart, that they know where the car is and they know how to access it. So they know it is now added right here to this sidebar. And if they wanted to check out right now, they could click view cart, or they could put the cart back just like that. And they see their little shopping bag right here. And if they click the shopping bag, it'll open the cart back up.
Let's continue on and pretend we're going to check out with this. So we then click view cart and then Wix does a very good job of making it very clear again, what they're checking out about. Here's another dual thing that I like that Wix does. Wix offers both a checkout button at the top of the, where the product is. And at the bottom of the page where the product is. So people are very clear about where they need to click to actually proceed with checking out if they wanted to scroll down and see anything else about the product, enter a promo code, maybe add a note to it, shipping change, any information there. They could just click checkout up here. But if they know that everything's correct, they would just click checkout up here and you can see that it's got the product right here in my cart, shows the quantity.
It allows you to change the quantity. Maybe we want to now, and the price will change corresponding to whatever that quantity is. If you wanted to add a promo code, you would apply it right here. We don't have any promo codes on the site right now. Or if you wanted to add special instructions or a note, you would add them right there, but say we wanted to proceed. We would press checkout. And then right now, what you need to understand is you have to connect a payment method to your Wix website in order for the person to actually check out.
So what would happen next is it would pop up with the credit card information page, where they would put in their credit card or PayPal information, and it would allow them to then move forward in checking out. And that's the last step of the process right there. It shows them their cart here. It shows them an order preview on checkout page, but we're going to go over how to actually add your payment method in tomorrow's video.
So Wix code, Wix stores will be on Wednesday. Tomorrow's video will be the Wix that administrative work. And that's where we'll discuss adding payment information, adding business information, adding store, tax, shipping, all of that good stuff. So all the business administration stuff within your Wix stores and I'll show you how to do that. But for right now, we're just going to X out and that's where the checkout process will take us.
You can see it's very simple, very easy to do. Now we actually have to go ahead and edit it, right? So we're in our cart page here. This is a page, the pages you really need to focus on our two pages for this process. You need to focus on, well, obviously the product page, but we're going to go over the manipulation and customization of the product page. When we talk about Wix code and how that integrates and how we can now change around the product page. We're not going to focus in that right now, but what we are going to focus on is the cart page. And we're also going to focus on the thank you page. And this is the message they see after they click checkout pay.
Now, so this is also something you're going to want to customize. And depending on what you've got selling on your store, you may want to upsell on this page. You may want to change the information a bit, and I'm going to show you how to customize that and do that. So we're going to go to cart page for right now. First things first, if you want to change the cart icon up here, you click on it and then click settings. And you can choose out of these icons what one you would like your cart icon to be, and you could change the font and you could change the color of the icon plus the font. And if for some reason you wanted to reset it, you would just press reset to original design.
So maybe I want to change the cart to the basket and maybe I, the icon of the basket to be, let's see, well, it doesn't want to change right now. So we're not going to focus on that right now. I'll change the font for right now. We want it to be Roboto bold. And then that's exactly how you would change the actual icon. You can normally change the color. It looks like it's being a little buggy right now. It happens from time to time. That's okay. If that does happen to you, save your work X out of the editor and get back into it. It does happen on occasion. A nash is the mini cart. So this is what pops up on the side of your screen. So if you wanted to change the text on that, you could change it to my cart.
You know what, what the cart message would say if it was empty. So if they didn't have any products added in there, you could see right now it says cart is empty. And then if they wanted to view their physical cart, like we did in that checkout process, you could save you cart or even check out if you want them to go straight into checkout, that's completely up to you and your store settings. And then you have the settings. So you can have this little icon, either open to that mini cart that pops out on the side, like I showed you, or you can have it open straight to the full cart page, which is where we had them click.
When they click view cart, that's what opened up their either the two. It doesn't really matter. You just want to make it very clear where your user has to click in order for you to move forward in the checkout process. That's the biggest thing. You want it to be clear and concise, and then you can manage that right here by managing your payments and your store. That's how you edit this cart now to actually edit your physical cart page, you would click settings and you can actually come in here and go to settings. You could choose what's displayed on your cart. So our delivery rates displayed like they were and showed that we were in Missouri and it showed what the shipping cost was. It was free right now. It's set to free shipping. I'll show you how to change that in tomorrow's video, you could add tax costs on there.
This is where you actually get to manipulate and change the design of the car page. Maybe you want the background color of the page to be different. Maybe you want the fonts on the page to be different in different colors. Maybe you want the style buttons to match the rest of the buttons on your website. Maybe it's more rounded, open design, or maybe it's more rounded, closed design. In which case you could change the color of that. You can change the border of it. And then finally you can change the text, font and color again, down here for the product items and all of that good stuff plus for the button. So this text font button is for the checkout button down below.
So whatever that looks like best for your website is what you need to do there. You've got to make sure it consistently flows with the overall design of what you've got going on on your eCommerce store. And last but not least, you have general text information. So this is what they see in the cart. You can see, we saw all of these messages when we had a product physically in the cart.
So one, what is your page title? Is it going to be my cart? Isn't going to be, you know, checkout. What, what does that look like to continue link? Is it going to be right here? You'll see that continue shopping show. This gives people the ability to go back into the store so that way they can keep shopping. What's the text when the cart's empty cart is empty, that's very simple. It's very clear for people. And then you have your full cart text. So when it popped open, we remembered said the promo code. We had the note, we had the special instructions and this correlates to the note link right here. So this is what's in that box. And then you have the actual checkout button.
You could add a disclaimer, if you want to add a disclaimer, if there's like no returns or anything like that, you can add that straight to this page right here. And just like that you can edit and manipulate the cart page. And it's very clear, very simple. Now that's really the only customization in my mind you have to do to this, Wix stores a cart page. I don't think you have to get crazy in depth with adding a whole bunch of bells and whistles. Again, the more clear and concise you keep it, the better conversions you're going to have from people going from your cart to the checkout process and the checkout process to physically paint. But what you do want to focus on too, is your thank you page. And when people see this, some store owners like to just think that this is just an easygoing, okay, thank you. And then it has the buyer's name right here, but this thank you page can actually be used to benefit an upsell just depending on how you manage it.
So if you click settings here, a one you can go through, you could change all the designs again, just like I showed you in the last one with the cart page, the same process applies with the fonts, the colors, and then you have the text. So this is the title and the subtitle. So obviously you can see what the title is. It's thanks for shopping with us by her name. The subtitle is hope to see you again soon.
It can show the order number, the total costs to shipping to all of that good information, and then you can actually manage it in the backend. So you can manage the store. You can create new products, collections, but ultimately what it shows here is it shows your your individual's order number. It shows the total of their order, and it shows exactly where it's shipping to.
And it pulls all of this information straight from their account right here, which we can go to by clicking my account. And this is where they can actually update their account information. They can update a credit card that goes in their wallet.
If we click my wallet, you can see it allows you to save cards in here. Again, we haven't actually entered a physical card yet, but your buyer would be able to, if they create an account and I have to check out as a guest, they would just simply go through the checkout process and you can assign it. And I will show you that in the administrative, but that's how you actually edit and physically change the look and feel of the cart page and the actual thank you page on our shop. And it's that simple guys.
Conclusion
If this video helped you out drop a lke down below comment, if you enjoyed it, if it helped you out. And if you're looking forward to the next one, if so, what are you looking forward to? And then don't forget to smash that subscribe button so you don't miss the next part of this mini series. As we have the bulk of stuff coming up between tomorrow's administrative, there's a lot we're going to go over. And then the which code, which stores combo. There's a lot.
We're going to go into with that between reviews adding a wishlist, that type of stuff. So make sure you do not miss that. You're not going to want to, it's going to be really exciting. It's going to be really fun.
Thank you guys for watching this one and I will catch you on tomorrow's video. Remember to head over to wixtraining academy.com link in the description below. Thank you.