How can i display Star ratings on Product Detail Page?

To display star ratings on the product detail page you need to create liquid file in snippet directory of your theme code.

Paste the below code in the snippet liquid file

{% assign settingValue = shop.metafields.rivyo.setting.value %}
{%- assign productRivyoReview = product.metafields.product_schema -%}
{%- assign shopRivyoReview = shop.metafields.rivyo -%}
{%- assign shopRivyoReviewSetting = shopRivyoReview.setting.value -%}
{%- assign productRivyoRating = productRivyoReview.th_ratingValue | split:'.' -%}
{%- assign rivyoRatingSplit0 = productRivyoRating[0] | times: 1 -%}
{%- assign rivyoRatingSplit1 = productRivyoRating[1] | default: '00' -%}
{%- assign rivyoRatingCeil = productRivyoReview.th_ratingValue | ceil -%}
{% assign hide_non_ratting_review = shopRivyoReviewSetting.hide_empty_review | times: 1 %}
{% assign is_empty = false %}
<div class="rivyoReviewWidget rivyoWidgetTrigger" data-rating="{{ productRivyoReview.th_ratingValue | default: '00' }}">
  <div class="rivyoReviewIcon">
    {%- for i in (1..5) -%}
      {% if i <= rivyoRatingSplit0 %}
        <div class="rivyoReviewRatingIcon">{{ shopRivyoReviewSetting.rating_icon }}</div>
      {% elsif i == rivyoRatingCeil %}
        <div class="rivyoReviewRatingIcon" >
          <span class="rivyoReviewEmpty">{{ shopRivyoReviewSetting.rating_icon }}</span>
            {%- unless rivyoRatingSplit1 == '00'-%}
              {%- assign width_value = rivyoRatingSplit1 -%}
                {%- if rivyoRatingSplit1.size == 1 -%}
                  {%- assign width_value = rivyoRatingSplit1 | append: '0' -%}
                {%- endif -%}
                <span class="rivyoReviewFill" style="width:{{ width_value }}%">{{ shopRivyoReviewSetting.rating_icon }}</span>
            {%- endunless -%}
        </div>
      {% else %}
        {% if hide_non_ratting_review == 0 %}
          <div class="rivyoReviewRatingIcon" >
            <span class="rivyoReviewEmpty">{{ shopRivyoReviewSetting.rating_icon }}</span>
          </div>
        {% else %}
          {% assign is_empty = true %}
        {% endif %}
      {% endif %}
    {%- endfor -%}
  </div>
  {% if is_empty != true %}
     <span class="rivyoReviewAverage"><span class="rivyoReviewAverageCount">{{ productRivyoReview.th_ratingValue | default: 0 | round: 1 }}</span> <span class="rivyoReviewAverageBracket">(</span>{{ productRivyoReview.th_ratingCount | default: 0 }}<span class="rivyoReviewAverageText"> {{ shopRivyoReview.average_review_label }}</span><span class="rivyoReviewAverageBracket">)</span></span>
  {% endif %}
</div>
  1. After saving the code in the file, open "main-product.liquid" and locate the "product_title" class within the file. Then, insert the following code after the "product_title" div.
{% render 'rivyo-badge', product: product %}

On the front-end, the Star rating will be displayed as shown in the image below.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us