Rapid Reviews / Star Rating - Collection Page

Star Rating - Collection Page

First ensure that the Core Liquid & Scripts have been configured.

The Star Rating Snippet will show a star rating and link to any Reviews & Questions widget on the page. Note that this widget is only applicable to the respective page’s Shopify entity type, like product, collection, or page.

If you would like to show a star rating inside of collection result tiles, please reference our Liquid & Metafield Access.

Rapid Reviews Star Rating

Options

Selector Attribute Output Description
.rapid_reviews_stars_badge data-count ★★★★☆ (20) Reviews count as number like data-count="20"
data-r ★★★★☆ 20 Reviews Show reviews label from translations.
data-label ★★★★☆ 20 Reviewerinos Show custom reviews label, like data-label="Reviewerinos".
data-rh Hide reviews count and label.
data-q ★★★★☆ 20 Reviews 7 Questions Show questions label from translations.
q_count ★★★★☆ 20 Reviews 7 Questions Questions count as number like data-q_count="20"
data-q_label ★★★★☆ 20 Reviews 7 Quandries Show custom questions label, like data-label="Quandries".
data-qh Hide questions count and label.

~CE

<!-- 
  COLLECTION PAGE EXAMPLE
  CORE SCRIPT NEEDED ON PAGE (FROM BOTTOM OF THIS EXAMPLE CODE SECTION)
  THIS WOULD BE AN EXAMPLE FOR ADDING PRODUCT RATINGS TO A COLLECTION PAGE PRODUCT LIST 
-->
{%- assign avg = product.metafields.rapid_reviews.counts.value.r.rating.avg -%}
{%- unless avg %}{%- assign avg = 0 -%}{% endunless -%}
{%- assign count = product.metafields.rapid_reviews.counts.value.r.counts.core.total -%}
{%- unless count %}{%- assign count = 0 -%}{% endunless -%}
{% if count > 0 %}<div class="rapid_reviews_stars_badge" data-avg="{{ avg }}" data-count="{{ count }}" data-url="{{ product.url }}"></div>{% endif %}

<!-- 
  COLLECTION PAGE EXAMPLE - WITH QUESTIONS
  CORE SCRIPT NEEDED ON PAGE (FROM BOTTOM OF THIS EXAMPLE CODE SECTION)
  THIS WOULD BE AN EXAMPLE FOR ADDING PRODUCT RATINGS TO A COLLECTION PAGE PRODUCT LIST 
-->
{%- assign avg = product.metafields.rapid_reviews.counts.value.r.rating.avg -%}
{%- unless avg %}{%- assign avg = 0 -%}{% endunless -%}
{%- assign countReviews = product.metafields.rapid_reviews.counts.value.r.counts.core.total -%}
{%- unless countReviews %}{%- assign countReviews = 0 -%}{% endunless -%}

{%- assign countQuestions = product.metafields.rapid_reviews.counts.value.q.counts.core.total -%}
{%- unless countQuestions %}{%- assign countQuestions = 0 -%}{% endunless -%}

{% if countReviews > 0 and countQuestions > 0 %}<div class="rapid_reviews_stars_badge" data-avg="{{ avg }}" data-count="{{ countReviews }}" data-url="{{ product.url }}" data-q="1" data-q_count="{{ countQuestions }}"></div>{% endif %}

<!-- 
  MANUAL INIT AFTER CORE SCRIPT EXECUTED
  E.G. MAYBE YOU HAVE A MODAL THAT IS TRIGGERED ON CLICK
-->
<script>
  window.rr_drawStarsBadge()
</script>

<!-- 
  CORE SCRIPT NEEDED ON PAGE
-->
<script>
  ;(function(){
    if (window.r_u_loaded) return; window.r_u_loaded = 1;
    var rvsc = document.createElement('script'); rvsc.type = 'text/javascript'; rvsc.async = 'true';
    rvsc.src = 'https://apps.belkapp.com/api/reviews/files/{{ shop.permanent_domain }}/rapid-reviews-core';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(rvsc, s);
  })();
</script>
HTML