Add the rating widget to the collection page

Open your theme editor
Create a new snippet
Paste the code to the snippet
Add the snippet to the collection page

If you want to hide the rating widget if you don't have any reviews, you should use the below snippet.

{% assign prReviewCount = product.metafields.doran.prReviewCount | default: 0 %}
{% if prReviewCount > 0 %}
  <script type="text/javascript">
    window.$prDoranInit = window.$prDoranInit || {};
    window.$prDoranInit.ratingWidgetReview = window.$prDoranInit.ratingWidgetReview || {};
    var productReview = {
      reviewsCount: {{ product.metafields.doran.prReviewCount | default: 0 }},
      averageRating: {{ product.metafields.doran.prAvgRating | default: 0 }},
      stars1: {{ product.metafields.doran.prStar1 | default: 0 }},
      stars2: {{ product.metafields.doran.prStar2 | default: 0 }},
      stars3: {{ product.metafields.doran.prStar3 | default: 0 }},
      stars4: {{ product.metafields.doran.prStar4 | default: 0 }},
      stars5: {{ product.metafields.doran.prStar5 | default: 0 }}
    }
    if (typeof window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] === 'undefined') {
      window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = productReview;
    } else {
      var existingProductReview = window.$prDoranInit.ratingWidgetReview['{{ product.id }}'];
      window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = Object.assign(existingProductReview, productReview);
    }
  </script>
  <div
    data-dr="rating-widget"
    data-class-name="collection-page"
    data-hide-detail="true"
    data-product-id="{{ product.id }}"
    data-reviews-count="{{ product.metafields.doran.prReviewCount | default: 0 }}"
    data-average-rating="{{ product.metafields.doran.prAvgRating | default: 0 }}"
    data-star1="{{ product.metafields.doran.prStar1 | default: 0 }}"
    data-star2="{{ product.metafields.doran.prStar2 | default: 0 }}"
    data-star3="{{ product.metafields.doran.prStar3 | default: 0 }}"
    data-star4="{{ product.metafields.doran.prStar4 | default: 0 }}"
    data-star5="{{ product.metafields.doran.prStar5 | default: 0 }}"
    data-show-only-reviews-count="true"
  ></div>
{% endif %}

Now, Shopify does not support app blocks for the collection page. Doran will not add the rating widget to the collection. You have to add it manually. Follow this below steps to do it.

This tutorial requires the technical skills, including Liquid. If you have difficulty doing this, please contact us.

Open your theme editor

In this tutorial, we use the theme Dawn version 13.0.1 for example. It may be different from other theme you are using.

Create a new snippet

After you access the theme code editor, you can create a new snippet.

Enter the name for the snippet: doran-rating-widget

Do not forget to click Save.

Paste the code to the snippet

Copy the content of the below code and paste to your snippet.

<script type="text/javascript">
  window.$prDoranInit = window.$prDoranInit || {};
  window.$prDoranInit.ratingWidgetReview = window.$prDoranInit.ratingWidgetReview || {};
  var productReview = {
    reviewsCount: {{ product.metafields.doran.prReviewCount | default: 0 }},
    averageRating: {{ product.metafields.doran.prAvgRating | default: 0 }},
    stars1: {{ product.metafields.doran.prStar1 | default: 0 }},
    stars2: {{ product.metafields.doran.prStar2 | default: 0 }},
    stars3: {{ product.metafields.doran.prStar3 | default: 0 }},
    stars4: {{ product.metafields.doran.prStar4 | default: 0 }},
    stars5: {{ product.metafields.doran.prStar5 | default: 0 }}
  }
  if (typeof window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] === 'undefined') {
    window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = productReview;
  } else {
    var existingProductReview = window.$prDoranInit.ratingWidgetReview['{{ product.id }}'];
    window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = Object.assign(existingProductReview, productReview);
  }
</script>
<div
  data-dr="rating-widget"
  data-class-name="collection-page"
  data-hide-detail="true"
  data-product-id="{{ product.id }}"
  data-reviews-count="{{ product.metafields.doran.prReviewCount | default: 0 }}"
  data-average-rating="{{ product.metafields.doran.prAvgRating | default: 0 }}"
  data-star1="{{ product.metafields.doran.prStar1 | default: 0 }}"
  data-star2="{{ product.metafields.doran.prStar2 | default: 0 }}"
  data-star3="{{ product.metafields.doran.prStar3 | default: 0 }}"
  data-star4="{{ product.metafields.doran.prStar4 | default: 0 }}"
  data-star5="{{ product.metafields.doran.prStar5 | default: 0 }}"
  data-show-only-reviews-count="true"
></div>

If you want to hide the rating widget if you don't have any reviews, you should use the below snippet.

{% assign prReviewCount = product.metafields.doran.prReviewCount | default: 0 %}
{% if prReviewCount > 0 %}
  <script type="text/javascript">
    window.$prDoranInit = window.$prDoranInit || {};
    window.$prDoranInit.ratingWidgetReview = window.$prDoranInit.ratingWidgetReview || {};
    var productReview = {
      reviewsCount: {{ product.metafields.doran.prReviewCount | default: 0 }},
      averageRating: {{ product.metafields.doran.prAvgRating | default: 0 }},
      stars1: {{ product.metafields.doran.prStar1 | default: 0 }},
      stars2: {{ product.metafields.doran.prStar2 | default: 0 }},
      stars3: {{ product.metafields.doran.prStar3 | default: 0 }},
      stars4: {{ product.metafields.doran.prStar4 | default: 0 }},
      stars5: {{ product.metafields.doran.prStar5 | default: 0 }}
    }
    if (typeof window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] === 'undefined') {
      window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = productReview;
    } else {
      var existingProductReview = window.$prDoranInit.ratingWidgetReview['{{ product.id }}'];
      window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = Object.assign(existingProductReview, productReview);
    }
  </script>
  <div
    data-dr="rating-widget"
    data-class-name="collection-page"
    data-hide-detail="true"
    data-product-id="{{ product.id }}"
    data-reviews-count="{{ product.metafields.doran.prReviewCount | default: 0 }}"
    data-average-rating="{{ product.metafields.doran.prAvgRating | default: 0 }}"
    data-star1="{{ product.metafields.doran.prStar1 | default: 0 }}"
    data-star2="{{ product.metafields.doran.prStar2 | default: 0 }}"
    data-star3="{{ product.metafields.doran.prStar3 | default: 0 }}"
    data-star4="{{ product.metafields.doran.prStar4 | default: 0 }}"
    data-star5="{{ product.metafields.doran.prStar5 | default: 0 }}"
    data-show-only-reviews-count="true"
  ></div>
{% endif %}

Do not forget to click Save.

Add the snippet to the collection page

Search for a snippet that name card-product.liquid

As we mentioned above, in this example we are using the theme Dawn version 13.0.1 as an example. If you can not find a display location or can not find card-product.liquid, please contact us.

Copy the below code.

{% render "doran-rating-widget", product: card_product %}

Paste it to the line 166.

After all above steps, you will see the result like this.

I hope this tutorial may help you to add the rating widget to the collection page. If you have any issues relating to this, please contact us to get help.