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 >> Three dots menu >> Edit code 

Step 2 : 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 productRivyoReview = product.metafields.product_schema -%}
  {%- assign shopRivyoReview = shop.metafields.rivyo -%}
  {%- assign shopRivyoReviewSetting = shopRivyoReview.setting.value -%}
  {%- assign productRivyoRating = productRivyoReview.th_ratingValue | split:'.' | default: '0' -%}
  {%- 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 %}
  {% assign isClick = false %}
  {% if template.name contains 'product' %}
    {% assign isClick = true %}
  {% endif %}
          
          
  <div class="rivyoReviewWidget {% if isClick %}rivyoWidgetTrigger{% endif %}" data-rating="{{ productRivyoReview.th_ratingValue | default: '00' }}" style="display:none;">
    <div class="rivyoReviewIcon" style="display:flex; gap:3px; line-height: 0; flex-direction: row">
      {%- 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 or rivyoRatingSplit0 != 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="reviewRateCount">
          <span class="rivyoReviewAverageBracket">(</span>
          <span class="ratingCount">{{- productRivyoReview.th_ratingCount | default: 0 }}</span>
          <span class="ratingLabel"> {{ shopRivyoReview.average_review_label }}</span>
          <span class="rivyoReviewAverageBracket">)</span>
        </span>
      </span>
    {% endif %}
  </div>

Step 3 : Now, open the "main-product.liquid" file in the section and locate the "product__title" element. Then, add the following code after the product__title div in the file.

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

Next, Save the file. This will show the star rating badge below the product title on the product page

Step 4 : 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