Manual Rivyo App Installation Guide

Follow the below steps to setup the Rivyo app using the codes in your store

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 : Now, open the "main-product.liquid" page in the section and locate the "product__title" element.

Next, add the following code after the product__title div.

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

This will show the star rating badge below the product title on the product page

Step 3 : To display the product review section on the product page, simply insert the following code at the bottom of the "main-product.liquid" page and click on the "Save" button

<div class="page-width">
<div id="wc_review_section" class="wc_review_main_content" data-url="{{ shop.url }}" data-handle="{{ product.handle }}" data-product_id="{{ product.id }}" data-limit="0"></div>
</div>

This section will display the review section along with a button to collect reviews on the product page

To display the star rating on the Homepage and Collection page, please click here

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