top of page

Wix Ecommerce | Part 6 | Wix Code + Wix Stores | The Ultimate Guide To Building An Online Store

You ready for a Wix stores - Wix code combination? Well, if so, thank you for joining us in today's video as we're going to cover the start and overview of Wix code and Wix stores.

If you're just joining us in this Wix eCommerce series, thank you for joining. Make sure you hit that subscribe button right down below and turn those bell notifications on so you never miss a single upload of this series, especially as we go through the Wix code system.

If you're coming back to this series, thank you for coming back, hit that like button. Subscribe if you haven't already and comment what you've enjoyed so far in this series and what you're looking forward to in the rest of the Wix eCommerce series.

Before we jump into things, guys, head over to wixtraining link in the description below it's completely redesigned re-imagined and you can check out what I've done over there.

It's exciting. You can register for the free Wix Training Academy and also get some awesome Wix tips.

Wix Code and Wix Store

So now we're going to go into the editor in this portion of the video, we're going to keep it very short and sweet. Today, I'm going to show you an overview of where Wix code and Wix stores meet and how that can be accessed. And then we'll start taking the first dive into how we can customize that, but we're not going to go super deep into customization today, as I'm going to break it into a couple different chunks of videos throughout the rest of the week, because I feel like this is a very important topic to cover.

So firstly, when we go into our Wix eCommerce store, in order to even activate the Wix code tools, we have to go up here to code and we have to turn on developer tools. If we haven't already turned them on, I have turned them on. That's why it says turn off developer tools, but you would click turn on developer tools if you haven't turned them on. Yet once we do that to access and see where, Wix stores meets Wix code we have to click this little arrow show tree view. And then we'll see a couple different things over here on the side, we'll see the pages. So the site structure we'll see the member pages, which is where that whole, my account, my orders, my address is my wallet where all of that customer information is stored.

You'll see a dynamic page here, which I will show you how that works here in a second. And then you'll see down here database, and then normally you'll just see stores like that. So stores is where the, Wix code meets Wix stores and why I say that is because the actual product information and collection information is stored in a database. So that way you can customize the user journey and user experience through dynamic pages rather than relying solely on the system that Wix has provided.

As far as their look and feel of your product pages are or cart pages, anything of that nature. So now you get to customize the experience. Now let me show you what it actually looks like in the database. So these are collections. You can see the collections are very simple. It's main media and it's got the name of the collection. They're very basic, very straightforward, but our products is where all of our information is stored. So when you add a new product to your Wix store in your actual Wix stores app, it will be added to this products database. So you don't even have to worry about coming into the database and separately going line by line here, I'll show you in adding each portion, like adding the description, adding the name, adding the media, adding the skew.

You don't have to do that all right here in the database because you know, honestly it's a database. It's not all that User-Friendly when it comes to uploading data like a product and all the details directly into it. But that's why, Wix stores handles that portion of things. You add a product like you normally would in Wix stores, and then it's then added to this database. If we go through the database, if you remember correctly, I added a product called cool product, like two or three videos ago. And we could go through here. I did not add a description to that product I could now if I wanted to the main media is right here.

So this is the main picture. These are the additional media items. So if I added any additional pictures that would be added here, you would be here that ribbon show exclusive new product. Any of those things would be added right here. It shows the currency, the price with the discounted price would be how it's formatted, how the discount's formatted, if you're tracking inventory and then whether it's in stock or not in stock, how much is in stock. And then it shows you a couple things like product options. So your variance product page URL, the managing of the variance, and then also custom text fields, product type, slug, weight, all these different things. So it essentially shows every element of a product.

Now what we're going to do before I accidentally clicked back on the website here, we're first going to let it load, right? After loads, what we're going to do is we're going to create a dynamic page based on the data in the stores, right? So we're going to come into stores here and then over on products, we're going to click this little settings icon because we want to create a dynamic page that corresponds to the products database, since we're going to be creating product pages.

So we're going to click that little settings and we're going to click add a dynamic page. When we do that, we will then click item page because we want to display one item, one product. If you wanted to, to display multiple items, multiple products, you would do category page, which technically speaking here, you can also create if you wanted that to be your main shop page and you wanted to customize the look and feel and experience of that too. So also another option for you instead of having the main shop page, where it goes to that product gallery, you can create a custom shop page where you control the look and feel that and create a custom product page where you also control the look and feel of that. So those are things to consider.

It's just based off of how much work you want to put into your eCommerce store and how customized you want to make it. If you have absolutely no problem with the way Wix stores looks and feels already, as far as the shop page to the product page. And you just want to do some customization of like the coloring and the fonts and you know, the altering of that, that type of data, then don't worry about the customization of the product journey experience necessarily. But what you can focus on is when we dive a little bit more in the Wix code Wix stores the next couple of days, like product reviews and stuff of that nature, that's where you'll really want to dive in. But this is more showing anyone that wants to customize that user journey that feels out which stores current shop pages and product pages aren't up to par with what they'd like, and then we'd click next right here. We'd identify what we want the URL to be.

So we'd want it to be stores.

So this, this is the database information, right? So it's the stores database and the product is a sub database within stores. And then we want that last portion to be name. You could change this if you wanted. I'm going to keep it name because that's the product name. And then we would create page and then a dataset will then be added to our page right here. This is a dynamic data set, and that's where I'm going to leave off in today's video. I'm going to show you the actual customization of product pages and how we can add, you know, customized the look at reviews at a wishlist, do all of those exciting things over the next couple of days here, as we jump into a Wix stores - Wix code combination, but that's the start of it. This is where we go from here.

If you know how to edit dynamic pages already, if you're following along, you can start creating your product pages. If you follow some of my other videos about creating dynamic pages, it is fairly straightforward. You make connection types, but if you're ready to wait until we jump into tomorrow's video, then please do.


So I'm excited to have you here on the journey drop a like down below, if you enjoyed this video comment, if you've got any questions at all, if you enjoyed it, let me know what you enjoyed, what you're looking forward to. And don't forget to smash that subscribe button right down below, turn on those bell notifications. And also just so you guys are aware I am available for hire. I know I've gotten that question a lot lately because there was a portion where you know, I was packed with clients but I am accepting clients I am available for hire. So if you guys would like to just hire out for your eCommerce project, feel free to email me email in the description below, and we can get a project started together, remember to head over to

Other than that, I will catch you guys on tomorrow's video. Thank you, and have a fantastic day.

102 views0 comments

Recent Posts

See All


bottom of page