Solved

How can I access star rating badges in metafields?

JosiahHubbard
Shopify Expert
4 0 0

Hey y'all, 

 

does anyone know if there is a way to grab the star rating badges in metafields? I want to show the review rating on the collection page, but I don't see much in the resources for this. I can still use liquid for it, but just curious if there is an actual metafield for it that we can pull. 

 

Thanks,

UI/UX | Argondev.com
Accepted Solution (1)

MetafieldsGuru
Shopify Partner
158 32 99

This is an accepted solution.

Hi @JosiahHubbard ,

 

There's a dedicated rating metafield type:1png.png

By default, Liquid would return a numeric value of the rating stored in a metafield. Here's the example of a rating metafield:

2.png

A simple Liquid snippet to display the value:

MetafieldsGuru_0-1648819692116.png

The final output:

3.png

However, you can extract additional attributes from the payload and add some HTML and CSS to convert the numeric value into the "stars". I tried it on my dev store and here's the result:

1.png

And here's the code. ... or rather "the code":

{% assign reviews = product.metafields.demo_set.rating.value %}

{% if reviews %}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style> 
   .checked {
     color: orange;
 }
 </style>
 {% assign rating = reviews.rating | round %}
 {% assign max = reviews.scale_max | round %}
 {% for iteration in (1..max) %}
  {% if iteration <= rating %}
   <span class="fa fa-star checked"></span>
  {% else %}
   <span class="fa fa-star"></span>
  {% endif %}
 {% endfor %}
{% endif %}
Check out Metafields Guru, the #1 ranked metafields app.

Bulk editor | Data import/export | Metafield sets | Browser extension

View solution in original post

Replies 5 (5)

Jason
Shopify Expert
11196 226 2287

The literal icon or just the total rating?

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★

MetafieldsGuru
Shopify Partner
158 32 99

This is an accepted solution.

Hi @JosiahHubbard ,

 

There's a dedicated rating metafield type:1png.png

By default, Liquid would return a numeric value of the rating stored in a metafield. Here's the example of a rating metafield:

2.png

A simple Liquid snippet to display the value:

MetafieldsGuru_0-1648819692116.png

The final output:

3.png

However, you can extract additional attributes from the payload and add some HTML and CSS to convert the numeric value into the "stars". I tried it on my dev store and here's the result:

1.png

And here's the code. ... or rather "the code":

{% assign reviews = product.metafields.demo_set.rating.value %}

{% if reviews %}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style> 
   .checked {
     color: orange;
 }
 </style>
 {% assign rating = reviews.rating | round %}
 {% assign max = reviews.scale_max | round %}
 {% for iteration in (1..max) %}
  {% if iteration <= rating %}
   <span class="fa fa-star checked"></span>
  {% else %}
   <span class="fa fa-star"></span>
  {% endif %}
 {% endfor %}
{% endif %}
Check out Metafields Guru, the #1 ranked metafields app.

Bulk editor | Data import/export | Metafield sets | Browser extension
PhilLennart
Shopify Partner
33 0 22

How could I change the icon to another emoji for example? I would like to display the heat level of hot sauce and would like to showcase a fire emoji (and then have 3 in color for example and 2 grey) is that possible?

MelissaJ
Visitor
1 0 0

I'm looking to do the same. Does anyone know how to do this?

JosiahHubbard
Shopify Expert
4 0 0

As of this year (2024), Shopify has deprecated their Product Reviews app. 

 

UI/UX | Argondev.com