Rapid Reviews / Star Rating - Collection Page

Star Rating - Collection Page

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". Use this when you need to manually specify the count, like in a collection page grid item.
data-r ★★★★☆ 20 Reviews Show reviews label from translations.
data-rco ★★★★☆ (20) Show reviews count only. This may be helpful when you have a product grid on a product detail page, like a row of recommended products at the bottom of a product detail page. Sometimes showing the full label in a product grid causes wrapping, so it is undesireable.
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 
-->
{% liquid
  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 
-->
{% liquid
  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