FROM CACHE - en_header

Product Reviews - display average rating as numbers (e.g. 4.5 / 5.0)

Jason58
New Member
1 0 0

Hi everyone,

I'm using the Shopify Product Review app for my website, which allows you to show the average product rating using star symbols.

However, is there a way to show the average rating as a number such as 4.5 out of 5.0, instead of just as star symbols? I think the number exists as the 'data-rating' attribute within the app, but I don't know how to display the average rating as a number on my product page.

In another forum, it was noted you could hide the star ratings badge if there are no reviews by using this code:

https://ecommerce.shopify.com/c/shopify-apps/t/new-product-reviews-app-by-shopify-183579

.spr-badge[data-rating="0.0"] {
  display: none;
}

So to me it looks like it can read the average rating, but how do you display it on the product page as a rounded number?

 

Help much appreciated! Thank you

Replies 6 (6)
kanishakgautam
Tourist
4 0 3

Try below 2 codes : 
Note : Paste it at the end of your JS file ( theme.js if it is present )

Code 1 : 
<!-- Code 1 Starts here -->
$(document).ready(function(){
setTimeout(function(){
$(".spr-badge-caption").css("opacity","0");
var get_rating_in_num = $(".spr-badge").attr("data-rating");
console.log(get_rating_in_num);
$(".spr-badge-caption").text(get_rating_in_num);
$(".spr-badge-caption").css("opacity","1");
}, 5000);
});

<!-- Code 1 Ends here -->

 

Code 2 : 
<!-- Code 2 Starts here -->
$(document).ready(function(){
setTimeout(function(){
$(".spr-badge-caption").css("opacity","0");
var get_rating_in_num = $(".spr-badge").attr("data-rating");
console.log(get_rating_in_num);
$(".spr-badge-caption").text(get_rating_in_num + "/5");
$(".spr-badge-caption").css("opacity","1");
}, 5000);
});

<!-- Code 2 Ends here -->

n00bcoder
Tourist
5 0 0

@kanishakgautam wrote:

Try below 2 codes : 
Note : Paste it at the end of your JS file ( theme.js if it is present )


Thank you @kanishakgautam

That's work but the average rating number are shown like 4.549854116845641 and it makes the numbers of reviews disappear.

Any idea on how to fix that ?

MaikLtb
New Member
1 0 0

<!-- Code 1 Starts here -->
$(document).ready(function(){
setTimeout(function(){
$(".spr-header-title").css("opacity","0");
var get_rating_in_num = $(".spr-badge").attr("data-rating");
console.log(get_rating_in_num);
var avgrating = Math.round(100.0 * get_rating_in_num) / 100.0;
$(".spr-header-title").text(avgrating + " / 5");
$(".spr-header-title").css("opacity","1");
}, 5000);
});
<!-- Code 1 Ends here -->

Jules81
Tourist
10 0 4

Hello MaikLtb, 

great code - thx for sharing. 

Is there a way to alter the code so that the text says e.g "4.7 Based on 3,538 Reviews" 

Where 4.7 and 3,538 are dynamically codes. 

So my question is actually if your code can be altered in a way to show also the numbers of reviews dynamically. 

 

 

Jules81
Tourist
10 0 4

I found the solution. 

This works for us: 

/* Shopify Review App Adjustments*/
$(document).ready(function(){
setTimeout(function(){
var get_rating_in_num = $(".spr-badge").attr("data-rating");
console.log(get_rating_in_num);
var avgrating = Math.round(100.0 * get_rating_in_num) / 100.0;
$(".spr-badge-caption").prepend(avgrating + " ");
$(".spr-summary-actions-togglereviews").prepend(avgrating + " ");
}, 6000);
});

 

Ari9
Excursionist
35 3 8

Hi Jules,

You might want to checkout FeedMe Reviews on the Shopify app store.

It shows an overall star rating and embeds a reviews feed at the bottom of your product page.
If you're dropshipping from AliExpress, it lets you import reviews directly from an AliExpress product.

Note: I did recently publish this app, but would love to get some feedback on it. It has a 14 day free trial. It would be really great to hear your feedback if you do decide to try it out 🙂