61% of consumers read product reviews online before making a purchase decision.

There’s no doubt that product reviews are important to eCommerce sales. According to some studies, reviews add an 18% uplift in sales on average. And the more reviews your product has, the higher the conversion rate.

This is because consumers trust a review more than they trust a retailer’s description. When they see that your product has numerous 4-5 star reviews, it implies that the product is popular and worth the price tag. Why else would all those people be buying it and writing flowery reviews?

Introducing LemonStand Product Reviews

At LemonStand, we focus on building software that helps you grow sales and increase conversion rates. We’re continuously releasing new features on our eCommerce software that will add real value to your store. This month, we’re excited to announce the release of Product Reviews!

Product Reviews was on our Roadmap because we understood the advantages behind. While there are third-party apps out there that handle product reviews and can be integrated into LemonStand, we wanted to build something that would give your customers a seamless experience. By building it into our software, we’ve been able to add the flexibility of form and function that you’ve come to expect from LemonStand.

In this post, we’ll explain the structure of a product review and how you can add it to your store. We also have documentation to explain the technical details of the feature.

The Anatomy Of A Product Review

Product Reviews are handled using our built-in messaging system. This system manages communications between you, the store owner, and your customer. Whether it’s contact forms, emails, or other types of feedback, it’s all part of the messaging system. After all, a product review is just another way a customer communicates with you.

In general, a basic message in LemonStand contains 4 fields:

  • a title,
  • the customer’s comment,
  • the customers name,
  • and the customer’s email address.

A product review is a message with 3 additional elements:

  • an item rating (0-5 stars),
  • a related product ID (to identify which product the rating is for),
  • and a related customer ID if they’re logged in (to identify who left the review).

Additionally, LemonStand also tracks the customer’s IP address and the page they left the review from. This helps in identifying spam.

The Product Review Workflow

The way you collect and display reviews on product pages works like this:

  1. First you collect the review via a form.
  2. Then you display the review on your product page.
  3. You can also display a review summary if you have more than one review for a product.
  4. Finally, you send the customer an email notification that their review has been posted.

To set this up, we’re going to need to get our hands a little dirty and write some code. The reason we’ve set it up this way is so that you can change it to make it work the way you want. In this post, and in the documentation, we’ve got the bare minimum you need to set it up, so feel free to go crazy with it.

Creating The Review Form

The review form is basically a regular HTML form where customers will enter their name, email, a title for the review, the actual review, and then a star rating. Instead of coding this directly into our product pages, we’ll create a partial to help separate the code, and then we’ll look at how to add this partial to the product pages later.

So head to Store Design -> Partials to add a new partial. In the ‘code’ field let’s call it ‘shop-product-review-form’. You can call it anything you like, but remember to change the name every time you call this partial. You can leave the ‘description’ field empty because it’s for your internal purposes, but if you have other people looking at your code, you might want to just add a note there that this partial is for product review forms.

Finally, in the content area, add this –

[twig]
{{ flash() }}
{{ open_form({‘data-ajax-handler’: ‘system:onSendMessage’, ‘data-test’: ‘true’}) }}
<h3>Review this product</h3>
<div class="row">
<div class="twelve columns">
<input type="text" id="contact_name" name="fields[name]" value="" placeholder="Your name"/>
<span class="error"/>
</div>
</div>
<div class="row">
<div>
<input type="text" id="contact_email" name="fields[email]" value="" placeholder="Email address"/>
<span class="error"/>
</div>
</div>
<div class="row">
<div>
<input type="text" id="subject" name="fields[subject]" value="" placeholder="Subject"/>
<span class="error"/>
</div>
</div>
<div class="row">
<div>
<textarea id="contact_message" name="fields[message]" value="" rows="10" placeholder="Your review"></textarea>
<span class="error"/>
</div>
</div>
<div class="row">
<div>
<select id="item_rating" name="fields[item_rating]">
<option value="" diabled>-</option>
<option value="1">&starf;&star;&star;&star;&star;</option>
<option value="2">&starf;&starf;&star;&star;&star;</option>
<option value="3">&starf;&starf;&starf;&star;&star;</option>
<option value="4">&starf;&starf;&starf;&starf;&star;</option>
<option value="5">&starf;&starf;&starf;&starf;&starf;</option>
</select>
<span class="error"/>
</div>
</div>
<input type="submit" class="button" value="Submit"/>
<input type="text" name="hp" value="" style="display: none"/>
<input type="hidden" name="fields[shop_customer_id]" value="{{customer.id}}"/>
<input type="hidden" name="fields[shop_product_id]" value="{{product.id}}"/>
<input type="hidden" name="template" value="system:product-review"/>
<input type="hidden" name="fields[message_type]" value="review"/>
{{ close_form() }}
[/twig]

Related posts:  Meyer has arrived, and it's our sweetest free eCommerce theme yet!

Feel free to chop and change that if you want. As you can see it’s really just a basic form and when it’s submitted, LemonStand automatically logs the message and tags it as a review.

LemonStand product reviews

Displaying The Review

Great! You’ve now got a review and you need to publish it on your product page so that other customers can see it. In geek speak, we’re going to load all our reviews into an array for a certain product on the respective product page, and then loop through them to display them.

This means there are two parts to it:

  1. The loop function to display all reviews
  2. The individual review itself

We’re going to separate them out and add the actual review into a new partial, just to improve readability. Like we did with the review form, we create a new partial but this time we call it ‘shop-product-review’ and we add this code:

[twig]
{% set product_rating = product.rating() %}
<p>
{% if product_rating.total_reviews %}
{% for i in range(1, product_rating.average_int) %}&starf;{% endfor %}
{% if product_rating.average_int != 5 %}{% for i in range(1, 5 – product_rating.average_int) %}&star;{% endfor %}{% endif %}
({{product_rating.average}})
{% else %}
&star;&star;&star;&star;&star;
(- / 5)
{% endif %}
</p>
<p>
{% if product_rating.total_reviews %}
<a href="#reviews">See all {{ product_rating.total_reviews }} reviews</a>
{% else %}
<a href="#reviews">Add the first review</a>
{% endif %}
</p>
[/twig]

As you can see, this code displays the product rating and review if it’s there. If it isn’t, it urges the customer to add the first review.

Once that’s done, we actually need to start displaying the reviews on the product page. This means we need to edit the code for our product pages. Depending on where exactly you want the review to go on the page, you can either do this in Partials -> shop-product, or Pages -> Product. I suggest Pages -> Product, but obviously you have the flexibility to put it anywhere.

Once you know where you want it to go, just drop this code in that place:

[twig]
<div class="reviews">
<a id="reviews"></a>
{% for review in product.reviews() %}
{{ partial(‘shop-product-review’, {‘review’: review, ‘product’: product } ) }}
{% endfor %}
{{ partial(‘shop-product-review-form’, {‘product’: product, ‘customer’: customer } ) }}
</div>
[/twig]

And that’s all there is to it!

Review Summaries

So you know how on sites like Amazon, they have a star rating right next to the product name, and then the full reviews below. Well, you can do that on your store too. In the shop-product partial, simply add this code in after the code for product title:

[twig]
{% set product_rating = product.rating() %}
<p>{% for i in range(1, product_rating.average) %}&starf;{% endfor %}
{% for i in range(1, product_rating.average_remainder) %}&star;{% endfor %} ({{product_rating.average}})
<a href="#reviews">see all {{ product_rating.total_reviews }} reviews</a></a></p>
[/twig]

You’re all set!

Get Your Review On!

If you’re already on LemonStand, the feature is live, so follow the steps in this post to set up reviews on your store. Feel free to change things around if you want to make it look different. You want the reviews to feel like a natural part of your store, so don’t hesitate to change things. If you need more help, just have a look at the documentation.

And if you don’t have a LemonStand store, what are you doing? Go get your free trial now and see why some of the fastest growing eCommerce brands trust us.

Start Your 14-Day Free Trial