Display Star Ratings on the collection page

Follow the below steps to display the star rating on the collection page.

Step 1 : Navigate to Online Store >> Themes >> Edit code and Create a liquid file in the snippet directory of your theme code and assign it the desired name.

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'-%}<span class="rivyoReviewFill" style="width:{{ rivyoRatingSplit1 }}%">{{ 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>

Step 2 : After saving the code in the file, open "card-product.liquid" and insert the following code above the line containing "{%- if show_rating".

{% render 'rivyo-badge', product: card_product %}

Note : Above process is supported in the themes listed below; however, the process may slightly vary if you are using a different theme.

• Craft
• Ride
• Spotlight
• Crave
• Colorblock
• Refresh
• Trade
• Dawn
• Publisher
• Sense
• Origin
• Studio
• Taste