Wix Ecommerce Series | Part 7 | Creating A Custom Product Page in Wix with Wix Code

Are you ready to learn how to customize your product page in Wix stores utilizing Wix code? If so, thank you for joining us. This is the video for you! If you're brand new here to the channel and brand new here to this week e-commerce series, make sure you hit that subscribe button right down below. So you don't miss a single upload on the channel. In this series, if you're joining us back, welcome back! And I appreciate you being here. If you haven't already at the like button, comment what you've enjoyed in this series so far, and obviously you hit that subscribe button. So you don't miss the content on this channel, guys! Thank you for joining us!

Head over to wixrainingacademy.com brand new re-imagined rethought out and click “Yes. I Want Free Wix Content”. If you're ready to join my free Wix Training Academy with tons of Wix training content, it's totally free, all yours. Go check it out!

Also, before we jump into this, if you're looking to hire out for a project, we are available! Yes, we are. You can check the email down in the description below and send us an email and I will get back out to you super quickly, because we are available for projects right now for hire.

Creating A Custom Product Page in Wix

So guys, now that we've discussed that, let's talk about how we go ahead and customize our product page here in Wix stores. So what we first have to do is we have to go to our Database, right? So first, first things, first we have to open Code. We have to make sure developer tools are turned on. And then once we do that, we can go ahead and open our little pie or tree chart over here. And it's going to show a Site Structure right here, so we'll see all of our pages.

What we need to do is we need to come down to Stores, go over to Products. This is our products database. And then we have to hit this little gear icon. Then you're going to see an option to Add a Dynamic page. Well, you'll notice that I already went ahead and testing and added the dynamic page right here.

All I simply did was click Add a Dynamic page came in here. I added an Item Page because it's a single product, right? So we're adding one single product. I went next and I chose Name right there. I showed you guys how to do that in the last video. But now what we're going to do is we're actually going to customize this page. So we know we've got some product information that we need on the page. I'm not going to show you every aspect of each variant, each color, stuff like that.But what I am going to show you is how to add your main product demographics to a page because you just replicate the process and connect it to the proper database items from there.

So if you do have variants or you do have extra colors, I might make an additional video for that. But it's the same process as what we're about to do. It's just connecting those database elements. So let's go ahead and do it.

So first things first, let's add a product title to the page, right? So we're going to come in here Text. I'm not going for any specific design guys. I'm keeping it very light and flowy. You have to make a design, that's obviously good for your audience, good for your website and make sure you do take time to plan out the design. For the purpose of this video, I'm not planning out the design, I'm showing you how to execute and get it done.

So I'm just going to name this “Product Title”. So that'll be our product title right there. Right then next up, I want to add our product image, our main product image show. We'll come in here to My Image Uploads, and we'll add our image.

If you know, you have multiple images for your product in particular, if you guys remember me starting this series, I added this product right here with this little expert badge, and I called it cool product just to throw a product in the store. But if you guys have multiple images, which I don't, you can go ahead and you could copy this, paste it. And then what you could do is you can do that method where you put some of the smaller images underneath this main large image and then you could connect each of these to the database as well, because you would have several images in there. Again, I don't need to do that, but that's what you would do. You would put several small images underneath and then you would just connect those to the secondary media items in the database. I'll show you what that means in a second. So we've got our product image.

Now what we need is we need a product description. Now, if I remember correctly, I don't think I'd put a product description in for this cool product which shame on me. But I might go ahead and do that while we're here in this video, just something very light and easy, just show you can see how it works. Because it is very light and easy to carry out your product description a little ways down the page, depending on how far you want to go, how long your descriptions are going to be.

Maybe you'll want to go all the way down to the end of this image. Again, this is designed type stuff. You choose how you want to do that. I'm showing you logistics in this video. So this will be our product description right here. So I'm not going to mark that. I know that's going to be our description. I'm going to drop the image down a little bit from title.

Next, what's another key element to an online store product page? Well, your price of course. So we're going to come in here. We're going to go to Add. We're going to go to add text again. And then we're going to add our price and I'm just changing a fonts here just to give it somewhat of apparent look. This product is $6.99, there was no discount on it. I did not add a sale. It’s $6.99, but again, it doesn't really matter what we put right here because we're going to be connecting it to the database. So it'll pull the correct product price.

These are all placeholders now, so just because you see these here does not mean this is what's going to be displayed, meaning this exactly is what's going to be displayed for your products. These are placeholders for your dynamic content. So it's actually going to pull once we connect it to the database, it's going to pull the product information. And so that way you're going to have products from your database and not this. So this is a dynamic page for that reason, because the content on this page changes. It's dynamic based off of whatever product it is in this case.

So then we add our price, right? So that's a pretty key aspect to this process and honestly, these are your four main things that I wanted to show you is how to add in your product page. Again, let me know down below, if you want me to create a video without more in depth and goes deeper into different variants, different colors, if there's enough demand for it, I will do it. But I wanted to show you the logistics, because this is how you would add those elements as well by connecting it to the database.

So now that we have our elements here, let's connect them to the database. So we're going up here. You're going to click it. And you're going to see this little Connect to Data button looks like three little bars. So you'll connect to data. You'll Create a Dataset. Number one, we’ll choose a collection. We want it in Products. We want the dataset named Stores/Products.

Now that we've got a dataset added, text connects to name in this case, Name (Text) . The name is the corresponding element for title in the products database. If we open the products database, you'll see that name is the name of the product in here. Description is the description. Main media is the main pictures, the SKU, the ribbons, the currency, the price, the discounted price, the formatted price, all this stuff. This is all in then product options.

Again, I could go deeper into all this if you guys want, but if I want to make sure that there's enough demand for it, because if not, then this should be able to help you guys understand what we're trying to accomplish here.

So now that we've got that done, we don't want to do that. We want to X that out. So now we can connect the data. So we connect product, title to name. We're going to connect. I'm going to move this over here. We're going to connect the product image, image source connects to MainMedia (Image). Again, that's what I just showed. As far as the picture is the main media, the product description, connect to data, and you'll notice each time it's successfully connected. It'll turn green on that little button. I’ll show you right here. A text connects to Description (Rich Text), and this is rich text. So you can actually edit how the text looks in your code. I'll show you how to do that. So that way you actually have some customization to the look and feel of that text. So we've got that, it turned green, it's connected to data.

Then we have Price and we're going to connect it to the data. I'm going to scroll down Price (Number), make sure you select price, the full price. If it's the full price, if you've got it on sale, or you've got some type of sale, you're going to want to input these other prices in like the discounted price or the format of discounted price, stuff like that. So you have to know what you're doing with your store.

So we're going to add price. So now we have our main elements connected to the database, I did want to show you one thing, which was what that rich text editor was. And I'll do that before I show you the live preview this page. So that way you can see what I mean. So if we go back to our Products database and I click Description. You'll notice.

It doesn't want to edit right now because I haven't added a description in the actual Wix stores. Okay, understandable. So what you have to do is you have to add a description in Wix stores edit the look and feel the description in Wix stores. And it pulls that directly in, since that's a Rich text editor, it allows you to format the text and it allows you to format the description inside the Wix stores app, when you're adding products, it will then transfer over to your look and feel here in the database, which will transform the look and feel on your dynamic page. So that's what I mean there.

So now we can access out and we can go back here. So you'll notice we're missing one essential item here. How do they add this to their cart? How do they actually purchase it? So what we're going to do is we're going to come in here to My Store. We're going to go to Add Store Elements, and we're going to, it'll start up here. We're going to scroll down to this, ADD TO CART button. And it's very simple from there.

Now, I'm not a big fan of that look, add to cart button. I'm going to change the design of this. And I'll show you this in a second. I'm going to change the design. I'll make it red. We'll keep it at red. So now you'll see Settings, right? You'll see ADD TO CART button. So what do we want to connect this button to, well, we want this ADD TO CART button to be connected to Cool Product, right? That's what page run. So this understands it's dynamic. We'll keep it add to cart.

Now, let me show you what happens once we go ahead and preview it. Now that we've connected everything to the data, and we have added our add to cart button, and this is the magic from this point on, you guys are ready to rock and roll any additional things that you want to add to your product pages. You just add them and then connect them to corresponding field in the database. And it'll pull that information and show it right here on the page. It really is that easy!

So if we click Preview, bingo! Now you guys notice I don't have a description on here. That's because I didn't add a description for this cool product, but what would happen is the description would show right here and it would show the full description. As I had written in the Wix stores actual products. I didn't add one silly me, but this is how it looks. And you could see a change to cool product. It changed to that picture. Now, I know this happens to be the same exact picture that I used for the dynamic page, but this is the picture I used for cool product and it changed to $5.99, which is the price that I listed. Apparently I thought I listed $6.99, but it was 5$.99. So you can see it fixed my mistake that I would have made otherwise.

And now if we click add to cart, it adds it to cart and it gives an option here. So when you're talking about variants and you're talking about choosing the proper elements, technically speaking, if you add the add to cart button in you for someone to choose a color, size customization, custom text, any of that, it won't allow them to add it to the cart until they do that.

So really you don't have to add it to the product page. If you didn't want, when someone clicks the add to cart button, it will make them do this. We'll just write my name. So remember, if you remember correctly, I had them write a custom text form that was required, and I had them choose a color. And now if we click add to cart, bingo! It's added to cart right there with the correct quantity, correct price. Then if we click View Cart, it's right there in our cart. And it's that simple. You see, you can check out with PayPal and just like that, we're set up we're up and running. And that's a custom product page.

Now, is that the most sexy product page that I have ever designed in my life? Yeah, no likely not. It's likely not the most sexy product page I've ever designed in my life, but guess what, does it get the job done? You bet you, it does. So it's that simple.

Conclusion

If this video helped you guys out, drop a like down below , comment if you've liked this video, if you want to see a more in depth look of combining Wix code I'm with creating a custom product page, let me know. I'd be happy to do one. But I want to make sure that there's demand there for that. Subscribe if you haven't already guys. So you don't miss any more content for this.

Head over to wixtrainingacademy.com, click that I want free content button, unless you think your website's perfect. In which case click. No, my website is perfect and congratulations to you if it is. But that's where we're at guys.

Remember if you watched this video and you're like, yeah, okay. I don't really want to do this work myself. I want to save time. We are available for hire right now. So feel free to check the description for the email. Other than that, I appreciate you guys so much, and I hope you found some value in today's video. I'll catch you on the next one!