Build trust with customer ratings and reviews of your products.
Play with the example below to see what you can do:
Open this example as a template so you can see how everything works in the Editor.
What We Built
In this example, a site member can rate, review, and recommend products in a Wix Store. The Product page for each item displays the average rating and the recommendation percentage, as well as the details of each review.
How We Built It
The Collection We Added: review-stats
The review-stats collection has the following fields:
rating: The total stars the product received
count: The number of times the product was rated
recommended: The number of times the product was recommended
ID: The ID of the product (hidden by default)
The Collection We Added: reviews
The reviews collection has fields for the review information and a field that references the item in the Products collection.
Adding Ratings and Reviews
Members add their review in a lightbox. The lightbox has input fields for the member’s details, a written review, a photo upload button, and radio buttons for their rating. There are also radio buttons that let them recommend the product.
When a member posts their review, the details are saved to the reviews collection, the review statistics for the product are added in the review-stats collection, and the lightbox closes.
Displaying Ratings and Reviews
The Product page displays the number of reviews, the average rating, the recommendation percentage, and the details of each rating. There is also a Write a Review button that opens the lightbox.
We added the necessary elements to display the average star rating for the product, the number of reviews it received, and the percentage of members who recommended the product. These elements retrieve the data from the review-stats collection.
Each review retrieves details from the reviews collection and displays them in a repeater. We also display how long ago the review was submitted.
Open this example in the Editor to work with the template.
Publish the site and refresh your browser so the Stores collections appear in the Database.
Learn how to work with examples in Corvid.
To start using Corvid: Go to the Wix Editor > Dev Mode > Turn on Dev Mode