Have you been wondering how to add product reviews to your Wix store? Well, in this video, I'm going to show you how to add custom product reviews, so that way you never have to worry about adding default systems or not working properly again.
If you're just joining us, welcome to this video! Make sure you click that subscribe button right down below. So you don't miss a single video in this Wix eCommerce series or any of the videos here on the Wix Training Academy. If you're coming back to this video, thank you for joining us again and hit that like button right down below, comment what you've enjoyed most in this series and also hit the subscribe button. If you haven't already gone to wixtrainingacademy.com link in the description below, it's up, it's running. It's re-imagined go check it out. Hit Yes, I Want Free Wix Content. If you'd like to get enrolled in the free Wix Training Academy, you guys can find out more here on wixtrainingacademy.com.
Adding Product Reviews To Your Wix Online Store
All right, so now I'm going to show you what we're adding today. So you get a quick preview before we jump into it. You know, this is what we're building. So this is it right here. It's a ratings and review system. So we can see this as Ratings & Reviews. Yes, I know you see me a couple times in here. It's my pictures, but here is the product picture. So the profile picture of the person adding the review, the name of the person adding the review in the review itself, plus the rating of the review.
Overall, now this 150 people, I'm not going to show you editing in this video, but I am going to show you how to actually edit the rating in the physical review in this video and how we would submit a review, because I know you're all wondering how we do that. So that's what we're doing. And then when we click Submit A Review, it's going to pull up a lightbox for us to actually click.
I have to go to the Shop page. My apologies here. I have to go to the shop page because this is our product page. That was the homepage. We were editing our custom product page on we'd click Submit A Review right here, and it would pull up our submit a review lightbox. And then this is where they'll edit their details and then actually add the review.
Now for sake of this video, I'm going to show you how this works at the start of it, rather than at the end of it, because I've been asked by several people to start doing that, to show you a preview of what we're building before we build it. So let's do that.
So full name, I'll just add my name again. I'll add a profile picture this time. I'll do a new one so we could show some difference there on the page. And then I'll just say “This product has been fantastic easily, a five out of five!” Okay. And then easily a five out of five. So I'm going to rate it five stars. I love it! We're going to click that and then I'm going to submit my review.
When we do that, it's back to the product page. You simply X out of the submit review button. And then if we refresh our product page here, we will see my review has been added. And now we can see there's a review. Michael Strauch, Brandon Jones and Michael Strauch, these are all sample reviews. None of these are actually physical in here. If you want to come check out how to do this and want to test it out just to see that it's legit and it works I will throw the link to this little testing site in the description below as well. I'll throw this direct link to the product page. Come in here, submit a review.
However, as you're about to see you have to be a member in order to actually submit a review. The reason it's not anyone can submit a review is because the member will be the one. The site member author can edit the review and the site member author can also delete the review. If we change it to anyone that means anyone could delete reviews or anyone can edit reviews. And this isn't Wikipedia. This is your online store. We don't want that. So I'm going to show you how to avoid that from happening.
Now let's actually go through the process of showing you how I built this out. How did we just build out that review system? Well, number one, we got a box by going to Add, we go to Box and then this is the box I added right here. You customize the box to your look and feel after that, I added text right here that says “Ratings & Reviews”, nothing special about this, it’s just adding a box in texts like you normally would. Nothing Wix code related. Come in here at the heading and change the font and text and color to your style and your liking ratings and reviews. You can name it, whatever you like. These things do not reflect and do not need to be special for any bit of this, you know, Wix code type material.
After that, what I did is I added a submit a review button. I went right here to Add, came down to Button and just like I mentioned you can choose any style of button from here. It does not matter, what matters is that this is going to open up into a lightbox or a page or a little pin box, depending on the style you choose for your review system. The style as I will discuss really does not matter. It comes down to what you want your look and feel to be for a review submission in your online store.
So we add a button there and then what we have to do is we have to add a repeater here. So this is going to have, say over what the review system looks like. So we do have to add a repeater of our choice to add a repeater. We're going to come in here to Add, we're going to go to Lists & Grids and then we'll see our Repeaters are up here at the top. You can choose from any of these repeaters. You can see, I chose from this one right here where it says Josie Lane that's the repeater I chose. You can choose any of these.
However you want your reviews to be laid out and I want you to know once you choose one, you can edit the look and feel. So if you come in here, you could change the text. You can change the font. You could change the picture right here to be a certain shape. If you wanted to choose like filters on the picture, you can do that. You can change the color, the background. So if you wanted to change the background color of your repeater, you change it. Just like that. If you want to change the font, you can change it just like that.
Any changes you make to the first repeater up top here will reflect across all of the repeaters because it's a repeater. So it's going to repeat itself. It's just going to change the information because it's dynamic. So what goes in those repeaters is dynamic based off of what's submitted to the database. So that's the real power behind repeaters. It keeps a uniform design, but changes the data by using dynamic data because it's dynamic from the database. So it pulls that data from the database. I'll show you how we connect that here, very shortly.
There's Load More button, we're not going to utilize this in this video. But I just went down here. I added a button just like I did up top add button, and then I added it there.
So now let me show you how this repeater has a little bit more say in what's going to be displayed. So what we need to do before we even add our dataset and start linking our data is we have to add a database, okay? To do that, we're going to click open this, Show Tree View in order for this to even be here, you need to make sure your code tools are activated. If they're not activated, it'll say turn on developer tools. You click that if they are, it'll say, turn off, in which case you don't have to worry about anything.
Now you can see I've already added my Reviews database right here. So to add a database we'll click Add, we'll click add New Collection. We'd go through here. We'd type in reviews and then here I'll say “Reviews1”. So that way doesn't conflict with the one I've already created. We would come into Site Content and we would actually change it to “Custom Use”. And then we would go to Set up the permissions. So this is where that whole site member stuff comes into play. So who can read content from this collection? Well, if you have an online store and people are going to your product pages likely they're not already going to be site members.
So we want anyone to be able to read the reviews so that way they can make an educated buying decision. That should be Anyone. However, you can choose this one, depending on what you want the style of your online store to be. I selected Site member, but technically speaking, you can have Anyone or Site member for this.
So Who can create content for this collection? That essentially means who could submit a review. Can anyone submit a review or can a site member submit a review? If it's Anyone that means you can choose anyone to edit it or anyone to delete it or you. I'll show you this, if we choose Anyone here who can update the content from this collection? Well, we probably don't want just any random person to be able to come to this site and alter someone else's review, right? So the way to avoid that would be to make Admin update the content and Admin delete the content.
If you want anyone to submit a review, however, if your site is tailored to members and your online store, people have to become a member before purchasing or signing up or anything like that. You'll probably want to change Who can create the content for this collection? to Site member author and you'll want site member author to be able to update the content because it's their review.
So the site member, author, and the person that wrote that review is the person that could edit it. And then Who could delete content site member? Author, the person that edited that review can also delete that review. So that way it keeps a uniform style. That's what I have it set for right now. Again, that totally depends on the style you want. Your online store to be neither way is wrong. Neither way is incorrect. It's just, if you have anyone, anyone, it will be anyone can add a review in. Anyone could see a review without becoming a site member. If you have site member, they have to be a site member before they could submit a review. That's the difference there? Okay. So that's how I added a database reviews. Now let me go into it and show you.
So once we come into the Reviews database here, I have a couple different fields. So this products database, this will become important. And I'm going to show you a different style of adding reviews in a future video, where I actually use physical code. But in this video, I wanted to show you how to at least get the core functionality down, because it pretty much does the same thing, but I just want you to be able to have that for on-going.
So products, how did I add this one? Well, I went in here to Add field. I added products and I'll just say Products1 and the field type I chose is Reference and we are going to be referencing the products collection. This helps assign the review to the correct product page that it's on. So when you submit a review, you don't want the review submitted over all of your products. You want it submitted to one particular product. And by adding this reference field, it references the product page that you're on in that specific review. So that's what that field would be.
Then you would click Add the rest of the review. Our fields here are very easy to add for ratings. We're going to go to Add, we would type in ratings. I'll just say Ratings1. Cause we already have a ratings field type we want number and you would click Number and click Add. And that's how you add ratings.
For reviewer name and reviewer comment, you would come in here. Two separate ones. You would say reviewer, reviewer name. And we'll say ReviewerName1, field type Text. You would do click Add.
Then you would come in here again, click Add, ReviewerComment1. Again, I'm choosing one and you could add these field names, however you want them to be, by the way. So these can be specific to your review system. I just have it very basic and clear, what's the rating, who's the reviewer, what's the reviewers review and then a profile image if they have a profile image, right? So that's how I have it set up. And then reviewer comment, Text.
Then finally reviewer image, we would type in here, ReviewerImage1 and then we want this field type to be Image and then we'd click Add.
That's how we add our field. It's literally that simple to add all of those field types in there. So now that we have the field types in the database, we're going to X off of that and we're going to connect those items in the repeater to the database. So in order to do that, we have our dataset right here to add the dataset to the page we're going to Add. Then we scroll down to Database and click Dataset.
When you click dataset this little guy will pop up, it'll pop up at this icon. You'll double click it, you'll choose a collection. So you'll connect a collection. In this case, we're connecting to “Reviews” because we want the information displayed in these repeaters to be pulled from the reviews database. And then you could name your dataset. You will want to do this because in the future video, when I show you a little bit more sophistication behind this review system, those dataset names will come into play.
We want the mode to be Read-only because these are only going to be read. The ‘Submit a review’ function will be right only I'll show you how to add that. And then the number of items to display, we could add 20 here for right now. That means it'll display 20 reviews without having any page nation or load more buttons currently. So that's how many old display default, right? So then we'll click that off.
Now we have to connect the items in our repeater to the dataset. So we'll come in here, we'll click Connect to data and then we would connect it to a dataset, we want it connected to that Review Results dataset. And then the Image source connects to, in this case ReviewerImage (Image). And then you simply click that. Then we'd come in here to this portion, which would be the name, Connect to data. Again, make sure it's connected to Review Results. Texts connects to ReviewerName (Text). So you just add the corresponding data field to the field in the database. So this is reviewer name.
So this portion right here will connect your reviewer name. This one right here, we'll connect to ReviewerComment (Text) And then last but not least this ratings display will connect to ratings, which connects to Ratings (Number). You'll also see Number of ratings connects to, that's this 150 people love it. I'm not going to show you that in this video. Again, I will create a more sophisticated review system video upcoming. I just want to show you the bare bones core functionality right now. So that's how we add that right there.
So now we have all of our items connected to the dataset, right? So now all of the items in the repeater are properly connected. You can see by this green button it says Connected to data. That means it's properly added.
Now we have to go ahead and create a way for people to actually write reviews. So this Submit A Review button right here is linked to a lightbox. I created submit a review. Now I'm going to show you that lightbox right now. Before I do that, you can have that submit review button link to a Page. So you can have like submit a review page. If you'd rather that style, you could have a submit a review box. That's pinned down to the left hand corner, right hand corner, top corner of the page. If you want that you can do that.
In my case, I have it open straight into a lightbox that populates when someone clicks that and they submit a review, that way it does not matter the same functionality and data connecting is the exact same, right? But it's just a matter of the style. I chose a lightbox. You can choose a little pin post or you can change, choose a page. However you want to display that for someone to submit a review is up to you in the design of your eCommerce website.
So we're going to come in here to Lightboxes. We're going to go to Submit A Review and it pulls up a submit a review. So guys, this is very simple. I'm going to walk you through a high out of this stuff very briefly, very quickly.
So first off, these are two text fields. We already discussed how you add these. These have no correlation to the data other than, than a fact that they say, submit a review, please enter the following fields. You come in here to Add, you go to Text and you could choose any of these headings, change the font color into your needs. However, these things are what you need to know as far as how to add those inputs.
So before we actually add these inputs and I show you how we added them, we have to go ahead and add another dataset. So we would go in here to Add that's what this dataset is. We'd go to add, we'd go back down to Database and we'd click Dataset again. Once we do that, we will have a dataset populate.
We need to double click it. We need to make sure it's connected to Reviews. Once again, we want the dataset name again, you're going to want to name these for when we have our future sophisticated, a tutorial on this. I put Submit A Review and we want the mode for this one to be Write-only because people are submitting data. They're not viewing data, they're submitting data. So we want this to be write-only. Then we could click off of that.
And now what we need to do is we have to add our proper data input. So that way people can physically submit review. So to add this input, which is full name, we go in here to Add, we'd go down to User Input and we choose Text at the top here. And then you choose one of these text inputs. The design is up to you. So that's how we add our text input.
Next one down is the profile picture. And this is an upload input, right here. So this is an upload input. By the way, we would double click on this. You could change the placeholder text to Full Name. You can make this a Required field if you want and make sure the type is text right there.
So next we have the profile image. So people can upload a profile image to add that we’ll come in here to Add. We will then go down to User Input, and then we're going to select Upload Button. Again, you can choose the style and the customization of your upload button. I chose this one right here. And then when we have that, we can double click it. We can choose what that button text says, I chose Upload Profile Picture. You can choose whether that's shows that text when it loads or it doesn't, that's completely up to you. You can have placeholder text down there and you can make it a Required field, if you want. You want to make sure the supportive file type is Image for this.
So then we go down and then we have a text box for our reviews. So what we would do is we would go to Add, we would go to User Input and we'd go, whoops, we'd go to user input. We'd go back up to Text, except this time we'd scroll down to Text Box and once again you add the style that you want for yours. I chose this one down here when we get it and we add it by double clicking, we will then double click it again.
Once we add it to the page, we can change the placeholder content. I actually do want to change mine to Submit your review here. Then you can make this a Required one. We'll probably want that required because that happens to be the most essential part of the review system, which is the physical review. And you can make that a required. You could even limit the length of the review. If you wanted to a certain amount of characters or you could let people write what they want to write completely up to you. But that's what the text box settings are and then we're set on that one.
And then lastly, I added our actual ratings field. So to do that, we come back into Add. We go to User Input and this time we're going to select Ratings. Once again you can choose the style you want. So you'll see two things here. One is ratings input. One is ratings display. So you'll notice that I used this right here for ratings to display the information. These rating input are to actually submit information. So you're going to need to choose from one of these up here.
In this case, I chose the heart system. You would then click it, once you click it, you can actually set up ratings so you can choose titles. You could choose what each rating is, if like they select one star, it means don't love it. You can choose what that says. You can make it Required field, I'll make it required and you could see how you could customize that right here.
So you can choose what each star rating means. And it will display that right above the stars, right there. You can even come in here and change the design and customization. You could change what input field looks like, what the icon is, and then it'll correlate based off of whatever you choose there. So you do have customization over that. It is a pretty cool rating system. I would highly recommend it.
So once we've got all of our input fields added, we have to connect them through the dataset, to the database fields, just like we did on the repeater. So we'll come in here to full name, we'll click Connect to data and just like we did for the repeater items, we choose Submit A Review dataset. That's the dataset, that's what's connecting the database in this data. You choose Connect the dataset, choose that. And then Value connects to full name is going to connect your ReviewerName (Text), right? Profile picture is going to connect to ReviewerImage (Image).The review is going to connect to ReviewerComment (Text), and then finally the rating is going to connect to Ratings (Number).
So once we have all those connected, we have one last aspect to this, which is this button right here. So how I added this button, I went in here to Add. Once again, we went to Button and I chose this button right here. Again, you can customize the look after that. However, the important aspect of this is what the button does, what's its function. So we're going to click on the button and we're going to see this Connected to data button. We're going to click that. We don't link anything right here. We use this data.
So we click Connected to data and then we want it also connected to Submit A Review because when this button is clicked, what it's going to do is it's going to take the data entered in those fields and submit it into the database. So in order for that to happen, we needed to connect, to submit a review and then Link connects to Submit. You want it to submit the data to that database, click submit, and then when successful.
So when that data has been submitted, what do we want to happen next? In this case, I chose A link... You can choose to stay on this page. You can choose to send someone to a dynamic page. You can choose to have data go to certain fields, but I chose link and then I chose the Page. So I chose a link. You could come in here. It gives you all the different links settings. You can have it. Once it's submitted go to a different URL, you can have it open up a lightbox. You can have it open up a document and go to the top or bottom of page, go to a certain anchor, or you could have a do nothing. Doesn't really matter. I chose to go back to the product page, then we'll click the X.
So now all of our data has been connected to this. All of our data is set up in our repeater, which means if everything's working properly, the system should work. So if we go to View Site, we're going to give it a shot again, guys. It's going to open right here. This is going to look like the page we're working with. It's not, this is the homepage.
I was messing around a little bit with the homepage. We need to go to the Shop page and we're going to just click on a product because that review system was on the product page. So now that we're in here, you can see that our data has been entered. You can see, I am signed in, remember my database permissions. I have it set to site member. So you have to be a site member in order to submit a review. If it's anyone you don't have to sign in.
We're going to come in here, Submit A Review. We're going to say “John Doe”, we're going to upload a profile picture. I'm just going to pick a random one here. Let's use this Wix eCommerce thumbnail right there. “This product was just so so.” click that. It was so, so, so we're going to give it a three. We were satisfied, but it wasn't out of this world. And then we're going to submit our review.
Our data then has been submitted. You'll notice in the background and went back to the top of the page. We do have to X out of our lightbox though because it doesn't access out of the lightbox. So we X out of the lightbox and then to actually view our data has been submitted. We have to refresh the page and you'll see our data. Oops, it's still loading there. Our data was submitted and we have a new review added with a 3.0 rating and you can see all the different reviews.
Conclusion
So guys, that's how you add a custom review system to your Wix eCommerce store. This applies to testimonials, so this is not just specific to stores, if you guys want people to submit testimonials for your website and if you want people to submit comments to your website. So if you've got like a custom blog or you've got a custom video of a website or a custom social networking website, this applies to all of them.
However, I would urge you to stay with this content, subscribe down below. Like if you enjoyed it and comment your thoughts, but subscribe and keep those bell notifications on because I will be uploading very soon, a more sophisticated version of this that actually starts to integrate code into the whole concept of things here and how it will be more applicable and more dynamic based off of the new kind of features, if you will I add to this section and how it can be utilized, but those are the applications of this.
Again, if you enjoyed it, like the video and comment what you enjoyed. If I left out anything you needed, let me know, comment down below, and don't forget to click subscribe guys, head over to wixtrainingacademy.com, sign up for my free Wix Training Academy.
I am available for hire right now. So if you're looking to hire out and get a project started, feel free to let me know. My email is down in the description below, and you can also find me by going to contact or services here on my website, link in the description below guys. Thank you so much for tuning in today and I will catch you on tomorrow. Well tomorrow or Wednesday's video. Thank you guys again. Catch you on the next one!